注意React和React Native是不同的,具体参见其官网。
1.Installation
1.1.Install Node.js (will get npm)
官网:https://nodejs.org/en/
运行node –v 或者npm查看是否安装成功
1.2.Install React
npm install –save react react-dom
1.3.Install Babel (for offline Transform)
安装Babel command-line tools:
npm install --global babel-cli
npm install babel-preset-react
离线转换(参见再下面的例子):
babel --presets react src --watch --out-dir build
2.HelloWorld example
2.1.内嵌脚本
Helloworld.html: “div example” 显示 “Hello, world!”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/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>
2.2.独立脚本(online transform)
Helloworld.html,Note that some browsers (Chrome, e.g.) will fail to load the file unless it’s served via HTTP.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="src/helloworld.js"></script>
</body>
</html>
src/Helloworld.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
2.3.独立脚本(offline transform)
需要将上面的helloworld.js转换成js代码(先进入Helloworld.html所在的目录),然后运行:
babel --presets react src --watch --out-dir build
Build/helloworld.js (babel –presets react src –watch –out-dir build,转换的结果):
ReactDOM.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
运行上述babel命令之后,只要不退出该命令,那么当src/helloworld.js被修改,就会自动更新build/helloworld.js
helloworld.html修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="build/helloworld.js"></script>
</body>
</html>
3.React语法
3.1.JSX 的基本语法规则
1) 遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
2) JSX 允许直接在模板插入 JavaScript 变量,如果这个变量是一个数组,则会展开这个数组的所有成员。
<!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">
var names = ['Alice', 'Emily', 'Kate', 'array.map'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
3)组件类的第一个字母必须大写
4)组件类只能包含一个顶层标签
5)添加组件属性时,class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字
3.2.React.Component
React component的基类。
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。
根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。
3.3.React.createClass
ReactClass createClass(object specification)
创建component class. A Component implements a render method which returns one single child.
3.4.React.Children & this.props & this.props.children
this.props对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。
this.props.children的值有三种可能:如果当前组件没有子节点,它就是 undefined;如果有一个子节点,数据类型是object;如果有多个子节点,数据类型就是array。所以,处理 this.props.children的时候要小心。
React 提供的一个工具方法,用来处理 this.props.children。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。
3.5.React.PropTypes和组件的propTypes属性getDefaultProps方法
因为组件的属性是可以接受任意值的,字符串,对象,函数等等都可以。React.PropTypes就是用来验证组件实例的属性是否符合要求。
组件的getDefaultProps方法可以用来设置组件属性的默认值:
3.6.ReactDOM.render
创建或更新element元素到container中,如果提供了可选的callback,那么will be executed after the component is rendered or updated.
render(
ReactElement element,
DOMElement container,
[function callback]
)
推荐不要使用该函数的返回值。
3.7.React Event System
React event system:http://facebook.github.io/react/docs/events.html#supported-events
相关网站
https://en.wikipedia.org/wiki/React_(JavaScript_library)
https://facebook.github.io/react/index.html