1, Main documents

• React
• React Router
• Ant design
• TypeScript
• Redux

2, Start using and experience react scaffold

npx create-react-app react-app-demo
cd react-app-demo
yarn start

3, Follow the document

1. Rendering an element

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

1. Use of rendering JSX

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(element, document.getElementById('root'));

1. Rendering a clock

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

1. Components and Props

   • Function component

     // app.js
     import React from 'react';
   
     function Welcome(props) {
       return <h1>Hello, {props.name}</h1>;
     }
   
     export default Welcome;
   
     // index.js
     import Welcome from './App';
     const element = <Welcome name="Ories" />;
     ReactDOM.render(element, document.getElementById('root'));
   

   • Class components

     // app.js
     class Welcome extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }
   
     // index.js
     import Welcome from './App';
     const element = <Welcome name="Ories1" />;
     ReactDOM.render(element, document.getElementById('root'));
   

   • props

   //props is the value passed from the parent component to the child component
   

   • Be careful

   // The return must be wrapped with a div
   function App() {
      return (
        <div>
          <Welcome name="Sara" />
          <Welcome name="Cahal" />
          <Welcome name="Edite" />
        </div>
      );
    }
   

2. State and Lifecycle

   • State

     // index.js
     class Clock extends React.Component {
       constructor(props) {
         super(props);
         this.state = {date: new Date()}; // Assign a value to state here
       }
     
       render() {
         return (
           <div>
             <h1>Hello, world!</h1>
             <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
             // In the render section, access this property through this.state.date
           </div>
         );
       }
     }
     
     ReactDOM.render(<Clock />, document.getElementById('root'));
     

   • Lifecycle

     class Clock extends React.Component {
       constructor(props) {
         super(props);
         this.state = {date: new Date()};
       }
     
       componentDidMount() {
         this.timerID = setInterval(
           () => this.tick(),
           1000
         );
       }
     
       componentWillUnmount() {
         clearInterval(this.timerID);
       }
     
       tick() {
         this.setState({
           date: new Date()
         });
       }
     
       render() {
         return (
           <div>
             <h1>Hello, world!</h1>
             <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
           </div>
         );
       }
     }
     
     ReactDOM.render(<Clock/>, document.getElementById('root'));
     

3. Handling events

   • Simple event binding

     helloWorld(){
       console.log(1)
     }
     
     render() {
       return (
         <div>
           <h1>Hello, world!</h1>
           <button onClick={this.helloWorld}>
             //Button
           </button>
           <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
         </div>
       );
     }
     

   • toggle case - bind this

     class Toggle extends React.Component {
       constructor(props) {
         super(props);
         this.state = {isToggleOn: true};
     
         // This binding is necessary to make `this` work in the callback
         this.handleClick = this.handleClick.bind(this);
         // bind this and click a button. bind this often occurs in react,
         // Because when you click a button, its event often points to the dom element instead of the react class itself, so you need bind this
       }
     
       handleClick() {
         this.setState(state => ({
           isToggleOn: !state.isToggleOn
         }));
       }
     
       render() {
         return (
           <button onClick={this.handleClick}>
             {this.state.isToggleOn ? 'ON' : 'OFF'}
           </button>
         );
       }
     }
     
     ReactDOM.render(
       <Toggle />,
       document.getElementById('root')
     );
     

4. conditional rendering

   • Case 1

     function UserGreeting(props) {
       return <h1>Welcome back!</h1>;
     }
     
     function GuestGreeting(props) {
       return <h1>Please sign up.</h1>;
     }
     
     function Greeting(props) {
       const isLoggedIn = props.isLoggedIn;
       if (isLoggedIn) {
         return <UserGreeting />;
       }
       return <GuestGreeting />;
     }
       ReactDOM.render(<Greeting isLoggedIn={true} />,   document.getElementById('root'));
     

   • Case 2: button switch login status

     function UserGreeting(props) {
       return <h1>Welcome back!</h1>;
     }
     
     function GuestGreeting(props) {
       return <h1>Please sign up.</h1>;
     }
     
     function Greeting(props) {
       const isLoggedIn = props.isLoggedIn;
       if (isLoggedIn) {
         return <UserGreeting />;
       }
       return <GuestGreeting />;
     }
     
     function LoginButton(props) {
       return (
         <button onClick={props.onClick}>
           Login
         </button>
       );
     }
     
     function LogoutButton(props) {
       return (
         <button onClick={props.onClick}>
           Logout
         </button>
       );
     }
     
     class LoginControl extends React.Component {
       constructor(props) {
         super(props);
         this.handleLoginClick = this.handleLoginClick.bind(this);
         this.handleLogoutClick = this.handleLogoutClick.bind(this);
         this.state = {isLoggedIn: false};
       }
     
       handleLoginClick() {
         this.setState({isLoggedIn: true});
       }
     
       handleLogoutClick() {
         this.setState({isLoggedIn: false});
       }
     
       render() {
         const isLoggedIn = this.state.isLoggedIn;
         let button;
     
         if (isLoggedIn) {
           button = <LogoutButton onClick={this.handleLogoutClick} />;
         } else {
           button = <LoginButton onClick={this.handleLoginClick} />;
         }
     
         return (
           <div>
             <Greeting isLoggedIn={isLoggedIn} />
             {button}
           </div>
         );
       }
     }
     
     ReactDOM.render(
       <LoginControl />,
       document.getElementById('root')
     );
     

