react入门参考资料--step by step

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

ReactJS简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。更多关于react的中文介绍请参这篇文章.

学习react需要具备的一些知识栈：

你需要了解JavaScript, HTML5 及 CSS.仅管 ReactJS 并不使用 HTML, 但是它使用的JSX语法与 HTML非常相似，如果有这些知识的基础，会对后面的学习非常有帮助。在接下来的例子中，我将会用到一些EcmaScript 2015 的语法，所以提前进补一下这方面的知识也是很有益处的。

学习react需要准备的开发环境：

虽然我推荐使用mac系统作为react开发环境，但是windows系统也可以满足当前的学习条件。本教程需要nodejs的支持，请自行安装。教程相关代码请从我的github.com上拉取相关代码到本地。然后在终端（命令行）中输入npm install && npm start

下面开始react的学习之旅。

1. 了解jsx的用法，首先新建一个App.jsx的文件。下面的例子中，我们返回一个div容器，需要注意的是，仅管我们返回的内容很像是一段html代码，但它不是真的htm，记住这一点很重要。

import React from 'react';class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}export default App;

打开浏览器访问localhost:8080/index.html 如果之前的准备工作没有问题的话，此时，你应当可以看到页面上显示出了Hello World !!! 这没有什么特别的，不是吗？如果我们要返回多个dom元素，需要有一个元素来包围里边的元素。下面我们用一个div来包围h1,h2,和p元素来演示一下。

import React from 'react';class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
}export default App;

保存这后，浏览器自动刷新了页面。这神奇的效果，得益于我们的自动化构建方式，如果你对这一块的实现有兴趣，请自行查补webpack、webpack-dev-server相关内容。

我们可以用html类似的方式给元素添加自定义的属性，你需要加上一个data-前缀。下面我要演示一下如何给元素添加自定义属性。

import React from 'react';class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}
}export default App;

如果要添加变量或者表达式，需要使用大括号{}。示例如下：

import React from 'react';class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}export default App;

需要注意的是，不可以在表达式中使用if else , 但是可以使用三目运算符 ? :

import React from 'react';class App extends React.Component {
render() { var i = 1; return (
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
);
}
}export default App;

下面演示在jsx语法中，如何给元素添加行内样式，这和jquery中css()的用法非常类似。

import React from 'react';class App extends React.Component {
render() { var myStyle = {
fontSize: 100,
color: '#FF0000'
} return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}export default App;

如何使用注释，使用{} //单行注释， /**/ 多行注释

import React from 'react';class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}export default App;

到这里，关于jsx的用法就差不多可以结束了，下一节演示组件的用法。

本章文件链接http://www.tutorialspoint.com/reactjs/reactjs_jsx.htm 可能需要FQ

2 组件的用法

import React from 'react';class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}export default App;

新建一个main.js文件，内容如下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';ReactDOM.render(<App />, document.getElementById('app'));

3 通过状态机实现组件之间变量的传递，this.state 这是react中一个非常重要的对象，与之非常类似的一个对角是this.props, 它们经常会用到，我有必要简单说一下它们的区别。state，常用于组件内部状态的变化，而props，常用于向子组件传递变量。

import React from 'react';class App extends React.Component {
constructor() {
super(); this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
}, {
"id":2,
"name":"Bar",
"age":"30"
}, {
"id":3,
"name":"Baz",
"age":"40"
}
]
}
} render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) ⇒ <TableRow key = {i} data = {person} />)}
</tbody>
</table>
</div>
);
}
}class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}export default App;

在循环组件内容时，使用key = {i} 是一个常用的优化技巧。

props 初次露面，下面的例子没有什么代表性，更像是state的用法。

import React from 'react';class App extends React.Component {
constructor(props) {
super(props); this.state = {
header: "Header from state...",
"content": "Content from state..."
}
} render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}export default App;

下面展示props的真正用法，更新一下main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
from props..."/>, document.getElementById('app'));export default App;

更新一下App.jsx

import React from 'react';class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}export default App;

我们在App组件上添加的headerProp和contentProp这两个属性可以在App组件内通过this.props拿到。

再来一个props和state一起使用的例子，相对有点复杂，需要仔细看代码。

App.jsx的内容更新如下：

import React from 'react';class App extends React.Component {
constructor(props) {
super(props); this.state = {
header: "Header from props...",
"content": "Content from props..."
}
} render() {
return (
<div>
<Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
);
}
}class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
</div>
);
}
}class Content extends React.Component {
render() {
return (
<div>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}export default App;