这篇文章的目的是让你理解创建一个 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
评论
touch和browser这两个命令只对mac有效，在Windows上不起作用，没有那个命令。
7 年 1个月 以前
Windows 可以下载完整版的 cmder 作为命令行工具，里面带 git，还有很多有用的工具。下载了 cmder 以后，新建一个 bash 类型的命令行标签，就可以使用这些工具了。
7 年 1个月 以前
我按照你说的下载了完整版的cmder，上面的touch和browser命令也都ok了，但是运行之后打开页面什么东西都没有，我用的win10
7 年 1个月 以前
没关系，不需要手工配置，可以直接使用 create-react-app 这个工具去创建 react 项目。https://github.com/facebookincubator/create-react-app
7 年 1个月 以前
恩恩，好的，非常感谢
7 年 1个月 以前