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