创建React项目以及规范目录结构

刚开始工作的时候，没有自己总结的习惯；每次都是要写一个项目的时候就去网上找找，官网翻翻。官网描述得很详细，可能写了多种方案，但是对于我们来说，取舍一种就可以了，所以每次去翻一遍都要看到一大堆东西。现在想养成自己总结的习惯。一方面，如果实在不记得就可以翻翻自己的博客，按照上面写的过程来就可以了，因为是自己一贯使用的，不会有多余的东西；另一方面，如果能通过自己总结，印象更深刻记得牢固了，以后就不用过来翻博客了那就再好不过了。

创建react项目

1.环境安装

node，npm安装啥的不想多说了，这个一般安装一次就可以永久使用了。除非偶尔需要升升级，也不碍事。

2.初始化项目

//以下两种方式创建的项目一样
npx create-react-app my-app
或
npm init react-app my-app

是不是觉得这两个东西长得很像？对于我这种记性差的人来说是真的分不清楚，尤其是还学了vue-cli的初始化以后；所以我们就得靠理解来记忆了。

npx create-react-app my-app

用npx创造(create)一个react应用(react-app)，然后后面是你的项目名称

npm init react-app my-app

用npm初始化(init)一个react应用(react-app)，然后后面是你的项目名称

---

咦？一开始运行就给我报了个错？

name can no longer contain capital letters，翻译过来就是名称不能包含大写字母，为什么呢？可以参考一下阮一峰老师的为什么文件名要小写。

---

3.项目运行

这个时候不做任何改动，也可以运行项目；打开出现的是react初始化界面，一个很大的log图片。说明项目的创建已经成功了。

npm start 
或
yarn start

4.修改文件

src的初始目录是这样的，删掉多余的文件和导入；

index.js

App.js

然后自己创建需要的文件夹，不需要用的省略掉。

目录详解

assets：放置原始资源文件。

components：存放全局组件。

contants：常量文件夹，存放常量。

i18n：i18n国际化，各种语言的翻译。

pages：页面文件夹。

router：路由文件夹。

utils：存放一些常用函数的封装。

5.项目打包

运行下面的命令，然后把打包生成的dist文件夹里的内容放到线上就OK啦。中间省略掉的一些配置过程就涉及到webpack的内容啦，这里不多讲。

npm run build 
或
yarn build

npm init和npx

1.npm init

npm init会根据你要创建的项目，生成一个pakeage.json文件；这个文件用来记录项目最基本的依赖包，npm会读取package.json中列出来的依赖包，然后自动安装这些依赖包。如果后续要增加依赖就使用命令npm install或yarn add手动安装。npm还可以通过配置pakeage.json简化操作命令。

2.npx

安装npm@5.2.0及以上版本，会自动安装npx；你可能目前只想进行一次create-react-app操作，使用npx避免了全局安装create-react-app。关于npx的理解和使用，可以参考npx 使用教程

npx create-react-app my-app

其实相当于做了如下操作，是其简化版，但是又避免了全局安装；

//初始化npm
npm init

//安装create-react-app
npm install -g create-react-app

//使用create-react-app
create-react-app my-app