在本章中，我们将演示如何为react开发建立一个环境。 请注意，涉及的步骤很多，但这此步骤将有助于以后加快开发流程。 我们将需要nodejs，所以如果您没有安装，请查看下面教程文章的链接 - http://www.h3.com/nodejs/node_install.html
安装reactjs有好几种方法，这里重点介绍第1种方法，其它方法要选介绍演示。
注意：在编写本教程时，使用nodejs版本为：
v9.3.0，npm的版本为：5.6.0
第1步 - 创建根文件夹
根文件夹将被命名为reactapp，我们将把它放在目录：f:\worksp\reactjs。 创建文件夹后，打开它，并通过命令提示符运行npm init来创建空的package.json文件，并按照命令说明进行操作。
f:\worksp\reactjs> mkdir reactapp
f:\worksp\reactjs\reactapp> npm init
第2步 - 安装全局包
我们将需要为这个设置安装几个软件包。这里将需要一些babel插件，所以首先通过在命令提示符窗口中运行以下代码来安装babel。
f:\worksp\reactjs\reactapp> npm install -g babel
f:\worksp\reactjs\reactapp> npm install -g babel-cli
第3步 - 添加依赖和插件
我们将在接下来的教程中使用webpack捆绑器。所以需要安装webpack和webpack-dev-server。
f:\worksp\reactjs\reactapp> npm install webpack --save
f:\worksp\reactjs\reactapp> npm install webpack-dev-server --save
既然要使用react，那么需要先安装它。 --save命令将把这些包添加到package.json文件中。
f:\worksp\reactjs\reactapp> npm install react --save
f:\worksp\reactjs\reactapp> npm install react-dom --save
如前所述，我们需要一些babel插件，所以也安装它。
f:\worksp\reactjs\reactapp> npm install babel-core
f:\worksp\reactjs\reactapp> npm install babel-loader
f:\worksp\reactjs\reactapp> npm install babel-preset-react
f:\worksp\reactjs\reactapp> npm install babel-preset-es2015
第4步 - 创建文件
下面来创建一些需要的文件。 它可以手动添加或使用命令提示符创建以下文件 -
先保持上面几个文件的内容为空。
第5步 - 设置编译器，服务器和加载器
打开webpack.config.js文件并添加下面的代码。将webpack入口点设置为main.js。 输出路径是提供捆绑应用程序的地方。还将为开发服务器设置为8080端口。可以选择你想要的任何端口。
最后，设置babel加载器来搜索js文件，并使用es2015并对之前安装的预设做出反应。
文件：webpack.config.js -
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devserver: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
打开package.json 并删除在“scripts”对象内的语句："test" "echo \"error: no test specified\" && exit 1"。因为在本教程中不会进行任何测试。接下来添加启动命令。
"start": "webpack-dev-server --hot"
在上述步骤之前，将需要webpack-dev-server。 要安装webpack-dev-server，请使用以下命令。
f:\worksp\reactjs\reactapp> npm install webpack-dev-server -g
现在，可以使用npm start命令启动服务器。 --hot命令将在文件内部更改内容后添加实时重载，所以不需要每次更改的代码就可以刷新浏览器。
第6步 - index.html
这只是普通的html代码文件。可将div id = "app"设置为应用程序的根元素，并添加index.js脚本，这是捆绑应用程序文件。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>react app</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
第7步 - app.jsx和main.js
这是第一个react组件。我们将在后面的章节中深入讲解react组件。 这个组件将显示输出："hello world !!!"
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
return (
<div>
hello world!!!
</div>
);
}
}
export default app;
我们需要导入这个组件，并将其呈现给的根app元素，所以可在浏览器中看到它。
文件：main.js -
import react from 'react';
import reactdom from 'react-dom';
import app from './app.jsx';
reactdom.render(<app />, document.getelementbyid('app'));
注 - 无论何时您想使用某些东西，都需要先导入它。如果您希望使组件在应用程序的其他部分可用，则需要在创建后导出它，并将其导入到要使用它的文件中。
完整的目录结构如下所示 -
第8步 - 运行服务器
设置完成，我们可以通过运行以下命令启动服务器。
f:\worksp\reactjs\reactapp> npm start
执行输出如下 -
在我们的例子中，它打开访问的url是：http://localhost:8080/ ，打开之后，应该会看到下面的输出。
如果您喜欢使用自己的文本编辑器，也可以下载这个html文件( http://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html )，编辑它，并从浏览器的本地文件系统中打开它。但它的运行时代码转换很慢，所以不要在生产中使用它。
