学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动用 Webpack 和 Parcel 来搭这个环境。
$ npm install -g create-react-app$ create-react-app my-app$ cd my-app$ npm start
使用淘宝 NPM 镜像
使用 React、Webpack、Parcel、babel 这些工具需要安装很多依赖包，不走代理的话速度会非常慢，也很容易出错，所以这里推荐使用淘宝的 npm 镜像来安装，速度非常理想。
使用淘宝镜像安装 npm 包只需要两步即可：
- 安装 cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
- 使用 cnpm 来安装包
只需要将 npm 替换成 cnpm 即可获得高速下载。
$ cnpm install [name]
下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。
用 webpack 开始第一个 React
初始化一个 json 配置文件
$ npm init -y
在 scripts 里面添加如下内容：
"scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" }, 安装 React
$ cnpm install react react-dom --save
安装编译工具 babel
$ cnpm install babel-preset-env babel-preset-react babel-loader --save-dev
安装打包工具 wepback
全局的和当前文件夹的最好都装上。
$ cnpm install webpack webpack-cli --save-dev$ cnpm install webpack-dev-server --save-dev$ cnpm install webpack webpack-cli -g$ cnpm install webpack-dev-server -g
配置 webpack
为了方便，以下所有文件都建在同一个文件夹下面。
新建 webpack.config.js 并添加以下内容
const path = require('path');module.exports = { // index.js是入口文件 entry: path.resolve(__dirname, './index.js'), output: { path: path.resolve(__dirname, ''), filename: "./bundle.js" }, mode: 'development', // ip 和端口配置 devServer: { host: "127.0.0.1", port: 8080 }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["env", "react"] } } ] }}; 这个presets: ["env","react"]也可以单独配置在.babelrc文件中。
创建测试文件
- 新建 index.js 文件
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(我的第一个react例子
, document.getElementById('root') );
- 新建 index.html 文件
example
启动
最后执行 npm start 即可。
附上我的 package.json 文件，直接执行 cnpm install 就能安装所有依赖。
{ "name": "", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "react": "^16.3.1", "react-dom": "^16.3.1" }, "devDependencies": { "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "webpack": "^4.5.0", "webpack-cli": "^2.0.14", "webpack-dev-server": "^3.1.3" }} 
如果要换端口的话，修改下webpack.config.js文件的port值就可以了。
用 Parcel 开始第一个 React
初始化一个 json 配置文件
$ npm init -y
在 scripts 里面添加如下内容：
"scripts": { "start": "parcel index.html", "test": "echo \"Error: no test specified\" && exit 1" }, parcel 是运行 html 文件的，而不是 js。
安装 React
$ cnpm install react react-dom --save
安装编译工具 babel
$ cnpm install babel-preset-env babel-preset-react babel-core --save-dev
安装打包工具 Parcel
全局的和当前文件夹的最好都装上。
$ cnpm install parcel-bundler --save-dev$ cnpm install -g parcel-bundler
配置 babel
为了方便，以下所有文件都建在同一个文件夹下面。
新建文件 .babelrc ，添加以下内容：
{ "presets": ["env"]} 这里面只添加 env 即可，如果添加了 react 就会报错。
创建测试文件
- 新建 index.js 文件
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(我的第一个react例子
, document.getElementById('root') );
- 新建 index.html 文件
example
启动
最后执行 npm start 即可。
附上我的 package.json 文件，直接执行 cnpm install 就能安装所有依赖。
{ "name": "", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "parcel index.html", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "react": "^16.3.1", "react-dom": "^16.3.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "parcel-bundler": "^1.7.0" }} 
可以看出来，用 parcel 跟 webpack 刷新内容的方式也不一样，parcel 并没有重新加载网页。
如果要改端口的话，启动命令需要改成： $ parcel index.html -p 端口，例如：parcel index.html -p 8081。 总结
本文分别展示了 如何用 webpack 和 Parcel 搭建第一个 ReactApp，虽然部分内容有重复，但你可以清晰地看到它们之间的差别。
相对于 webpack 来说 parcel 在启动之更新内容是不重新加载网页的，只刷新更改的内容，速度比 webpack 快很多。
同时，parcel 也脱离了配置文件，使用非常方便，但这既是优点也是缺点，没有配置文件在功能上可能没有 webpack 那么强大，但是对于学习 react 来说足够了。