React脚手架详解+安装

什么是脚手架？

传统的脚手架指的是建筑学的一种结构：在搭建楼房、建筑物时，临时搭建出来的一个框架。

​脚手架编程中提到的脚手架（Scaffold），其实是一种工具，帮我们可以快速生成项目的工程化结构；

- 每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的；

- 既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板；

- 不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可； - 这样也可以间接保证项目的基本结构一致性，方便后期的维护；

总结

总结：**脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷；**   对于现在比较流行的三大框架都有属于自己的脚手架： - Vue的脚手架：vue-cli - Angular的脚手架：angular-cli - React的脚手架：create-react-app   它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。   使用这些脚手架需要依赖什么呢？ - 目前这些脚手架都是使用node编写的，并且都是基于webpack的； - 所以我们必须在自己的电脑上安装node环境； 这里我们主要是学习React，所以我们还是以React的脚手架工具：create-react-app作为讲解；

如何安装脚手架

说明

在今后使用脚手架创建项目的时候，首先需要安装脚手架，通过安装好的脚手架再去创建React项目。 - 全局安装 - 命令  

安装脚手架

注意：创建项目，需要安装脚手架  npm install -g create-react-app

创建项目

 create-react-app react-app（ react-app为项目名称）

运行项目

 命令是：`npm start ` 。 ​   需要注意的是：需要打开到项目的所在位置，并且进入项目    cd   项目名称    npm start 启动项目

以上就是脚手架的安装方法

文件说明

1. public ---- 静态资源文件夹        

favicon.icon ------ 网站页签图标        index.html -------- 主页面         logo192.png ------- logo图         logo512.png ------- logo图         manifest.json ----- 应用加壳的配置文件         robots.txt -------- 爬虫协议文件​

2. src ---- 源码文件夹      

  App.css -------- App组件的样式        App.js --------- App组件       App.test.js ---- 用于给App做测试        index.css ------ 样式         index.js ------- 入口文件         logo.svg ------- logo图         reportWebVitals.js  --- 页面性能分析文件(需要web-vitals库的支持)         setupTests.js   ---- 组件单元测试的文件(需要jest-dom库的支持)