How React Binds in Two Ways

todoMvc-2step source
todoMvc-2step demonstration
The last chapter mainly talks about react+webpack environment construction, this chapter mainly talks about how to bind two-way. As you know a little about vue and angular, both frameworks support bidirectional binding, while react is one-way binding. There is an article about one-way binding and bidirectional binding that can be expanded: What are the advantages and disadvantages of unidirectional data binding and bidirectional data binding?

Here's how to implement it

In our app.js file, we have installed react-related dependencies and babel compiler tools when we built the environment before, so we can use ES6 and JSX grammar directly here.

1. Introducing react core content

import React from 'react'
import ReactDOM from 'react-dom'

Among them, react.js is the core library of React, and react-dom.js provides DOM-related functions.

2. Generating Components

Firstly, three important knowledge points of react are introduced.
1)ReactDOM.render()
ReactDOM.render is the most basic method of React for converting templates into HTML language and inserting specified DOM nodes. For instance:

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

The above code inserts an h1 title into the example node.
2) JSX grammar
The HTML language is written directly in the JavaScript language without any quotation marks. JSX grammar It allows mixed writing between HTML and JavaScript. The above < H1 > Hello, world! </h1 > uses jsx grammar.
3) components
React allows you to encapsulate your code as a component and then insert that component into a Web page as if it were an ordinary HTML tag. The React.createClass method is used to generate a component class. One is:

#es5 writing
 var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello React</h1>;
  }
});
#es6 writing
Class HelloMessage extends React.Component {
  render() {
    return <h1>Hello, React</hr>;
  }
}

Of course, HelloMessage here can also be rendered as HTML tags using ReactDOM.render().

app.js:

class App extends React.Component { //Define components, inherit parent classes
  constructor() {//constructor is a special method used with class to create and initialize objects.
    super()//Call the constructor for the React component before mounting. When implementing the constructor of the React.Component subclass, you should call super(props) before any other statement.
    this.state = {//Setting the initial state
      todos: []
    }
  }
  // Bind keyboard return events to add new tasks
  handlerKeyUp(e) {
    if(e.keyCode == 13) {
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = '';
      this.state.todos.push(newTodoItem)
      this.setState({todos: this.state.todos});  //Modify the state value, and after each modification, automatically call this.render method to render the component again.
    }
  }
  render(){
    return (
      <div className="todo-input">
        <input type="text" placeholder="Please enter to-do items" onKeyUp={this.handlerKeyUp.bind(this)}/>
        <ul>
          {this.state.todos.map((todo,index) => {{
            return (
                <li key={index}>{todo.text}</li>//Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
            )
          }})}
        </ul>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('app'))

3. test

Function

$ webpack

Then open index.html, and if you can input in put, press Enter to generate a list below.

So congratulations, the first step has been successfully completed!
React+webpack develops a todoMvc from 0 to 1 (1) 
React+webpack develops a todoMvc from 0 to 1 (3) Unfinished
React+webpack develops a todoMvc from 0 to 1 (4) Unfinished
React+webpack develops a todoMvc from 0 to 1 (5) Unfinished