Basic knowledge:

1. ReactDOM.render to render elements. There are generally three parameters: the rendered content of the template (in HTML form), the DOM node to be inserted, and the callback after rendering (generally not used) react CreateElement create tag (virtual DOM simulates real DOM, compares the difference, and then renders)
   2. By introducing babel and adding type="text/babel" attribute under div script, you can write html tags directly under script
   3.js has a class object. In script, the class name is written as className in order to distinguish
   4.jsx: that is, write html code in js. At the same time, js code can also be nested in html (referenced by single brackets)

   Hello,{name}

   . Show the interactive essence that the UI should present const element=

   Hello, world!

   ;
   5. Element rendering React DOM will first compare the different contents of elements, and only update the changed parts in the rendering process. React is a one-way binding, data-driven view.
   6.new Date().toLocaleTimeString(); Get local time string
   7. Component: used by multiple pages. Improve development efficiency. Creation method: I. attributes of functional components (stateless components, no life cycle) are passed through props Get function hello (props) {return by name

   {props.name}

   }
   II. Inherited from react Component (stateful component with life cycle). Stateful component, attribute through this props. Get class Hello extensions react. Name Component{ render(){ return

   {this.props.name}

   }}
   8. Life cycle
   Componentwillmount() {console. Log ('before component loading ') / / you can make ajax requests and request data operations}
   Componentdidupdate() {console. Log ('data updated ')}
   Updateuser = () = > {/ / wrong Syntax / / this.state.name = 'Time'; this. Setstate ({Name: 'Tim', age:32})}
   render() {/ / when the component changes, execute render console.log('component loading or data updating') to update the data}
   9. Event handling (the event name is hump naming, such as onClick, etc.)
   Method 1: the arrow function dynamically binds updateuser = () = > {}. Directly onClick={this.updateUser}. If it is written as updateUser() {...}, it will be undefined
   If it is written as an ordinary function, there are three ways:
   Method 2 bind updateUser2 object in initialization stage. constructor(props) {/ / initialize props and state this.updateUser2 = this.updateUser2.bind(this);}
   Method 3: the arrow function in onclick is directly bound to the function. onClick={()=>this.updateUser3()}
   Method 4 onClick={this.updateUser3.bind(this)}
   10. You must use setState to call render
   You can directly initialize the default state state = {isLogin:false} use const islogin = this in the component state. isLogin
   Ternary expression {isLogin?:}
   The name of the component is generally capitalized. When referencing, it is self closing function login() {return login} ele=
2. Method by which a child component triggers a parent component
   Parent component: pass the updateUser method to the child component
   Subcomponent: receive updateUser method through props attribute
   Function login (props) {return login}
   12. List rendering

        class List extends React.Component{
            
            state = {
                list:[1,2,3,4,5],
                list2:[
                    {id:1,text:'java'},
                    {id:2,text:'js'},
                    {id:3,text:'php'},
                    {id:4,text:'python'},
                    {id:5,text:'node'}
                ]
            }

            render(){
                const arr = this.state.list;
                const arr2 = this.state.list2;
                const listItem = []
                const listItem2 = []
                //map traversal, and the elements are processed in the order of the original array elements
                arr.map((item)=>{
                    let li = <li>{item}</li>;
                    listItem.push(li);  
                })
                //Or for loop. It is recommended to add key to cache. If there is no change next time, you can use it directly to improve performance
                 //for (let i = 0; i < arr2.length; i++) {
                 //    let li = <li key={arr2[i].id}>{arr2[i].text}</li>;
                 //   listItem2.push(li);
                }
                return <div>
                        <ul>
                            {listItem}
                            {listItem2}
                        </ul>
                    </div>
            }
        }
        ReactDOM.render(
                    <List />,
                document.getElementById('app'));

13. Form application

        class ToDoList extends React.Component{
            state = {
                value:'',
                list:[]
            }

            handleAdd = ()=>{
               // const val = this.state.value;
               // const list = this.state.list;
                //es6 structure syntax (equal to the above two lines of code):
                 const{val,list} = this.state;
                list.push(val);
                //If the data changes, you must call this Setstate changes this value and then automatically calls render
                this.setState({
                    list:list
                    //In es6, when key and value are equal, key can be omitted
                    //Abbreviated from list:list to list
                })
            }

            handleInput = (event)=>{
                this.setState({
                    value:event.target.value
                })
            }

            render(){
                const val = this.state.value;
                const arr = this.state.list;
                const listItem = []
                arr.map((item,index)=>{
                    let li = <li key = {index}>{item}</li>;
                    listItem.push(li);
                })

                return <div>
                        <div>
                            <input type = "text" value={val} onChange={this.handleInput}/>
                            <button onClick={this.handleAdd}>add entry </button>    
                        </div>
                        <ul>
                            {listItem}
                        </ul>
                    </div>
            }
        }
        ReactDOM.render(
                    <ToDoList />,
                document.getElementById('app'));