React入门指南

最新推荐文章于 2024-04-12 15:37:59 发布

邢政

最新推荐文章于 2024-04-12 15:37:59 发布

阅读量511

点赞数

文章标签： react reactjs mobile web facebook

原文地址：React入门指南

React入门指南

JSFiddle

实验React最便捷的途径就是开始摆弄下面这个小例子:Hello World。

入门示例

下载示例开始体验：Download Starter Kit 0.13.3
在示例项目的根目录中，创建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语法文档来深入了解它吧。要在浏览器中把JSX代码转化为清香的Javascript，我们需要使用<script type="text/jsx">标签并引入JSXTransformer.js库。

独立脚本文件

你的JSX代码可以放入单独的文件中。创建src/helloworld.js，如下：

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

然后在helloworld.html中引用。

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

对JSX脱机转码

首先安装命令行工具(依赖npm)：

npm install -g react-tools

之后就可以把helloworld.js翻译为纯javascript了。

jsx --watch src/ build/

修改JSX的同时，会被自动翻译为javascript。

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

更新我们的HTML文件，不再需要JSXTransformer.js。

 
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- 无需引入 JSX 转换库 -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html> 
   