Create react app and complete HelloWorld of TodoList

  • 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

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{
        this.state = {
            to_do_list:['a', 'b'],
            title: ""
    // Handle click events
        // Get current title content
        let newTitle = this.state.title;
        // Refuse to add if the current title content is empty
        if (newTitle.length === 0){

        // 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
        // Update to do list content and empty input content
            to_do_list: oldList,
            title: ""
    // Process input value update
        // Sync the newly entered text to the title
        const newTitle =;
            title: newTitle


        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>
            {, index) => {
                return <li key={index}>{item}</li>

export default Todo

Keywords: React npm JSP Vue

Added by SieRobin on Thu, 02 Apr 2020 04:14:24 +0300