This article mainly to React to achieve a complete TodoList function, as a React entry case.

Design idea

React is a JavaScript library for building user interfaces and one of the most popular Web interface development tools available today. Mainly because of its clever design idea:

First, React makes it easy to create interactive UIs. Not only can it design a neat view of every state of the application. Also, React efficiently updates and renders the appropriate components when data changes.

Secondly, React gives full play to the idea of componentization. In the React app, everything is a component, and each component is like a machine part. The developers put each component together to make the React app work.

Finally, React has cross-platform capabilities. React Supports Node for server rendering. React Native can also be used for Native mobile application development. With the rise of cross-platform build tools such as Taro, developers can write React code for multiple platforms.

Development environment construction

The Create React App is a comfortable environment for learning React and the best way to Create new [one-page] apps with React. [Node >= 8.10 and NPM >= 5.6] must be installed. To create a project, do:

npx create-react-app my-app
cd my-app
npm start
Copy the code

NPX isn’t a misspelling — it’s a package runtime tool that comes with NPM 5.2+.

Write the TodoList function

Implementation ideas:

  1. Write the overall layout;
  2. All task items are in a list. You can define a component and pass data through the props value.
  3. Head to the input box and click Add. It can be used as a master container as a parent component.

The construct code for an undefined child component

class TodoData extends Component { constructor(props) { super(props); This. state = {list: [' eat ',' work '],}; this.handleClick = this.handleClick.bind(this); } render() {return (<Fragment> <div className="input-box"> <input placeholder=" task "/> <button className="btn-add" onClick={this.handleclick}> </button> </div> <ul className="list-box "> { this.state.list.map((item) => { return <li>{item}</li> }) } </ul> </Fragment> ); } } export default TodoData;Copy the code

The above is the initial page construction model, due to the relationship of time, tomorrow to continue to update the specific implementation method and form the componentization way. Please stay tuned!