• React is the front-end framework of FaceBook, which is characterized by componentization, high encapsulation and component reuse. The disadvantage is that both view and data are included in the render function, which does not achieve the separation of data and view
• The JSP syntax initiated by React has become an independent standard and recognized by the open source community. Compared with Vue template syntax, JSP syntax is more readable
• The emergence of ReactApp makes it possible for front-end programmers to make apps quickly

ReactApp

Install and run React project

Through npm global installation, you can create React scripts

sudo npm install -g create-react-app

Create a React project (project name is React to do list)

create-react-app react-to-do-list

Create project react to do list succeeded

Run project react to do list

cd react-to-do-list
npm start

Basic directory

Todolist effect core component

Basic use of Todolist

import React, { Component } from 'react';

class Todo extends Component{
    constructor(props){
        super(props);
        this.state = {
            to_do_list:['a', 'b'],
            title: ""
        }
    }
    // Handle click events
    clickHandle(){
        // Get current title content
        let newTitle = this.state.title;
        // Refuse to add if the current title content is empty
        if (newTitle.length === 0){
            return
        }

        // Get the contents of the current list and assign it to a temporary array
        let oldList = this.state.to_do_list;
        // Add the current title content to the temporary array
        oldList.push(newTitle)
        // Update to do list content and empty input content
        this.setState({
            to_do_list: oldList,
            title: ""
        })
    }
    // Process input value update
    inputHandle(event){
        // Sync the newly entered text to the title
        const newTitle = event.target.value;
        this.setState({
            title: newTitle
        })
    }

    render(){

        let pStyle = {
              padding: 10,
              margin: 10,
              backgroundColor: "#ffde00",
              color: "#333",
              display: "inline-block",
              fontFamily: "monospace",
              fontSize: "32",
              textAlign: "left",
              fontSize: 30,

            };
        let inputStyle = {

            width : 300,
            heigth: 20,
            fontSize: 18
        }

        let btnStyle = {

            width: 50,
            heigth: 20,
            fontSize: 18,

        }

        return (
            <p style={pStyle}>React Realization<br/>Todo task list<br/>
            <input style={inputStyle} value={this.state.title} onChange={this.inputHandle.bind(this)}></input>
            <button onClick = {this.clickHandle.bind(this)}>Add to</button>
            {this.state.to_do_list.map((item, index) => {
                return <li key={index}>{item}</li>
                }
            )}
            </p>
        )
    }
}

export default Todo