本文是React开发的入门教程，涵盖了React的基本概念、开发环境搭建（包括官方脚手架、第三方脚手架和手动配置webpack）、JSX语法、最简单的React小程序示例，以及基础语法如ReactDOM.render()、map遍历、组件化、this.props.children、PropTypes、Virtual DOM、this.state和组件生命周期等核心知识点。
目录
一、什么是React
React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面
| angularJs | reactJs | vueJs | angularTs | |
|---|---|---|---|---|
| 控制器 | √ | - | - | 弱化 |
| 过滤器 | √ | - | √ | √ |
| 指令 | √ | - | √ | √ |
| 模板语法 | √ | - | √ | √ |
| 服务 | √ | - | - | √ |
| 组件 | - | √ | √ | |
| jsx | - | √ | 加入 | - |
二、开发环境的搭建
官方脚手架
yarn global add create-react-app | npm install create-react-app -g
创建 react项目
create-react-app 目录 | npx create-react-app 目录 | npm init react-app 目录
yarn eject 解构出所有的配置文件 可选
yarn start | npm start 开发
yarn build | npm run build 打包
//调试 需要安装给chrome浏览器一个插件 react-dev-tools
环境解析
- react: 核心包，解析组件 演示
- react-dom: 编译 -> 浏览器 演示
- react-scrpts: react的项目环境配置
- manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
- registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
- 对Internet Explorer 9,10和11的支持需要polyfill。
环境配置
npm run eject | yarn eject
报git错误时:
git add . -> git commit -m 'init' -> yarn eject
报缺少babel 包: 安装一下
//修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;
//去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则
资源限制
-
本地资源导入(import) 不可以导入src之外的包
-
相对 指向src，绝对路径 指向了 public目录
-
前景图片, 相对 和 绝对路径 都指向了 public目录
第三方脚手架
yeomen/dva/umi
webpack手动搭建
JSX
jsx是一个 JavaScript 的语法扩展，可以理解为js的一个新的数据类型，类XML（JSON前身）语法，出现在js当中，文件为xx.js|xx.jsx
var b= <strong>强壮</strong>
语法要求
- 标签要闭合
- 元素必须要有一个顶层元素
- 变量首字母大写代表组件，小写对应是js数据类型
- 属性，小驼峰命名
<xx tabIndex="2">
三、最简单的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！了。
这里需要注意：首先，/h1>后面是此外，以前我们可能使用的是type是text/javascript，现在我们使用的text/babel。这是因为React独有的JSX语法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel”。
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')
);
运行结果如下：
Hello,World!
2、map（遍历）
将数组中的元素遍历赋值
var animals = ['dog','cat','pig'];
ReactDOM.render(
<div>
{
animals.map(function(animal) {
return <h1>{animal}</h1>
})
}
</div>,
document.getElementById('example')
);
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')
);
运行结果如下:
ZGButton1
上面的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')
);
此时输出的结果为：
1.zhangsan
2.lisi
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')
);
五、总结
个人觉得React就是为了组件化开发方便而产生的。利用React，可以让其充当MVC中V的角色。也是对MVC架构的辅助设计。
扫一扫
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
