Reactjs官方文档(1)

来源：互联网发布：方正卡通字体优化编辑：程序博客网时间：2024/05/19 07:26

第一章开始

JSFiddle

最快开启React之门的方法就是使用JSFiddle hello world例子:

React JSFiddle

React JSFiddle without JSX

Starter kit

从下载Starter kit开始

在starter kit根目录。创建一个包含以下内容的helloworld.html文件。

<!DOCTYPE html><html>  <head>    <script src="build/react.js"></script>    <script src="build/JSXTransformer.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/jsx">      React.render(        <h1>Hello, world!</h1>,        document.getElementById('example')      );    </script>  </body></html>

Javascript中的XML语法叫做JSX；我们查看JSX语法学习更过关于它的知识。为了能够在javascript中使用JSX，我们使用<script type=”text/jsx’>并引入JSXTransformer.js在浏览器中进行真正的转换。

分离文件

你的React JSX可以在分离的文件中执行。创建src/helloword.js文件，内容如下。

React.render(  <h1>Hello, world!</h1>,  document.getElementById('example'));

然后在helloworld.html中关联它

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

线下转换

首先安装命令行工具（需要npm安装）

npm install -g react-tools

之后，将你的src/helloworld.js转换成纯的javascript

jsx --watch src/ build/

无论何时你更改文件，bulid/helloworld.js都会自动执行转换

React.render(  React.createElement('h1', null, 'Hello, world!'),  document.getElementById('example'));

像下面一样更新你的HTML

<!DOCTYPE html><html>  <head>    <title>Hello React!</title>    <script src="build/react.js"></script>    <!-- No need for JSXTransformer! -->  </head>  <body>    <div id="example"></div>    <script src="build/helloworld.js"></script>  </body></html>

想要CommonJS？

如果你想要在React中使用browserify、webpack，或者别的公共组件，只需要使用react npm包。除此之外，jsx构建工具可以十分简单的集成大多数打包系统（不仅仅是CommonJS）.

下一步

查找摘要和starter kit例子目录中其他的例子学习更多知识。

我们也有一个wiki社区贡献工作流,ui组件、路由、数据管理等。

祝大家好运，欢迎共同学习。

0 0