【小白入门】React实现TodoList简易教程（上） | 8月更文挑战

本篇文章主要以React实现一个完整的TodoList功能，作为React的入门案例。

设计思想

React 是一种用于构建用户界面的 JavaScript 库，也是目前最受欢迎的 Web 界面开发工具之一。主要是得益于它精妙的设计思想：

首先，React 让创建交互式 UI 变得轻而易举。  它不仅可以为应用的每一个状态设计出简洁的视图。而且，当数据变动时，React 还能高效更新并渲染合适的组件。

其次，React 把组件化的思想发挥得淋漓尽致。  在 React 应用中，一切皆组件，每个组件像机器零件一样，开发者把每一个组件组合在一起，将 React 应用运转起来。

最后，React 还具有跨平台能力。  React 支持 Node 进行服务器渲染，还可以用 React Native 进行原生移动应用的开发，随着跨平台构建工具的兴起，比如 Taro，开发者可以写一套 React 代码，适用于多个平台。

开发环境搭建

Create React App是一个用于学习 React 的舒适环境，也是用 React 创建新的[单页]应用的最佳方式。前提是需要安装 [Node >= 8.10 和 npm >= 5.6]。要创建项目，请执行：

npx create-react-app my-app
cd my-app
npm start

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

编写TodoList功能

实现思路：

1. 编写整体布局；
2. 所有任务项都是在一个列表之中，可以定义一个组件，通过props的传值实现数据传递；
3. 头部的输入框和点击新增。可以当做主容器，作为父组件使用。

未定义子组件时的构造代码

class TodoData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['吃饭','上班'],
    };
    this.handleClick = this.handleClick.bind(this);
    
  }
  handleClick() {
      // 点击新增执行
  }
  render() {
    return (
      <Fragment>
        <div className="input-box">
          <input placeholder="任务" />
          <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;

以上是页面初始时的构造模型，由于时间关系，明天继续更新具体实现方法以及形成组件化的方式。请大家持续关注！