# 下载
如果你不准备用npm,你可以下载包含着预编译过的React和React Dom 的起步套件。
[Download Starter Kit 0.14.3](https://facebook.github.io/react/downloads/react-0.14.3.zip)
#在线编译
~~~
<!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>
~~~
#独立文件
Your React JSX code can live in a separate file. Create the following src/helloworld.js.
~~~
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
~~~
Then reference it from helloworld.html:
`<script type="text/babel" src="src/helloworld.js"></script>`
Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
# 离线转换
First install the Babel command-line tools (requires npm):
~~~
npm install --global babel-cli
npm install babel-preset-react
~~~
Then, translate your src/helloworld.js file to plain JavaScript:
`babel --presets react src --watch --out-dir build`
Note:
>If you are using ES2015, you will want to also use the babel-preset-es2015 package.
离线转换后的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>
<!-- No need for Babel! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
~~~
# React.Dom
## ReactDOM.render(vm, node)
# React
## ReactElement.createElement = function (type, config, children)
## React.createClass
## React.createFactory
## React.DOM.p
# React使用注意的问题
- visualDom里的元素事件onClick 里传参不能用this, clickHandle里获取 属性和状态 用this.props 和this.state
- ``React has been successfully running for ${seconds} seconds.`;` es6的模板
- this.refs.modal 通过refs属性来查找替换后的原生dom
## React组件的生命周期