React学起来也真是的挺麻烦的,给你脚手架,你也得
eject
后按需去修改,更别提一堆的配置了......
当然,这只是我的牢骚,还是乖乖写笔记吧。
-
基础使用
我比较偷懒,就直接上脚手架了,这里我选择的是官方的create-react-app
这个脚手架。
create-react-app
其实就是一个命令,安装很简单,终端输入命令:
npm install -g create-react-app
待安装完毕后,就可以直接cd
到你想要创建项目的目录,例如我要创建一个叫myApp
的项目,就输入命令:
create-react-app myApp
稍等片刻,即可创建一个完整的项目环境,如果要运行该项目,就cd
到项目文件夹根目录下,输入命令:
npm start
即可启动项目,浏览器自动开启页面。
而且用脚手架的好处就是,不需要我们自己再去一次次的打包运行,只要代码有修改,浏览器中的页面就会自动刷新。
-
目录下文件结构
项目文件夹根目录下ls
可以看到:
1、浏览器自动打开的HTML页面,默认在
项目路径/public/index.html
里面。2、由于JSX的语法,所以,实质上渲染页面的地方默认在
项目路径/src/index.js
里,修改页面就在这里修改即可,当然,这只是在学习的时候这么做,实际项目里,要考虑整体文件结构。3、项目整体配置信息,就在
项目路径/package.json
中。4、如果想要自己配置webpack或者其他设置,就要执行命令:
npm run eject
来弹出脚手架帮我们隐藏的配置文件。(过程中要选择输入y/N
分别来确认y
或取消N
操作,因为这个操作是单向,不可逆的)
-
Eject之后的目录下文件结构
多了两个文件夹:config
&scripts
1、config
文件夹下主要是webpack
的详细配置文件,一般不需要修改。
2、 scripts
文件夹下的几个js文件其实就是实际执行我们npm run
命令的的配置,一般也不需要需改。
现在我们再回来看看package.json
文件,东西多了很多依赖,之前都是封装在react-scripts
内部的,而现在可以自己去配置了。
关于脚手架就先说这些吧,这篇文章只是我这只小菜鸟的笔记,很多地方没细讲,有没说清楚的地方可以留言提问,小弟尽量帮忙;或者文中有说错的地方,也可以留言指导,小弟虚心接受~
网友评论