React开发入门
目录：
一、前言
二、什么是React
三、开发环境搭建
四、预备知识
五、最简单的React小程序
六、基础语法介绍
七、总结
八、参考资料
一、前言
近段时间看到学长公司招聘React Native工程师，当时比较好奇，就搜索了一下，然后刚好需要每个月买一本书看看，所以就买了一本《Reactive Native 开发指南》。
但是看到里面的预备知识的时候，发现首先最好需要先了解一下React（书中写道：我们假设你对React已经有了一些了解），心想是不是还要买一本React的书籍，后来想想干脆直接从网上搜搜教程吧，因此开始去探索，最终找到了三个链接的内容讲的React还不错，一个是阮一峰的博客，一个是官方文档，一个是React概览。阮一峰的博客和React概览都是中文的，而且写的比较容易理解，而官方文档是英文的，讲解的都比较详细。所以如果自己英文好的话可以直接看官方文档。
二、什么是React
React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面。
三、开发环境的搭建
做任何开发环境，我都会想着首先需要搭建一个环境来开发。就像如果开发iOS，你需要有苹果电脑，然后从AppStore下载Xcode，然后就可以熟悉一个Xcode，看看文档，就可以开始开发了；就像如果开发Android，你需要安装Android Studio，然后需要安装Java环境，然后就可以进行开发了。对于React，经过了解，我发现任何一个工具，比如Sublime Text，IntelliJ IDEA等等都可以，你甚至直接可以使用文本编辑器等等。这里面我使用的是IntelliJ IDEA。
1、安装一个IntellJ IDEA就可以进行开发了。
2、一个浏览器（这里面我使用的是Chrome）
3、下载相关库（下载链接）
四、预备知识
这个博客主要是介绍的React，我也假设一下：你需要对HTML，CSS，JavaScript有一定的了解，因为代码大部分都是用这些来进行开发的。
五、最简单的React小程序
我学任何语言的时候第一个程序都是一个Hello,World!。现在就让我们来利用React来写一个最简单的Hello,World!
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world!</title>
<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">
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
然后用浏览器打开就可以了（这里假设你已经会使用IntellJ IDEA，如果不会就先使用Sublime Text），然后在浏览器里面就可以看到你特别熟悉的Hello,World！了。
简单分析一下这个程序，首先，head里面引入了三个js文件。前两个是react的js文件，你可以在目录三里面的下载相关库里面拿。还有一个是browser.min.js，为什么要引入这个js可以参考这个提问，其实是为了将JSX语法转换成JavaScript语法。可以百度谷歌一下，下载该文件，也可以直接引用网上资源。然后就在html里面写了一个script代码块：
<script type="text/babel">
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
</script>
这里需要注意：首先，/h1>后面是此外，以前我们可能使用的是type是text/javascript，现在我们使用的text/babel。这是因为React独有的JSX语法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel”。
是不是已经开放蒙圈了，刚才提了好几个JSX，什么是JSX呢？React官方文档里面的解释是：XML语法内部包含JavaScript被叫做JSX。但是我理解的应该是我们直接在JS里面嵌入了HTML，这个就是React提出的叫做JSX的语法吧。这样做的好处就是一个组件的开发过程中，HTML是必不可少的一部分，能够将HTML封装起来才是组件的完全体。JSX语法的产生，让前端实现组件化成为了可能。
JSX的基本语法规则：遇到HTML标签(以<开头)，就用HTML规则解析；遇到代码块(以{开头)，就用JavaScript规则解析。
在ReactDOM.render里面写了两行，他们的作用就是将h1标题插入example节点。
你也可以直接新建一个js文件，然后将body里script里面的代码直接放到里面，我们可以命名为helloworld.js，然后在head里面导入即可。我比较倾向于这种做法，因为至少html文件不会看着太大，而且方便引入管理。如果其他html也需要改代码块，直接引入即可。
六、基础语法介绍
1、ReactDOM.render( )
ReactDOM.render是React最基本的语法，用于将模板转换成HTML语言，并插入指定的DOM节点。
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
运行结果如下：
2、map（遍历）
将数组中的元素遍历赋值
var animals = ['dog','cat','pig'];
ReactDOM.render(
<div>
{
animals.map(function(animal) {
return <h1>{animal}</h1>
})
}
</div>,
document.getElementById('example')
);
从这里开始都是讲React代码放到了.js文件里面，然后在html文件里面引入。引入的时候记得写type = ’text/babel’。这里会有一个小问题：打开浏览器的调试工具后，里面会看到Warning如下：
Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>
解决方法如下：
var animals = ['dog','cat','pig'];
ReactDOM.render(
<div>
{
animals.map(function(animal,key) {
return <h1 key = {key}>{animal}</h1>
})
}
</div>,
document.getElementById('example')
);
警告的意思是最好给循环产生的child添加一个key。这样就可以接触警告了。运行结果如下：
这里面你也许还会遇到另外一个问题，那就是用的Sublime Text，然后太浏览器打开的时候提示：
browser.min.js:3 XMLHttpRequest cannot load file:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.
其实是因为我们将js单独拉出来文件导致的，但是你会发现如果使用Safari浏览器是没有这个问题的。在这里找到了答案：
startup chrome with --disable-web-security
On Windows: chrome.exe --disable-web-security On Mac: open /Applications/Google\ Chrome.app/ --args --disable-web-security
因为Chrome浏览器不支持本地ajax访问。
你也可以构建本地服务器进行访问，比如我使用的intellJ IDEA ，直接就是在本地构建了一个本地服务，此时访问地址为：
http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html
而没有构建本地服务的时候访问地址为：
file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html
3、组件化
因为React使用的是JSX，所以它允许将代码封装成组件（component），然后像普通的HTML标签一样插入。
React.createClass方法就是用于生成一个组件类，比如：
var ZGButton = React.createClass({
render:function() {
return <button>ZG{this.props.name}</button>
}
});
ReactDOM.render(
<ZGButton name = 'Button1'/>,
document.getElementById('example')
);
运行结果如下：
上面的ZGButton就是一个组件类，模板插入<ZGButton />，会自动生成一个该组件的实例。
所有组件类都必须有自己的render方法，用于输出组件。
现在代码这样写：
var zGButton = React.createClass({
render:function() {
return <button>ZG{this.props.name}</button>
}
});
ReactDOM.render(
<zGButton name="Button2">Button</zGButton>,
document.getElementById('example')
);
也就是将组件类的第一个字符小写，然后在引用的时候发现现在是双标签了（代码自动填充的时候出现），而且name失效。因此我们在开发组件的时候一定要将第一个首字符大写，否则将不会达到你想要的效果。
4、this.props.children
this.props对象的属性和组件的属性一一对应，但是有个children除外，它表示的是组件的所有子节点：
var Students = React.createClass({
render:function() {
return (
<ol>
{
React.Children.map(this.props.children,function(child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<Students>
<span>zhangsan</span>
<span>lisi</span>
</Students>,
document.getElementById('example')
);
此时输出的结果为：
5、PropTypes
组件就类似与我们OC开发或者Java开发中的类，类可以进行属性添加，组件也可以。
组件的属性可以接受任意值，字符串、对象、函数都行。这里面有一个propTypes，可以用来限定提供的属性是否满足要求：
var Student = React.createClass({
propTypes: {
myName:React.PropTypes.string.isRequired,
},
render:function() {
return <h1>
{this.props.myName}
</h1>
}
});
var myNameStr = "React";
ReactDOM.render(
<Student myName = {myNameStr} />,
document.getElementById('example')
);
这里面的propTypes里面的是对属性的限制，比如这里必须是string类型，值是必须的。我们还可以去设置默认属性值：
var Student = React.createClass({
getDefaultProps: function() {
return {
myName:"Default React"
}
},
propTypes: {
myName:React.PropTypes.string.isRequired,
},
render:function() {
return <h1>
{this.props.myName}
</h1>
}
});
这里面的getDefaultProps就类似与我们在开发iOS或者Java的时候对声明属性的时候进行赋初始化值。
6、Virtual DOM
组件并不是真实的DOM节点，而是存在于内存中的一种数据结构，叫做虚拟DOM，只有插入文档的时候才会变成真实的DOM。根据React的设计，当重新渲染组件的时候，会通多diff寻找到变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上并不是渲染整个DOM数，这个Virtual DOM是一个纯粹的JS数据结构，性能比原生DOM快很多。这里面我们可以用通过ref属性来获取真实的DOM属性：
var MyComponment = React.createClass({
render:function(){
return (
<div>
<input type = "text" ref = "myTextInput"/>
<input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
</div>
);
},
handleClick:function() {
// alert(this.refs.myTextInput);
this.refs.myTextInput.focus();
}
});
ReactDOM.render(
<MyComponment/>,
document.getElementById('example')
);
这里需要注意的是，因为我们使用的是真实的DOM对象，所以一定要确保DOM插入文档之后才能够使用。
7、this.state
我们可以通过this.state来拿到组件的状态：
var LinkButton = React.createClass({
getInitialState:function () {
return {linked:false};
},
handleClick:function() {
this.setState({linked:!this.state.linked});
},
render:function() {
var text = this.state.linked? 'linked':'not linked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle
</p>
);
}
});
ReactDOM.render(
<LinkButton/>,
document.getElementById('example')
);
这里面我设置了一个linked的状态（是否连接）,这里通过this.state拿到当前状态，通过this.setState来设置状态。
8、表单
表单填写是用户和组件的互动：
var Form = 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(
<Form/>,
document.getElementById('example')
);
9、Component Lifecycle
组件有三个主要的生命周期：
Mounting:组件插入到DOM
Updating:组件被重新渲染，如果DOM需要更新
Unmounting:从DOM中删除组件
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did在进入状态之后调用。详情可参见这里。
var MyButton = React.createClass({
componentDidMount:function() {
alert("已经装载");
},
componentWillMount:function() {
alert("将要装载");
},
componentWillUpdate:function() {
alert("将要更新");
},
componentDidUpdate:function() {
alert("已经更新");
},
componentWillUnmount:function() {
alert("将要移除");
},
render:function(){
return (
<button>MyButton</button>
);
},
});
var LoadButton = React.createClass({
loadMyButton:function() {
ReactDOM.render(
<MyButton/>,
document.getElementById('myBTN')
);
},
removeMyButton:function() {
var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));
console.log(result);
},
render:function() {
return (
<div>
<button onClick={this.removeMyButton}>卸载MyButton</button>
<button onClick={this.loadMyButton}>装载MyButton</button>
<div id="myBTN">这里是mybuttonquyu</div>
</div>
);
}
});
ReactDOM.render(
<LoadButton/>,
document.getElementById('example')
);
10、Ajax
组件的数据通常是通过Ajax请求服务器获取的，可以使用componentDidMount方法来设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI:
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.getElementById('example')
);
这里使用了$,所以要引入jquery.js。
七、总结
经过这两天的了解，大概对React入门了。个人觉得React就是为了组件化开发方便而产生的。利用React，可以让其充当MVC中V的角色。也是对MVC架构的辅助设计。
八、参考资料
1、阮一峰的博客
React开发入门的更多相关文章
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- React开发入门：以开发Todo List为例
目录 概述 React基本概念 JSX是什么? 设置React APP 初始化APP 应用结构 探索第一个React组件 index.js 变量和props JSX中的变量 组件props props ...
- 前端React开发入门笔记
什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- React Native入门——布局实践：开发京东client首页（一）
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- 使用 shell 脚本实现 LANMP 一键安装
使用 shell 脚本来实现 LANMP 系统的一键安装.使用的操作系统是 CentOS 6 ,不区分 32 位和 64 位,要求机器可以连通互联网.支持 LAMP 和 LNMP ,MySQL 支持 ...
- C库函数使用与总结之字符串处理函数
1. memcpy(拷贝内存内容) [头文件]#include <string.h> [函数原型]void *memcpy(void *dest, const void *src, siz ...
- MongoDB数据库用户名和密码的设置
首先是对MongoDB用户和权限的设置,如果不设置用户的话,直接使用mongo命令就可以进入客户端shell界面进行操作了,但是如果没有设置用户的话,总感觉少了点什么,于是经过半天的查找和实践,差不多 ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- 第4章 文本编辑器vim
1. vim常用操作 1.1 vim简介 (1)vim是一个功能强大的全屏幕文本编辑器,是Linux/Unix上最常用的文本编辑器,它的作用是建立.编辑.显示文本文件. (2)vim没有菜单,只有命令 ...
- dotnet core 出现Can not find runtime target for framework '.NETCoreApp,Version=v1.6' 的解决办法
如果你在更新dotnet core新的类库后运行程序提示如下的错误: Can not find runtime target for framework '.NETCoreAPP, Version=v ...
- 掌握SortSet接口和Set接口的关系，以及常用方法。
TreeSet类是可以排序的类.TreeSet实际上也是SortSet接口的子类. 此接口的所有类都是可以排序的. 所有的方法: 实例: package 类集; import java.util.So ...
- button 样式
/** * 个人资料 */Ext.define('For.view.personal.MyPersonalData',{ extend:'Ext.panel.Panel', ...
- OpenGL在Ubuntu 14.04 中的设置与编程
在sudo apt-get install XXX,别的教程讲的很详细了. 编写好程序需要在shell中链接 g++ teapot.c -o teapot -lglut -lGL -lGLU 此处要注 ...
- 通过实战理解C语言精要——函数篇
前言 本篇博客是对C语言函数部分的重点内容和细枝末节通过实战得到的经验的总结精炼,不涵盖C语言函数的全部内容,所有提炼内容均来自提炼与实战,阅读需要对函数部分有一定基础,可用于对C语言函数的理解提 ...