React安装及目录结构

构建React项目的几种方式：

• 构建：create-react-app 快速脚手架
• 构建：generator-react-webpack
• 构建：webpack一步一步构建

这里我们create-react-app 快速脚手架构建项目。
优缺点：React项目构建的几种方式

---

一、安装

1、安装cnpm

---

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ sudo npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

2、安装react

---

使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目my-app，并启动：

//创建项目
$ sudo cnpm install -g create-react-app
$ sudo create-react-app my-app

//启动项目
$ cd my-app/
$ sudo npm start

然后在浏览器中打开 http://localhost:3000/ ，即可。

---

现在很多人也用一个新的包管理工具yarn，来安装。
这里把npm和yarn做下对比：

//安装模块
> npm install lodash
> cnpm install lodash
> yarn add lodash

//启动项目
> npm start
> cnpm start
> yarn start

//构建项目
> npm run bulid
> cnpm run bulid
> yarn build

---

二、目录结构

---

• node_modules： 该文件夹是项目所有依赖包的存放地址，除了在项目初始化时安装的所必须的依赖包之外，我们后续通过yarn/npm安装的包都存放在该目录下。
• package.json：项目的配置文件
• public：里面的index.html为项目的入口文件
• src：模块与组件的存放目录。里面包含了我们使用的js文件，css文件，img文件等等。其中src里的index.js是项目的js入口文件，它与public文件夹里的index.html相对应。

注：若用yarn安装，会有yarn.lock文件，它是依赖包的描述文件。

---

三、webpack

（1）webpack编译打包项目

> npm run build 

（2）webpack配置文件
脚手架虽然封装了webpack，但默认配置文件是不开放的。
所以现在生成webpack的配置文件：

> npm run eject