初学 React

引入 JavaScript 文件

React 有两个 JavaScript 文件:React 核心 react.js 和 React 虚拟 DOM 文件:react-dom.js
在开发环境,使用下面的代码引入 React:

1
2
<script src="/path/to/react/react.js"></script>
<script src="/path/to/react/react-dom.js"></script>

在生产环境,则使用压缩过的文件:

1
2
<script src="/path/to/react/react.min.js"></script>
<script src="/path/to/react/react-dom.min.js"></script>

注意把 /path/to/react 替换成自己的 React 文件地址。

使用 JSX

如果需要使用 JSX,则需要 react-toolsbrowser.js 来将 JSX 翻译成 JavaScript。
在开发环境,可以直接引用 browser.js

1
<script src="/path/to/react/browser.min.js"></script>

在生产环境,由于 browser.js 是在前端翻译 JSX 的,会拖慢网页载入速度,因此我们需要在后端转换好。这就需要安装 react-tools 了。
安装 react-tools 需要 npm 支持。使用下面的命令安装 react-tools

1
npm install -g react-tools

然后使用下面的命令进行“翻译”:

1
jsx --watch src/ build/

src/ 为源代码路径,build/ 为输出路径。生产环境需要引用输出路径的 JavaScript 文件。

HelloWorld

首先,需要创建一个组件。组件名称必须首字母大写。

1
2
3
4
5
6
7
8
9
var HelloWorld = React.createClass({
render: function(){
return(
<h1 id="helloword-id" className="helloword-class">
Hello, World!
</h1>
);
}
});

这样一个名叫 HelloWorld 的组件就创建成功了。值得注意的是,由于 class 是 JavaScript 的关键字,在 JSX 中 HTLM 的 class 属性应写为 className
接着,我们需要渲染这个组件。

1
ReactDOM.render(<HelloWorld />, document.body);

ReactDOM.render 有两个参数:第一个是渲染的内容,可以使用 JSX,第二个要渲染到的元素。
如果我们直接渲染整个页面,会得到一个 Warning:

1
2
3
render(): Rendering components directly into document.body is discouraged,
since its children are often manipulated by third-party scripts and browser extensions.
This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

根据错误提示,我们不应该把我们的组件渲染到整个页面,而应该渲染到一个容器元素。
但是 React 也不会阻止你这么做,因此这个页面是渲染成功的。在网页上可以看到 HelloWorld 的字样。
最后,我们需要把以上代码装进一个文件,再引入我们的 HTML 文档。所有有 JSX 的文件必须有 type="text/babel" 属性,来标识它是 JSX 而不是 JavaScript。

1
<script type="text/babel" src="helloworld.js"></script>

同时,也可以直接把代码写在 <script> 标签里:

1
2
3
<script type="text/babel">
ReactDOM.render(<h2>你好世界!</h2>, document.getElementById('helloworld-cn'));
</script>

最后,把它拼装成一个页面就可以啦!