Mac react环境搭建
网上的教程有好多，在这里不一一列举，我只介绍我今天安装成功的步骤
首先，在安装react之前要先配置好node
1.安装node
在这里下载node的安装包https://nodejs.org/en/download/ 。我下载的是.pkg文件，直接双击安装就好
node —v命令检验是否安装成功
npm -v用来检测npm
2.通过npm使用react
国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org
一般这个时候就可以使用cnpm来进行操作，但是我的一直显示命令未找到。所以我放弃了使用cnpm，继续使用npm命令
给npm配置taobao镜像的registry
npm config set registry https://registry.npm.taobao.org
然后直接用
npm install gulp less --save-dev
就是从taobao镜像拿包了
3.两种react开发环境构建
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：
$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start
在浏览器打开http://localhost:3000/ 盗用菜鸟教程一张图,因为我的已经更改了
项目的目录结构如下
my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html src/ App.css App.js App.test.js index.css index.js logo.svg
之后我们可以修改src/App.js 文件代码来改变页面样式
reate-react-app 执行慢的解决方法：
在使用 create-react-app my-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那：
fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch
可以看到资源还是使用了 npmjs.org，解决方法是换成淘宝的资源：
$ npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
$ npm config get registry
npm start来启动配置，那么自动会进入开发模式，此时热替换是处于自动激活状态
使用npm run build来编译得到生产环境，此时代码会被编译到build目录下，此时会自动将整个应用打包发布，它会自动使用Webpack控件进行优化与压缩
使用 Webpack-React-Redux-Boilerplate快速构建 React 开发环境
其允许在一个项目中配置多个应用入口，同时支持开发模式、构建模式与库构建模式。同时笔者习惯不将webpack配置文件分成单独的dev与prod文件，而是合并到一个文件中。如果需要使用该模板，直接使用如下命令
git clone -b boilerplate https://github.com/wxyyxc1992/Webpack-React-Redux-Boilerplate/ # 克隆模板文件夹
sudo sh ./install.sh # 安装运行所需要的依赖项
在执行时要注意，进入到包含install.sh的文件夹下面，否则第二句命令可能会出现找不到的问题，
得到的模本文件夹主要由以下构成
├── README.md ├── README.zh.md ├── dev-config : 配置文件入口 │ ├── apps.config.js : 应用配置文件 │ ├── dev.html : 开发模式下使用的HTML文件 │ ├── devServer.js : 开发服务器 │ ├── eslint.js : ESLint配置文件 │ ├── template.html : 构建模式下推荐的HTML模板文件 │ └── webpack.config.js : webpack配置文件 ├── install.sh ├── package.json └── src : 源代码目录 ├── count : 某个应用 │ ├── App.js │ ├── async_library.js │ ├── colors.js │ ├── count.html │ └── count.js ├── helloworld │ ├── App.css │ ├── App.js │ ├── helloworld.css │ ├── helloworld.html │ ├── helloworld.js │ └── logo.svg ├── library │ ├── foo.js │ ├── library.html │ └── library_portal.js └── vendors.js
其核心的关于应用的配置文件即apps.config.js，在模板项目中其配置为
module.exports = { apps: [ //HelloWorld { id: "helloworld", title: "HelloWorld", entry: { name: "helloworld", src: "./src/helloworld/helloworld.js" }, indexPage: "./src/helloworld/helloworld.html", compiled: true }, //Count { id: "count", title: "Count", entry: { name: "count", src: "./src/count/count.js" }, indexPage: "./src/count/count.html", compiled: true } ], //开发服务器配置 devServer: { appEntrySrc: "./src/helloworld/helloworld.js", //当前待调试的APP的编号 port: 3000 //监听的Server端口 }, //如果是生成的依赖库的配置项 library: { name: "library_portal",//依赖项入口名 entry: "./src/library/library_portal.js",//依赖库的入口, library: "libraryName",//生成的挂载在全局依赖项下面的名称 libraryTarget: "var"//挂载的全局变量名 } };
开发模式
开发模式下主要读取apps.config.js中的devServer配置，主要是可以配置调试的入口JS文件与开发服务器监听的端口号。开发模式下会自动使用dev.html作为默认的HTML文件传输到浏览器中展示，譬如在模板项目中是将helloworld项目作为当前正在开发的项目，切换到项目目录下使用npm start，即可开启开发模式，此时在浏览器内打开http://localhost:3000即可看到运行效果
构建模式
对于应用中存在的多应用入口，主要是在apps.config.js中的apps下进行配置的，一个典型的应用配置为:
