要开始构建你的第一个 React App，最简单的方法莫过于使用下面这两个 JSFiddle 示例了：

Create React App

Create React App 是一个新的受官方支持的用于创建 React 单页面应用的工具，它提供了一个一些无需任何配置那可拿来即用的现代化构建工具，需要 Node 4 或者更高版本的支持。

但是需要注意的是，它还是有一些使用上的限制，而且它也仅仅只适用于单页面应用，如果你更高的灵活性或者将 React 整合到现有的项目中，那你可能就需要下面这些其它的解决方案了。

Starter Pack

如果你才刚刚开始了解 React，那么下载 Starter kit 是另一个不错的选择， Starter kit 包含了预建的 React 以及 React Dom 示例复本。

下载 Starter kit 15.3.1

在 Starter kit 的根目录下，创建一个名为 helloworld.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://unpkg.com/babel-core@5.8.38/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 语法说明 以了解更多关于 JSX 的使用帮助，为了将其编译为浏览器可识别的 JavaScript 代码，我们使用了 <script type="text/babel">，此时 Babel 将直接在浏览器编译它，直接在浏览器中打开该页面，你就将看到应用已经执行了。

分开的文件

你的 React JSX 代码，还可以被分开存储在不同的文件中，创建一个 src/helloworld.js 文件：

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

然后在 helloworld.html 代码中引入该文件：

<script type="text/babel" src="src/helloworld.js"></script>
这里需要注意一点，有一些浏览器（比如 Chrome），可能只允许通过 HTTP 协议访问文件。

在 npm 或者 Bower 中使用 React

你同样还可以使用如 npm 或者 bower 这样的包管理工具， 这在后面的文章中会详细涉及到。

标签: 翻译, react, 教程

评论已关闭