设置项目

你需要 Node Package Manager 来安装项目依赖项。从 Nodejs.org 下载适用于你的操作系统的节点。节点包管理器附带节点。

你还可以使用节点版本管理器来更好地管理节点和 npm 版本。它非常适合在不同节点版本上测试你的项目。但是，不建议用于生产环境。

一旦在系统上安装了节点，请继续安装一些必要的软件包，以便使用 Babel 和 Webpack 来完成第一个 React 项目。

在我们真正开始在终端中命令之前。看看 Babel 和 Webpack 用于什么。

你可以通过在终端中运行 npm init 来启动项目。按照初始设置。之后，在终端中运行以下命令 -

依赖关系：

npm install react react-dom --save

Dev Dependecies：

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev

可选的 Dev 依赖项：

npm install eslint eslint-plugin-react babel-eslint --save-dev

你可以参考此示例 package.json

在项目根目录中创建 .babelrc，其中包含以下内容：

{
  "presets": ["es2015", "stage-0", "react"]
}

（可选）在项目根目录中创建 .eslintrc，其中包含以下内容：

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
  },
  "plugins": [
    "react"
  ]
}

创建 .gitignore 文件以防止将生成的文件上传到你的 git 仓库。

node_modules
npm-debug.log
.DS_Store
dist

使用以下最低内容创建 webpack.config.js 文件。

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

最后，创建一个 sever.js 文件，以便能够运行 npm start，内容如下：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Serving your awesome project at http://localhost:3000/');
});

创建 src/app.js 文件以查看你的 React 项目执行的操作。

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world.</h1>
    );
  }
}

在终端中运行 node server.js 或 npm start，如果你在 package.json 中定义了 start 代表什么