React初体验

先下载官方初学者教程包；解压后在根目录创建名为hello.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">
      ReactDOM.render(
        <h1>Hello,world!</h1>,document.getElementById('example')
      );
    </script>
  </body>
</html>

在 JavaScript 代码里写着 XML 格式的代码称为 JSX；

也可以将这段JSX代码放在单独的文件夹里，创建src/hello.js文件，将JSX代码放入该文件夹，代码如下：
```
ReactDOM.render(
   <h1>Hello,document.getElementById('example')
 );
```
然后在html文件中引用，代码如下：
```
<script type="text/babel" src="src/hello.js"></script>
```
PS：注意上面的type是"text/babel",然后在谷歌、欧朋浏览器等主流浏览器打开会出现问题，具体问题控制台那会告诉你，没有通过http服务。

将JSX代码转换成标准的JavaScript代码，首先安装命令行工具，命令如下：

npm install -g react-tools

接着将src/hello.js转换成标准的JavaScript文件，命令如下：

jsx --watch src/ build/

转换成功后，build/hello.js会自动生成，代码如下：

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

最后将代码更新如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- 不需要JSXTransformer! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/hello.js"></script>
  </body>
</html>

注意：在转换标准JavaScript代码的时候，要进入需转换文件的根目录！

具体查看中文教程：http://reactjs.cn/react/docs/getting-started.html

React初体验

猜你在找的React相关文章