要开始构建你的第一个 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 这样的包管理工具, 这在后面的文章中会详细涉及到。