(转）react.js快速入门教程

React 入门实例教程

作者：阮一峰

日期： 2015年3月31日

现在最热门的前端框架，毫无疑问是 React 。

上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。

既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到，这一方面因为这项技术太新，刚刚开始走红，大家都没有经验，还在摸索之中；另一方面因为 React 本身还在不断变动，API 一直在调整，至今没发布1.0版。

我学习 React 时，就很苦恼。有的教程讨论一些细节问题，对入门没帮助；有的教程写得不错，但比较短，无助于看清全貌。我断断续续学了几个月，看过二十几篇教程，在这个过程中，将对自己有帮助的 Demo 都收集下来，做成了一个库 React Demos 。

下面，我就根据这个库，写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍，就能初步掌握 React 。当然，前提是你必须拥有基本 JavaScript 和 DOM 知识，但是你读完就会发现，React 所要求的预备知识真的很少。

零、安装

React 的安装包，可以到官网下载。不过，React Demos 已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。


$ git clone git@github.com:ruanyf/react-demos.git

如果你没安装 git，那就直接下载 zip 压缩包。

下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。

需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。Demo13 是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。

一、HTML 模板

使用 React 的网页源码，结构大致如下。


<!DOCTYPE html>
<html><head><script src="../build/react.js"></script><script src="../build/react-dom.js"></script><script src="../build/browser.min.js"></script></head><body><div id="example"></div><script type="text/babel">// ** Our code goes here! **</script></body>
</html>

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。


$ babel src --out-dir build

上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。


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

上面代码将一个 h1 标题，插入 example 节点（查看 demo01），运行结果如下。

三、JSX 语法

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看 Demo02 ）。


var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function (name) {return <div>Hello, {name}!</div>})}</div>,document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看 demo03 ）。


var arr = [<h1>Hello world!</h1>,<h2>React is awesome</h2>,
];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。

四、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看 demo04）。


