一杯茶的时间，上手 React 框架开发
React（也被称为 React.js 或者 ReactJS）是一个用于构建用户界面的 JavaScript 库。起源于 Facebook 内部项目，最初用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 性能较高，并且它的声明式、组件化特性让编写代码变得简单，随着 React 社区的发展，越来越多的人投入 React 的学习和开发，使得 React 不仅可以用来开发 Web 应用，还能开发桌面端应用，TV应用，VR应用，IoT应用等，因此 React 还具有一次学习，随处编写的特性。本教程将带你快速入门 React 开发，通过 20-30 分钟的学习，你不仅可以了解 React 的基础概念，而且能开发出一个待办事项小应用，还在想什么了？马上学起来吧！本文所有代码已放在 GitHub 仓库中。
此教程属于 React 前端工程师学习路线的一部分，点击可查看全部内容。
Hello, World
我们将构建什么？
在这篇教程中，我们将展示给你如何使用 React 构建一个待办事项应用，下面最终项目的展示成果：
你也可以在这里看到我们最后构建的结果：最终结果。如果你现在对代码还不是很理解，或者你还不熟悉代码语法，别担心！这篇教程的目标就是帮助你理解 React 和它的语法。
我们推荐你在继续阅读这篇教程之前先熟悉一下这个待办事项，你甚至可以尝试添加几个待办事项！你可能注意到当你添加了2个待办事项之后，会出现不同的颜色；这就是 React 中条件渲染的魅力。
当你熟悉了这个待办事项之后你就可以关闭它了。在这篇教程的学习中，我们将从一个 Hello World 代码模板开始，然后带领你初始化开发环境，这样你就可以开始构建这个待办事项了。
你将学到什么？
你将学习所有 React 的基础概念，其中又分为三个部分：
编写组件相关：包括 JSX 语法、Component、Props
组件的交互：包括 State 和生命周期
组件的渲染：包括列表和 Key、条件渲染
和 DOM & HTML 相关：包括事件处理、表单。
前提条件
我们假设你熟系 HTML 和 JavaScript，但即使你是从其他编程语言转过来的，你也能看懂这篇教程。我们还假设你对一些编程语言的概念比较熟悉，比如函数、对象、数组，如果对类了解就更好了。
如果你需要复习 JavaScript，我们推荐你阅读这篇指南。你可能注意到了我们使用了一些 ES6 的特性 -- 一个最近的 JavaScript 版本。在这篇教程，我们会使用 arrow functions，classes，和 const。你可以使用 Babel REPL 来检查 ES6 代码编译之后的结果。
环境准备
首先准备 Node 开发环境，访问 Node 官方网站下载并安装。打开终端输入如下命令检测 Node 是否安装成功：
node -v # v10.16.0
npm -v # 6.9.0
注意
Windows 用户需要打开 cmd 工具，Mac 和 Linux 是终端。
如果上面的命令有输出且无报错，那么代表 Node 环境安装成功。接下来我们将使用 React 脚手架 -- Create React App（简称 CRA）来初始化项目，同时这也是官方推荐初始化 React 项目的最佳方式。
在终端中输入如下命令：
npx create-react-app my-todolist
等待命令运行完成，接着输入如下命令开启项目：
cd my-todolist && npm start
CRA 会自动开启项目并打开浏览器，你应该可以看到下面的结果：
??? 恭喜你！成功创建了第一个 React 应用！
现在 CRA 初始化的项目里有很多无关的内容，为了开始接下来的学习，我们还需要做一点清理工作。首先在终端中按 ctrl + c 关闭刚刚运行的开发环境，然后在终端中依次输入如下的命令：
# 进入 src 目录
cd src
# 如果你在使用 Mac 或者 Linux：
rm -f *
# 或者，你在使用 Windows：
del *
# 然后，创建我们将学习用的 JS 文件
# 如果你在使用 Mac 或者 Linux：
touch index.js
# 或者，你在使用 Windows
type nul > index.js
# 最后，切回到项目目录文件夹下
cd ..
此时如果在终端项目目录下运行 npm start 会报错，因为我们的 index.js 还没有内容，我们在终端中使用 ctrl +c 关闭开发服务器，然后使用编辑器打开项目，在刚刚创建的 index.js 文件中加入如下代码：
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return Hello, World
return (
)
}
JSX 中添加节点属性
我们可以像在 HTML 中一样，给元素标签加上属性，只不过我们需要遵守驼峰式命名法则，比如在 HTML 上的属性 data-index 在 JSX 节点上要写成 dataIndex。
const element = Hello, 图雀 ;
}
关于 props 我们将在下一节中讲解。
类组件
通过继承自 React.Component 的类来代表一个组件。
class Todo extends React.Component {
render() {
return Hello, 图雀 ;
}
}
我们发现，在类组件中，我们需要在 render 方法里面返回需要渲染的 JSX。
组件组合
我们可以组合不同的组件来完成复杂的业务逻辑：
class App extends React.Component {
render() {
return (
Hello, 图雀 ;
}
}
class App extends React.Component {
render() {
const todoList = ["图雀", "图雀写作工具", "图雀社区", "图雀文档"];
return (
Hello, 图雀 ，所以最终浏览器中会渲染四个 "Hello, 图雀"。并且因为 Todo 组件不需要包含子组件，所以我们写成了 Hello, {props.content}
)
}
Hello, {this.props.content} ;
}
}
Hello, {this.props.content} ;
}
}
class App extends React.Component {
render() {
const todoList = ["图雀", "图雀写作工具", "图雀社区", "图雀文档"];
return (
Hello, {this.props.content} ;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todoList: []
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({
todoList: todoList
});
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return (
Hello, {this.props.content} ;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todoList: []
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({
todoList: todoList
});
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return (
你好, {this.props.content} ;
} else {
return Hello, {this.props.content} ;
}
}
在上面的代码中，我们判断 this.props.content 的内容，当内容为 "图雀" 时，我们渲染 "你好, 图雀"，对于其他内容我们依然渲染 "Hello, 图雀"。
三元表达式条件渲染
我们还可以直接在 JSX 中使用三元表达式进行条件渲染：
render() {
return this.props.content === "图雀"? (
你好, {this.props.content}
) : (
Hello, {this.props.content}
);
}
当然三元表达式还可以用来条件渲染不同的 React 元素属性：
render() {
return (
Hello, {this.props.content}
)
}
上面我们判断组件的 this.state.isClicked 属性，如果 this.state.isClicked 属性为 true，那么我们最终渲染 "clicked" 类：
render() {
return (
Hello, {this.props.content}
)
}
如果 this.state.isClicked 为 false，那么最终渲染 notclicked 类：
render() {
return (
Hello, {this.props.content}
)
}
实战
我们运用本节学到的知识继续完成我们的待办事项应用。
打开 src/index.js ，对 Todo 和 App 组件作出如下修改：
class Todo extends React.Component {
render() {
if (this.props.index % 2 === 0) {
return Hello, {this.props.content} ;
}
return Hello, {this.props.content} ;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todoList: []
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({
todoList: todoList
});
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return (
Hello, 图雀
注意
这里有一点需要做一下改变，就是像 background-color 这样的属性，要写成驼峰式 backgroundColor。对应的比如 font-size，也要写成 fontSize。
保存代码，你应该可以在浏览器中看到如下内容：
我们看到浏览器中的效果确实是在偶数项（数组中 0 和 2 项）变成了红色的字体，而（数组中 1 和 3 项）还是之前的黑色样式。
事件处理
在 React 元素中处理事件和在 HTML 中类似，就是写法有点不一样。
JSX 中的事件处理
这里的不一样主要包含以下两点：
React 中的事件要使用驼峰式命名：onClick，而不是全小写：onclick。
在 JSX 中，你传递的是一个事件处理函数，而不是一个字符串。
在 HTML 中，我们处理事件是这样的：
在 React 中，我们需要写成下面这样：
function Button() {
function handleClick() {
console.log('按钮被点击了');
}
return (
)
}
注意到我们在上面定义了一个函数式组件，然后返回一个按钮，并在按钮上面定义了点击事件和对应的处理方法。
注意
这里我们的的点击事件使用了驼峰式的 onClick 来命名，并且在 JSX 中传给事件的属性是一个函数：handleClick ，而不是之前 HTML 中单纯的一个字符串："handleClick()"。
合成事件
我们在以前编写 HTML 的事件处理时，特别是在处理表单时，常常需要禁用浏览器的默认属性。
提示
比如一般表单提交时都会刷新浏览器，但是我们有时候希望提交表单之后不刷新浏览器，所以我们需要禁用浏览器的默认属性。
在 HTML 中我们禁用事件的默认属性是通过调用定义在事件上的 preventDefault 或者设置事件的 cancelBubble：
// 当点击某个链接之后，禁止打开页面
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
在 JSX 中，事件处理和这个类似：
function Link() {
function handleClick(event) {
event.preventDefault();
console.log('链接被点击了，但是它不会跳转页面，因为默认行为被禁用了');
}
return (
点我
)
}
实战
我们运用这一节中学到的知识来继续完成我们的待办事项应用。
我们之前的待办事项的 todoList 数组都是直接硬编码在代码里，不可以进行增删改，这相当死板，一个更真实的 todoList 应该要具备增加功能，这一功能实现需要两个步骤：
允许用户输入新的待办事项。
将这个输入的待办事项加入到现有的 todoList 列表里面。
在这一小节中，我们将来实现第一个步骤的内容。
打开 src/index.js ，对 App 组件内容作出如下修改：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
nowTodo: "",
todoList: []
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({
todoList: todoList
});
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
handleChange(e) {
this.setState({
nowTodo: e.target.value
});
}
render() {
return (
);
}
}
可以看到，我们新加入的代码主要有四个部分:
首先在 state 里面添加了一个新的属性 nowTodo，我们将用它来保存用户新输入的待办事项。
然后我们在 render 方法里面，在返回的 JSX 中使用 div 将内容包裹起来，接着加入了一个 div，在里面加入了一个 input 和 一个 div，input 用于处理用户的输入，我们在上面定义了 onChange 事件，事件处理函数是一个箭头函数，它接收事件 e，然后用户输入时，会在函数里面调用 this.handleChange 方法，将事件 e 传给这个方法。
在 handleChange 里面通过 this.setState 使用 input 的值来更新 nowTodo 的内容。
最后在 div 里面使用 {} 插值语法展示 nowTodo 的内容。
保存代码，打开浏览器，你应该可以看到如下的内容：
当你尝试在输入框中键入内容时，输入框的下面应会显示相同的内容：
这是因为当我们在输入框里面输入内容时，我们使用了输入框的值更新 this.state.nowTodo，然后在输入框之下展示 this.state.nowTodo 的值。
表单
接下来我们来完成增加新的待办事项的功能的第二个步骤：允许用户将新输入的待办事项加入到 todoList 列表中。
打开 src/index.js 文件，对 App 组件做出如下修改：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
nowTodo: "",
todoList: []
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({
todoList: todoList
});
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
handleChange(e) {
this.setState({
nowTodo: e.target.value
});
}
handleSubmit(e) {
e.preventDefault(e);
const newTodoList = this.state.todoList.concat(this.state.nowTodo);
this.setState({
todoList: newTodoList,
nowTodo: ""
});
}
render() {
return (
);
}
}
上面的变化主要有三个部分：
首先我们将 render 方法中返回的 JSX 的最外层的 div 替换成了 form，然后在上面定义了 onSubmit 提交事件，并且通过一个箭头函数接收事件 e 来进行事件处理，在 form 被提交时，在箭头函数里面会调用 handleSubmit 方法， 并将 e 传递给这个函数。
在 handleSubmit 方法里面，我们首先调用了 e.preventDefault() 方法，来禁止浏览器的默认事件处理，这样我们在提交表单之后，浏览器就不会刷新，之后是将现有的 this.sate.todoList 列表加上新输入的 nowTodo，最后是使用 this.setState 更新 todoList 和 nowTodo；这样我们就可以通过输入内容添加新的待办事项了。
接着我们将之前的展示 this.state.nowTodo 的 div 替换成 提交按钮 button，并将 button 的 type 设置为 submit 属性，表示在点击这个 button 之后，会触发表单提交；将新输入的内容加入现有的待办事项中。
注意
我们在 handleSubmit 方法里面使用 this.setState 更新状态时，将 nowTodo 设置为了空字符串，代表我们在加入新的待办事项之后，将清除现有输入的 nowTodo 待办事项内容。
保存代码，打开浏览器，在输入框里面输入点东西，你应该可以看到下面的内容：
当你点击提交按钮之后，新的待办事项会加入到现有的 todoList 列表中，你应该可以看到下面的内容：
恭喜你！你成功使用 React 完成了一个简单的待办事项应用，它可以完成如下的功能：
异步获取将要展示的待办事项：todoList
将待办事项展示出来
偶数项待办事项将会展示成红色
可以添加新的待办事项
做得好！我们希望你现在已经对 React 的运行机制有了一个比较完整的了解，也希望本篇教程能够为你踏入 React 开发世界提供一个好的开始！感谢你的阅读！
后记
受限于篇幅，我们的待办事项还不完整，如果你有额外的时间或者你想要练习你新学到的 React 知识，下面是一些使我们的待办事项变得完整的一些想法，我们将按实现难度给这些功能排序：
在添加新的待办事项之后，清空输入框里面的内容，方便下一次输入。这样涉及到 React 受控组件的知识。
允许对单个事项进行删除。这涉及到子组件修改父组件的状态知识。
允许用户对单个事项进行修改。
允许用户对待办事项进行搜索。
想要学习更多精彩的实战技术教程？来图雀社区逛逛吧。
Hello, World
;
}
}
ReactDOM.render(Hello, World
;
}
这里的 Hello, World
是一段 JSX 代码，它最终会被 Babel 转译成下面这段 JS 代码:
React.createElement(
'div',
null,
'Hello, World'
)
React.createElement() 接收三个参数：
第一个参数代表 JSX 元素标签。
第二个参数代表这个 JSX 元素接收的属性，它是一个对象，这里因为我们的 div 没有接收任何属性，所以它是 null。
第三个参数代表 JSX 元素包裹的内容。
React.createElement() 会对参数做一些检查确保你写的代码不会产生 BUG，它最终会创建一个类似下面的对象：
{
type: 'div',
props: {
children: 'Hello, World'
}
};
这些对象被称之为 “React Element”。你可以认为它们描述了你想要在屏幕上看到的内容。React 将会接收这些对象，使用它们来构建 DOM，并且对它们进行更新。
注意
我们推荐你使用 “Babel” 查看 JSX 的编译结果。
App 组件最终返回这段 JSX 代码，所以我们使用 ReactDOM 的 render 方法渲染 App 组件，最终显示在屏幕上的就是 Hello, World" 内容。
JSX 作为变量使用
因为 JSX 最终会被编译成一个 JS 对象，所以我们可以把它当做一个 JS 对象使用，它享有和一个 JS 对象同等的地位，比如可以将其赋值给一个变量，我们修改上面代码中的 render 方法如下：
render() {
const element = Hello, World
;
return element;
}
保存代码，我们发现浏览器中渲染的内容和我们之前类似。
在 JSX 中使用变量
我们可以使用大括号 {} 在 JSX 中动态的插入变量值，比如我们修改 render 方法如下：
render() {
const content = "World";
const element = Hello, {content}
;
return element;
}
保存代码，发现浏览器中效果依然不变。
JSX 中使用 JSX
我们可以在 JSX 中再包含 JSX，这样我们编写任意层次的 HTML 结构：
render() {
const element = -
{element}
Hello, World
;
注意
在 JSX 中所有的属性都要更换成驼峰式命名，比如 onclick 要改成 onClick，唯一比较特殊的就是 class，因为在 JS 中 class 是保留字，我们要把 class 改成 className 。
const element = Hello, World
;
实战
我们使用这一节讲解的 JSX 知识，来继续完成我们的待办事项应用。
在编辑器中打开 src/index.js ，对 App 组件做如下改变：
class App extends React.Component {
render() {
const todoList = ["图雀", "图雀写作工具", "图雀社区", "图雀文档"];
return (
- Hello, {todoList[0]}
- Hello, {todoList[1]}
- Hello, {todoList[2]}
- Hello, {todoList[3]}
-
{renderTodoList}
-
{todoList.map((todo) => (
-
{todoList.map((todo, index) => (
-
{this.state.todoList.map((todo, index) => (
-
{this.state.todoList.map((todo, index) => (
this.handleChange(e)} />
{this.state.nowTodo}
-
{this.state.todoList.map((todo, index) => (
-
{this.state.todoList.map((todo, index) => (
发表评论 (审核通过后显示评论)：