React 是一个用于构建用户界面的 JavaScript 库，次要特点有：
- 申明式渲染：设计好数据和视图的关系，数据变动 React 主动渲染，不用亲自操作DOM
- 组件化：页面切分成多个小部件，通过组装拼成整体页面，利于代码复用
本文通过写个简略的 TodoList 实例，不求甚解，相熟下 React 的开发过程。
- 装置 Node.js
Node.js 是一个运行环境，相似 jdk，用以反对在服务端运行 JavaScript。
您能够在这里下载安装包：
http://nodejs.cn/download/ 以绿色版装置为例，将 node-v10.16.1-win-x64.zip 解压到 E:software 并命名为 node-v10.16.1
在 Path 环境变量中减少两项：
E:softwarenode-v10.16.1E:softwarenode-v10.16.1node_global 在 cmd 中应用 node -v 显示版本号，示意装置胜利。
Node.js 中有个 npm 软件包管理器，能够很不便的治理下载和应用第三方开源包，相似 maven，应用 npm -v 显示版本号，示意 npm 也没有问题。
绿色版装置实现后一些必要的配置：
npm config set prefix "E:softwarenode-v10.16.1node_global" 设置全局装置的模块存储门路
npm config set cache "E:softwarenode-v10.16.1node_cache" 设置下载缓存的存储门路
npm config set registry https://registry.npm.taobao.org` 设置 npm 下载源为淘宝镜像
简略应用:
- npm install xxx: 装置到我的项目目录
- npm install -g xxx 装置到全局目录
- npm install -save xxx: 装置到我的项目目录，并在 package.json 中的 dependencies 节点记录依赖
- npm install --save-dev xxx: 装置到我的项目目录，并在 package.json 中的 devDependencies 节点记录依赖
- 脚手架创立我的项目
React 官网出的脚手架工具 create-react-app ，能够一键创立一个 Web 应用程序：
cmd> npm install -g create-react-appcmd> cd E:cmd> create-react-app react-todoappcmd> cd react-todoapp 脚手架会在当前目录创立一个 react-todoapp 目录：
react-todoapp├── README.md├── node_modules├── package.json├── package-lock.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ └── manifest.json└── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── setupTests.js 目录中次要的文件和文件夹阐明：
- README.md: 我的项目简介，反对 Markdown 语法
- node_modules: 我的项目的依赖包，相似
Maven Repository - package.json: 配置我的项目依赖的第三方包，相似
pom.xml - package-lock.json: 锁定第三方包的版本号，保障
npm install版本统一 - public: 公开资源，网站门路，相似 nginx 的 html 目录
- src: 外围组件代码文件
为了便于开发，删除目录中不必要的文件，最终构造如下：
react-todoapp├── README.md├── node_modules├── package.json├── package-lock.json├── .gitignore├── public│ └── index.html└── src ├── App.css ├── index.js ├── TodoApp.js ├── TodoItem.js └── TodoList.js 接下来，设计与实现一个 TodoList 的例子，咱们把所有代码过一下，敲一遍，先不论为什么，跑起来，最初再整顿下知识点。
- 实例 TodoApp
次要实现性能有：
- 增加一个待办事项
- 删除一个待办事项
- 勾选复选框标记事项已实现
如图所示，总共将页面拆分成了三个组件：TodoApp, TodoList 和 TodoItem。
3.1 index.js 入口文件
应该能够类比 java 的 main 办法，在 src 目录新建 index.js 内容如下：
// 引入 React, ReactDOMimport React from 'react';import ReactDOM from 'react-dom';// 引入 TodoApp 组件import TodoApp from './TodoApp';// 将渲染后果挂在到 root 节点，该节点在 index.html 中ReactDOM.render( <React.StrictMode> <TodoApp /> </React.StrictMode>, document.getElementById('root')); 先导入须要应用的组件（类），而后调用它们提供的办法和服务，有没有些许眼生？
3.2 TodoApp.js
TodoApp 设计了页面整体布局，它蕴含全副数据以及操作这些数据的办法，是其余两个组件的父组件：
import React, { Component } from 'react';import TodoList from './TodoList';import './app.css';class TodoApp extends Component { constructor(props) { // 构造方法，props 应该是父类的一个成员变量 super(props); this.state = { // 组件状态数据 text: '', items:[{id: 1, status: 1, text: "去月球"},{id: 2, status: 0, text: "去火星"}] }; // 设置 this 指向，默认 undefined this.handleChange = this.handleChange.bind(this); this.handleAdd = this.handleAdd.bind(this); this.handleComplete = this.handleComplete.bind(this); this.handleDelete = this.handleDelete.bind(this); } // 渲染解析 jsx render() { return ( <div className="todo"> <h3 className="text-center">Todos App</h3> <TodoList items={this.state.items} handleComplete={this.handleComplete} handleDelete={this.handleDelete} /> <input className="input" type="text" placeholder="增加新工作" value={this.state.text} onChange={this.handleChange} /> <button className="btn-add" onClick={this.handleAdd}>增加</button> </div> ); } handleChange(e) { this.setState({ text: e.target.value }) } handleAdd(e) { e.preventDefault(); if (this.state.text.length === 0) { return; } const newItem = { id: Date.now(), text: this.state.text, status: 0 }; this.setState({ items: [...this.state.items, newItem], text: '' }); } handleComplete(taskid) { // 长期变量，不间接批改原数据 let items = this.state.items; let findItem = items.find(item => item.id === taskid); findItem.status = findItem.status === 0 ? 1 : 0; this.setState({ items: items }); } handleDelete(taskid) { let items = this.state.items; items = items.filter(item => item.id !== taskid); this.setState({ items: items }); }}