5. List and Keys

   • Render list

     const numbers = [1, 2, 3, 4, 5];
     const listItems = numbers.map((number) =>
     <li key={number.toString()}>{number}</li>
     // Add keys
     );
     
     ReactDOM.render(
       <ul>{listItems}</ul>,
       document.getElementById('root')
     );
     
     

6. Forms form submission case

   • The value entered will be capitalized

   class NameForm extends React.Component {
     constructor(props) {
       super(props);
       this.state = {value: ''};
   
       this.handleChange = this.handleChange.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
     }
   
     handleChange(event) {
       this.setState({value: event.target.value});
     }
   
     handleSubmit(event) {
       alert('A name was submitted: ' + this.state.value);
       event.preventDefault();
     }
   
     render() {
       return (
         <form onSubmit={this.handleSubmit}>
           <label>
             Name:
             <input type="text" value={this.state.value.toUpperCase()} onChange={this.handleChange} />
           </label>
           <input type="submit" value="Submit" />
         </form>
       );
     }
   }
   
   ReactDOM.render(
     <NameForm />,
     document.getElementById('root')
   );
   

7. State improvement

   • Is the water boiling

     function BoilingVerdict(props) {
     if (props.celsius >= 100) {
       return <p>The water would boil.</p>;
     }
     return <p>The water would not boil.</p>;
     }
     
     class Calculator extends React.Component {
     constructor(props) {
       super(props);
       this.handleChange = this.handleChange.bind(this);
       this.state = {temperature: ''};
     }
     
     handleChange(e) {
       this.setState({temperature: e.target.value});
     }
     
     render() {
       const temperature = this.state.temperature;
       return (
         <fieldset>
           <legend>Enter temperature in Celsius:</legend>
           <input
             value={temperature}
             onChange={this.handleChange} />
     
           <BoilingVerdict
             celsius={parseFloat(temperature)} />
     
         </fieldset>
       );
     }
     }
     
     ReactDOM.render(
     <Calculator />,
     document.getElementById('root')
     );
     

8. Combination and inheritance

   • combination

     // index.js
     function FancyBorder(props) {
       return (
         <div className={'FancyBorder FancyBorder-' + props.color}>
           {props.children}
         </div>
       );
     }
     
     function WelcomeDialog() {
       return (
         <FancyBorder color="red">
         // This can be changed to green, blue
           <h1 className="Dialog-title">
             Welcome
           </h1>
           <p className="Dialog-message">
             Thank you for visiting our spacecraft!
           </p>
         </FancyBorder>
       );
     }
     
     ReactDOM.render(
       <WelcomeDialog />,
       document.getElementById('root')
     );
     
     // index.css
     .FancyBorder {
       border: 1px solid;
     }
     
     .FancyBorder-red{
       border-color: red;
     }
     
     .FancyBorder-blue{
       border-color: blue;
     }
     
     .FancyBorder-green{
       border-color: green;
     }
     

   • inherit

         function FancyBorder(props) {
       return (
         <div className={'FancyBorder FancyBorder-' + props.color}>
           {props.children}
         </div>
       );
     }
     
     function Dialog(props) {
       return (
         <FancyBorder color="blue">
           <h1 className="Dialog-title">
             {props.title}
           </h1>
           <p className="Dialog-message">
             {props.message}
           </p>
         </FancyBorder>
       );
     }
     
     function WelcomeDialog() {
       return (
         <Dialog
           title="Welcome"
           message="Thank you for visiting our sda!" />
       );
     }
     

4, Introduction to TypeScript

1. Case 1

   function greeter(person: string) {
     return "Hello, " + person;
   }
   
   let user = "Jane User"; // If you change this place to bool, number, the following line will report an error
   
   document.body.textContent = greeter(user);
   

2. Define the object type of Person

   // interface is mainly used for objects
   interface Person {
     firstName: string;
     lastName: string;
   }
   
   function greeter(person: Person) {
       return "Hello, " + person.firstName + " " + person.lastName;
   }
   
   let user = { firstName: "Jane", lastName: "User" };
   
   document.body.textContent = greeter(user);
   

5, Build React+Antd+Typescript project

yarn create react-app potato --template typescript
yarn add antd
// app.css
@import '~antd/dist/antd.css';

Finally, personal wechat, welcome to exchange!