React开发教程4：React开发环境搭建

本教程由好办法汇总原创

这一篇教程将教你如何成功配置搭建React开发环境。

首先你需要安装NodeJS和npm。
请在NodeJS官网下载安装文件，会同时安装NodeJS和npm。
https://nodejs.org

第一步：安装全局npm包（Global Packages）

我们的开发会用到babel插件。首先请在命令行中安装babel。

C:\Users\username>npm install -g babel

C:\Users\username>npm install -g babel-cli

第二步：创建开发目录

我们这里假定创建一个叫reactApp的目录放在桌面上。我们通过npm init命令初始化npm管理环境和package.json文件。

C:\Users\username\Desktop>mkdir reactApp

C:\Users\username\Desktop\reactApp>npm init

第三步：通过npm安装React、webpack和其他npm插件

我们使用webpack作为开发的build工具。
这里我们安装webpack和webpack-dev-server。

C:\Users\username>npm install webpack --save

C:\Users\username>npm install webpack-dev-server --save

这里安装React。–save命令会把插件添加到package.json文件中。

C:\Users\username\Desktop\reactApp>npm install react --save

C:\Users\username\Desktop\reactApp>npm install react-dom --save

安装babel相关插件。

C:\Users\username\Desktop\reactApp>npm install babel-core

C:\Users\username\Desktop\reactApp>npm install babel-loader

C:\Users\username\Desktop\reactApp>npm install babel-preset-react

C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

第四步：创建开发目录下的文件

通过命令行快速创建以下文件。

C:\Users\username\Desktop\reactApp>touch index.html

C:\Users\username\Desktop\reactApp>touch App.jsx

C:\Users\username\Desktop\reactApp>touch main.js

C:\Users\username\Desktop\reactApp>touch webpack.config.js

第五步：设置编译器(compiler)、开发服务器(server)和加载器(loader)

打开 webpack-config.js 文件，添加以下代码。

我们这里设置 webpack 的入口文件为main.js。
输出目录是集成（bundle）过的文件输出路径。
我们设置的开发服务器端口为8080.
同时，这里设置了使用babel loaders来搜索js文件，其根据是es2015和react的预设参数。

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',
				
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

添加完以上代码后，打开package.json文件在“script”中添加以下代码。

"start": "webpack-dev-server --hot"

这样我们就可以使用命令npm start来启动开发服务器。 –hot命令使开发服务器具有了即使更新的能力。开发中代码更新后，不需要手动刷新浏览器就可以自动显示视觉上的变化。

第六步：index.html

在index.html中。我们引用 index.js并设置div id = “app” 作为我们的React应用根元素。

<!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>

第七步：App.jsx and main.js

现在我们写第一个React组件（component)。这个组件会渲染出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'));

第八步：启动开发服务器

C:\Users\username\Desktop\reactApp>npm start

在浏览器中打开 http://localhost:8080/。你的第一个React App开发成功了！