概述：学习如何配置 Node、Babel 和 Webpack 来高效创建 React 应用。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文:http://www.w3cplus.com/react/setting-up-react-environment.html©w3cplus.com
注意：本文主要是针对原文中本人遇到问题的处理方式进行分享，如有不足之处希望指出。
一、开发工具概述
设置 React 开发环境，我们需要用到 Node.JS、Babel、Webpack 以及一款编辑器作为开发工具。
1. Node.JS
很长一段时间，JavaScript 只是为浏览器写代码。Node.js 改变了这一切，它允许我们用 JavaScript 编写可以运行在服务器上的应用程序，并且可以访问浏览器做梦都想不到的 API 和系统资源。它基本上是一个完整的应用程序开发运行时， 它的应用程序全部都是创建和运行在 JavaScript 上，而不是 Java、C#、C++ 等之上。
这里我们只是用 Node.js 来管理依赖，并且将 JSX 转换为 JavaScript 所需的步骤捆在一起。将 Node.js 当作是让开发环境工作的胶水。
2. Babel
Babel 是一个 JavaScript 转换器，它将 JavaScript 变成 JavaScript（现在是将高版本的 ES6/ES7 转换为 ES5）。这听起来有点古怪，所以我来澄清一下。如果我们在代码中使用最新的 JavaScript 功能，那么旧浏览器在遇到新的函数/属性时，是不认识的。如果代码中包含有 JSX，没有浏览器会知道要用它做什么！
Babel 所做的就是将你的新奇的 JS 或者 JSX 转换成大多数浏览器能理解的 JS 形式。我们已经用了浏览器内的版本来将 JSX 转换为 JavaScript。后面，你会看到我们如何将 Babel 集成为构建过程的一部分，来将 JSX 生成为浏览器能读的 JS 文件。
3. Webpack
我们要依赖的最后一个工具是 webpack，它是一个模块打包器。先把花哨的标题放一边，你的应用包含的很多框架和库有很多依赖，你所依赖的这些功能的不同部分可能只是一个较大组件的一个子集。
你可能不要要所有不需要的代码，而 webpack 这类工具会扮重要的角色，让你只包含让应用程序能工作所需的相关代码。它们经常把所有相关的代码（甚至来自不同源文件）打包为一个文件：
我们将依赖 webpack 把 React 库、JSX 文件和任何其它 JavaScript 的相关部分打包为一个文件。它还能扩展到 CSS（LESS/SASS）文件和应用程序所用的其它类型的素材，但是这里我们只关注 JavaScript。
二、项目目录
项目目录
三、问题处理
1、最后一步[创建和测试应用程序]的时候如果是Windows系统要注意命令用反斜杠:
解决方法：
[Mac上输入以下代码]：
./node_modules/.bin/webpack
[Windows应该这样]：
.\node_modules\.bin\webpack
------------------------------------------------------------------------------------------------------------------
2、执行出现Can't resolve 'babel'的错误：
babel错误
解决方法：
需要在webpack.config.js文件里修改babel的配置
loader:'babel',
//修改为：
loader:'babel-loader'
webpack-config.js源码
------------------------------------------------------------------------------------------------------------------
3、ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server
解决方法：
在终端/命令行提示符中输入：
npm install babel-core babel-loader--save-dev
网友评论