react脚手架的详细解析
1.前端工程的复杂化
-
1.如果我们只是开发几个小的demo程序 ，那么永远不需要考虑一些复杂的问题 :
- 比如目录结构如何组织划分;
- 比如如何管理文件之间的相互依赖;
- 比如如何管理第三方模块的依赖;
- 比如项目发布前如何压缩、打包项目;
- 等等…
-
2.现代的前端项目已经越来越复杂了 :
- 不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单;
- 比如css可能是使用less、 sass等预处理器进行编写,我们需要将它们转成普通的css才能被浏览器解析;
- 比如JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上干个文件中,我们需要通过模块化的技术来管理它们之间的相互依赖;
- 比如项目需要依赖很多的第方库,如何更好的管理它们(比如管理它们的依赖、版本升级等) ;
2.前端脚手架
-
1.现在的比较流行的三大框架都有自己的脚手架
- Vue的脚手架 ： Vue-cli
- Angular脚手架： angular-cli
- React脚手架： create-react-app
他们的作用都是办证过户我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。
-
2.那么使用这些脚手架需要什么依赖呢？
- 目前这些脚手架都是使用node编写的，并且都是基于webpack的
- 所以我们必须在自己的电脑上安装node
3.安装node（这个对于学习ract的学生直接跳过了吧）
+ 官网下载node cmd中 node -V 查看是否安装ok
4.包管理工具（npm && yarn）
+ React脚手架默认使用yarn
+ 全局安装yarn
5.安装脚手架
+ npm install -g create-react-app
+ 创建项目 create-react-app + 项目名称（项目名中不能有中文）
6.react文件目录