var HelloMessage = React.createClass({render: function() {return <h1>Hello {this.props.name}</h1>;}
});ReactDOM.render(<HelloMessage name="John" />,document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。


var HelloMessage = React.createClass({render: function() {return <h1>Hello {this.props.name}</h1><p>some text</p>;}
});

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

五、this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。


var NotesList = React.createClass({render: function() {return (<ol>{React.Children.map(this.props.children, function (child) {return <li>{child}</li>;})}</ol>);}
});ReactDOM.render(<NotesList><span>hello</span><span>world</span></NotesList>,document.body
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。

六、PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 demo06）。


var MyTitle = React.createClass({propTypes: {title: React.PropTypes.string.isRequired,},render: function() {return <h1> {this.props.title} </h1>;}
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。


var data = 123;ReactDOM.render(<MyTitle title={data} />,document.body
);

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。


Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多的PropTypes设置，可以查看官方文档。

此外，getDefaultProps 方法可以用来设置组件属性的默认值。


var MyTitle = React.createClass({getDefaultProps : function () {return {title : 'Hello World'};},render: function() {return <h1> {this.props.title} </h1>;}
});ReactDOM.render(<MyTitle />,document.body
);

上面代码会输出"Hello World"。

七、获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性（查看 demo07 ）。


var MyComponent = React.createClass({handleClick: function() {this.refs.myTextInput.focus();},render: function() {return (<div><input type="text" ref="myTextInput" /><input type="button" value="Focus the text input" onClick={this.handleClick} /></div>);}
});ReactDOM.render(<MyComponent />,document.getElementById('example')
);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

八、this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看 demo08 ）。


var LikeButton = React.createClass({getInitialState: function() {return {liked: false};},handleClick: function(event) {this.setState({liked: !this.state.liked});},render: function() {var text = this.state.liked ? 'like' : 'haven\'t liked';return (<p onClick={this.handleClick}>You {text} this. Click to toggle.</p>);}
});ReactDOM.render(<LikeButton />,document.getElementById('example')
);

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

九、表单

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看 demo9 ）。


var Input = React.createClass({getInitialState: function() {return {value: 'Hello!'};},handleChange: function(event) {this.setState({value: event.target.value});},render: function () {var value = this.state.value;return (<div><input type="text" value={value} onChange={this.handleChange} /><p>{value}</p></div>);}
});ReactDOM.render(<Input/>, document.body);

上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

十、组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

这些方法的详细说明，可以参考官方文档。下面是一个例子（查看 demo10 ）。


var Hello = React.createClass({getInitialState: function () {return {opacity: 1.0};},componentDidMount: function () {this.timer = setInterval(function () {var opacity = this.state.opacity;opacity -= .05;if (opacity < 0.1) {opacity = 1.0;}this.setState({opacity: opacity});}.bind(this), 100);},render: function () {return (<div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>);}
});ReactDOM.render(<Hello name="world"/>,document.body
);

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

另外，组件的style属性的设置方式也值得注意，不能写成


style="opacity:{this.state.opacity};"

而要写成


style={{opacity: this.state.opacity}}

这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

十一、Ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI （查看 demo11 ）。


var UserGist = React.createClass({getInitialState: function() {return {username: '',lastGistUrl: ''};},componentDidMount: function() {$.get(this.props.source, function(result) {var lastGist = result[0];if (this.isMounted()) {this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}}.bind(this));},render: function() {return (<div>{this.state.username}'s last gist is<a href={this.state.lastGistUrl}>here</a>.</div>);}
});ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists" />,document.body
);

上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。

我们甚至可以把一个Promise对象传入组件，请看Demo12。


ReactDOM.render(<RepoListpromise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,document.body
);

上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。

如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。


var RepoList = React.createClass({getInitialState: function() {return { loading: true, error: null, data: null};},componentDidMount() {this.props.promise.then(value => this.setState({loading: false, data: value}),error => this.setState({loading: false, error: error}));},render: function() {if (this.state.loading) {return <span>Loading...</span>;}else if (this.state.error !== null) {return <span>Error: {this.state.error.message}</span>;}else {var repos = this.state.data.items;var repoList = repos.map(function (repo) {return (<li><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>);});return (<main><h1>Most Popular JavaScript Projects in Github</h1><ol>{repoList}</ol></main>);}}
});

十二、参考链接

React's official site
React's official examples
React (Virtual) DOM Terminology, by Sebastian Markbåge
The React Quick Start Guide, by Jack Callister
Learning React.js: Getting Started and Concepts, by Ken Wheeler
Getting started with React, by Ryan Clark
React JS Tutorial and Guide to the Gotchas, by Justin Deal
React Primer, by Binary Muse
jQuery versus React.js thinking, by zigomir

（完）

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

[Spring Boot] Spring Boot 整合 LDAP 开发教程
Spring Boot 整合 LDAP 开发教程目录Spring Boot 整合 LDAP 开发教程简介LDAP 名词解释配置依赖连接查询总结REFRENCES微信公众号简介 LDAP（轻量级目录访问协议，Lightweight Directory Access Protocol)是实现提供被称为目录服务的信息服务。目录服务是一种特殊的数据库系统…...
2024/4/17 3:02:06
Linux_LVM&Quota
目录目录磁盘分区RHEL6 磁盘管理指令mount fdisk lvm LVM图形化 quota quota指令磁盘分区RHEL6磁盘管理指令cfdisk -l 查询分区状况 df -Th 显示简易分区信息表 blkid 显示分区UUID 和分区类型mountmount 挂载指令，将磁盘分区挂载到目录上，通过访问目录进入到磁盘分区中…...
2024/4/17 9:46:58
开源ERP OpenERP7开发教程相关资料
OpenERP 7.0版本发布: http://shine-it.net/index.php/topic,5807.msg14435.html#msg14435 对不起SAP，我要终结你！--OpenERP 7.0发布之前: http://www.openerpchina.org/forum.php?mod=viewthread&tid=300 OpenERP进入中国大学课堂: http://shine-it.net/index.php/top…...
2024/4/28 4:36:15
reactjs 视频教程
最近玩了一下react，感觉挺不错的，搜了一下没有看到什么视频教程，于是自己便录制了几个入门视频，希望可以帮到大家，已经上传土豆了，可以点击下面的链接查看。http://www.tudou.com/listplay/p11F8hRUnjI/vhak2xWae2I.html...
2024/4/28 1:38:02
LDAP概念性小结
一. LDAP介绍 1. LDAP能做什么大多数的LDAP服务器都为读密集型的操作进行专门的优化。因此，当从LDAP服务器中读取数据的时候会比从专门为OLTP优化的关系型数据库中读取数据快一个数量级。也是因为专门为读的性能进行优化，大多数的LDAP目录服务器并不适合存储需要需要经常改变…...
2024/4/27 23:26:16
Linux_LVM/Quota
目录目录 Disk Quota How to enable the disk quota Partition Disk Create LVM LVM Extend LVM ReduceDisk QuotaCharacteristic： 1. For specialty user 2. Limit user and baseGroup 3. Limit of DiskSize(Volume), limit of fileCount.How to enable the disk quotaste…...
2024/4/28 1:10:02
transformer模型
转自：https://www.bilibili.com/video/BV1Mt411J734 https://github.com/aespresso/a_journey_into_math_of_ml说到自然语言处理, 语言模型, 命名实体识别, 机器翻译, 可能很多人想到的LSTM等循环神经网络, 但目前其实LSTM起码在自然语言处理领域已经过时了, 在Stanford阅读理…...
2024/3/31 21:28:42
开源ERP OpenERP7 开发教程相关资料
OpenERP 7.0版本发布: http://shine-it.net/index.php/topic,5807.msg14435.html#msg14435对不起SAP，我要终结你！--OpenERP 7.0发布之前: http://www.openerpchina.org/forum.php?mod=viewthread&tid=300OpenERP进入中国大学课堂: http://shine-it.net/index.php/topic…...
2024/4/28 3:14:20
Android 控件模糊案例
blurkit-android项目地址：wonderkiln/blurkit-android简介：The missing Android blurring library. Fast blur-behind layout that parallels iOS.BlurKit is an extraordinarily easy to use utility to get live blurring just like on iOS. Built by Dylan McIntyre.BlurK…...
2024/4/17 3:02:42
reactjs视频教程
reactjs视频教程需要的可以关注微信公众号搜索：cityapes或者搜索:城市一猿点击菜单的vue.js就可以下载了...
2024/4/28 5:02:12
Linux下提示命令找不到：bash:command not found
Linux下输入某些命令时会提示：bash:command not found。情况一：首先，查看$PATH中是否包含了这些命令。$PATH：决定了shell到哪些目录中去寻找命令或程序，PATH值是一系列的目录。当运行程序时，linux到这些目录下搜索进行编译链接。格式：PATH = $PATH:<PATH1>:<PA…...
2024/4/19 8:27:35
装配式工程师：目前火热的“装配式建筑”你了解多少？
装配式建筑一般指在工厂中预制的模块构件在施工现场以组装化技术组装而成的各种建筑。一般以房间作为模块单元，在工厂中进行预制生产，并可在工厂对模块内部空间进行布置与装修，完成后运输至现场通过可靠的连接方式组装成建筑整体。运用这样的建造方式，能使得一些原本需要大…...
2024/3/28 20:34:02
ReactJs学习之生命周期及事件
玩了几个月的mui和h builder开发，整体上感觉在开发效率上提高了些，但是在体验上确实不敢恭维，对于一个做原生开发的程序猿来说，指望设备在webview方面有质的提升来提高app的用户体验太被动了。当然，h5+原生才是app的生存之道–也就是大前端嘛。项目前端框架主要用的是mui+…...
2024/4/27 22:25:10
开源ERP — Compiere（全球开源排名第一）
2019独角兽企业重金招聘Python工程师标准>>> 开源ERP — Compiere（全球开源排名第一）开源ERP — Zoapiere（基于Compiere）如果您的企业希望选择开源的ERP，建议选择Compiere吧！ Compiere ERP & CRM 为全球范围内的中小型企业提供综合型解决方案，覆盖从客…...
2024/4/19 10:07:53
Centos之常见目录作用介绍
我们先切换到系统根目录 / 看看根目录下有哪些目录 [root@localhost ~]# cd / [root@localhost /]# ls bin dev home lib64 mnt proc run srv tmp var boot etc lib media opt root sbin sys usr [root@localhost /]# 这里首先看下根目录/ 下的 bin 和 sb…...
2024/4/17 3:01:42
一看就懂的ReactJs入门教程
一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众…...
2024/4/17 3:03:00
抱怨不能解决问题，却会给你带来问题
来公司四年了，每年的工作总结就是写几页word，然后通过邮件发给上级领导。今年受疫情影响，好多同事不用出差，所以就在公司召开一次总结大会。会议要求每人将这两年的工作都做一个总结，新人做一下自我介绍就OK。在准备汇报材料期间，我就想最近两年的工作，其实都是大块的内…...
2024/4/17 3:02:54
Java开源 ERP与客户管理－Sequoia ERP
<script type="text/javascript">google_ad_client = "pub-8800625213955058";/* 336x280, 创建于 07-11-21 */google_ad_slot = "0989131976";google_ad_width = 336;google_ad_height = 280;//</script><script type="tex…...
2024/4/20 15:28:01
LDAP 应用文档
LDAP 应用文档背景公司目前使用跳板机进行远程服务器登录，这就意味着需要登录的每台服务器都需要创建相应的用户才能保证用户登录正常，这就造成了用户管理混乱、管理起来麻烦等问题，所以进行上线 LDAP 进行用户统一管理。问题应用 LDAP 后还需要保留跳板机，以及海外服务…...
2024/4/21 12:30:40
Linux下磁盘分区、卸载和磁盘配额
目录一：查看磁盘信息二：Linux磁盘分区三：Linux分区的卸载四：Linux磁盘配额一：查看磁盘信息fdisk : 这个命令是磁盘分区表操作工具，fdisk能将磁盘分区，同时也能为每个分区指定分区类型，总的来说，fdisk就是磁盘工具fdisk -l : 查看硬盘分区表。从这里我们可以看出，此系…...
2024/3/31 21:28:38

(转）react.js快速入门教程 - 阮一峰