React：创建一个 React 项目的最小配置

这篇文章的目的是让你理解创建一个 React 项目的最小配置过程。React 官方为你提供了创建 React 项目的工具（create-react-app），用它可以很简单创建 React 项目，基本不需要做任何的配置，直接就可以进入到开发过程。但这个过程太过神奇，我认为还是要理解一下，创建一个 React 项目，至少要做的一些配置。

配置过程

说过程，不多解释。

创建项目

先为项目创建一个目录：

mkdir react-project

进入到这个目录的下面：

cd react-project

为项目创建一个 package.json 文件：

npm init -y

安装项目依赖

先安装 react 与 react-dom：

npm install react react-dom --save

安装项目开发依赖

安装 webpack，它是打包用的工具：

npm install webpack --save-dev

安装 babel，它可以转换我们写的 JavaScript，这样即使浏览器不支持，我们现在也可以使用 JavaScript 的一些新特性，因为 Babel 会为我们转换 JavaScript 代码，让浏览器能懂。

npm install babel-cli babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev

创建项目结构

创建一个 src（source）源目录，应用的代码都放在这个目录下面，在这个目录下创建一个 index.js 文件，它是一个入口文件。

mkdir src
touch src/index.js

为应用的公开资源创建一个目录，用户真正访问的就是这个目录下面的东西。

mkdir public
touch public/index.html

配置文件

为 Babel 创建一个配置文件，放在应用的根目录下面：

touch .babelrc

配置如下：

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

为 webpack 创建一个配置文件，放在应用的根目录下面：

touch webpack.config.js

配置如下：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

entry 就是入口，这里指定的是 src 下面的 index.js。output 里面是打包输出的东西，生成一个 bundle.js ，放在 public 目录的下面。module 指定了要用的模块，这里用了 loaders ，在它里面测试文件是不是 js 文件，如果是就用一下 babel-loader 去转换 JavaScript 的代码。

配置打包命令

打开 package.json 文件，在 scripts 区域里，添加一个自定义的命名，比如 start，像这样：

  "scripts": {
    "start": "webpack -wd"
  },

应用的代码

打开 src/index.js，代码如下：

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  React.createElement('p', null, 'hello ~'),
  document.getElementById('root')
)

打开 public/index.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://ninghao.net/bundle.js" charset="utf-8"></script>
</body>
</html>

执行打包应用的命令

在项目的根目录下，执行：

npm start

这样会把应用打个包，生成一个 bundle.js 文件，放在 public 目录的下面。

创建一个本地服务器

创建一个本地服务器，运行我们的 React 应用，方法非常多。我用 browser-sync 创建一个简单的本地服务器。
安装 browser-sync：

npm install browser-sync -g

创建一个本地服务器：

cd public
browser-sync start --server

会返回提示，告诉你服务器的地址，在浏览器上打开这个地址，你会在页面上看到一个用 p 标签包装的 “ hello ~ ” 。

React

DYH2020

touch和browser这两个命令只对mac有效，在Windows上不起作用，没有那个命令。

7 年 4 周以前

王皓 author

Windows 可以下载完整版的 cmder 作为命令行工具，里面带 git，还有很多有用的工具。下载了 cmder 以后，新建一个 bash 类型的命令行标签，就可以使用这些工具了。

7 年 3 周以前

我按照你说的下载了完整版的cmder，上面的touch和browser命令也都ok了，但是运行之后打开页面什么东西都没有，我用的win10

没关系，不需要手工配置，可以直接使用 create-react-app 这个工具去创建 react 项目。https://github.com/facebookincubator/create-react-app

恩恩，好的，非常感谢

7 年 2 周以前