设置React开发环境

　

一、设置初始项目结构

　　创建自己的项目：mytotallyawesomeapp

　　新建dev文件，此文件会放入所有没有优化、没有转换的 JSX、JavaScript 和其它脚本相关的内容。换句话说，这里要存放你正在写的和实际工作的代码。

　　新建output文件，我们会把在 dev 文件中的脚本文件上运行各种构建工具的结果放在这里。在这里 Babel 会将所有 JSX 文件转换为 JS。这也是 Webpack 解析脚本文件之间的任何依赖，将所有重要的脚本内容放入一个JavaScript 文件的地方。

　　新建一个index.html文件，引入：<script src="output/myCode.js"></script>js文件

二、安装和初始化 Node.js

　　nodejs  安装命令

　　node -v检查是否安装成功

　　进入到自己的项目文件：E盘的matotallyawesomeapp(E:enter)-->cd mytotallyawesomeapp

　　在自己的文件夹中初始化nodejs：npm init

　　根据提示有内容输入内容，无内容直接enter就行了

　　这时在自己的项目文件中会生成一个package.json文件，这就是项目的入口文件

三、安装 React 依赖

　　命令行键入：npm install react react-dom --save

　　最终生成 一个node_modules文件夹

四、在 dev 文件夹中，使用代码编辑器，创建文件 index.jsx

     

这段代码相对   之前是用 script 应用把 React 和 React DOM 库放到应用中，现在是替换为用 import 语句指向前面添加的 react 和 react-dom node.js 包：

最终我们要的结果是：把 dev 文件夹中的index.jsx 变成 output 文件夹中的 myCode.js  在代码构建的时候将jsx转化为浏览器认识的js，而不是之前那样在渲染的生成影响性能


五、将 JSX 转换为 JavaScript

1）安装webpack和babel，这两者都是作为nodejs的包存在
　 命令行键入：$ npm install webpack -g

   或者：npm install webpack --save   这个命令把依赖写入 package.json 包，这样更人性化

   安装完成后 在根目录下添加webpack.config.js 配置文件来指定 webpack 如何处理当前项目