React -05react脚手架解析

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文件目录