React | React脚手架解析

coderHing[专注前端]

已于 2023-04-23 13:02:53 修改

阅读量814

点赞数

文章标签： react.js javascript 前端前端框架 react

于 2023-04-23 13:01:31 首次发布

本文链接：https://blog.csdn.net/coderHing/article/details/130319247

版权

✨ 个人主页：CoderHing

🖥️ React.js专栏：React脚手架解析
🙋‍♂️ 个人简介：一个不甘平庸的平凡人🍬

💫 系列专栏：吊打面试官系列 16天学会Vue 11天学会React Node专栏

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力！❤️

一、认识脚手架工具

前端工程的复杂化

如果我们只是开发几个小demo,那么就不需要考虑这些问题:
- 目录结构如何组织划分,
- 如何管理文件之间的相互依赖
- 如何管理第三方模块依赖
- 项目发布前的压缩,打包
- 等...
现代的前端项目越来越复杂化
- 不会再是HTML引入css,引入几个js或者第三方js那么简单
- 如css可能是less,scss等预处理器,我们需要将其转换成普通的css才能被浏览器解析
- 如JavaScript代码不再只是编写在几个文件中,而是通过模块化的方式,被组成在成百上千的文件中,需要通过模块化的技术来管理他们之间的相互依赖
- 如项目需要依赖的第三方库,如何更好的进行管理(版本升级等..)
为了解决上面的问题,我们需要去学习一些工具
- 如babel,webpack,gulp,配置他们转换规则,打包依赖,热更新等一些内容
- 脚手架的出现是帮助我们解决这一系列问题的

脚手架是什么?

传统的脚手架指的是建筑学的一种结构:在搭建楼房,建筑物时,临时搭建出来的一个框架
编程中的脚手架(Scaffold),其实是一种工具,帮助我们快速生成项目的工程化结构
- 每个项目完成的效果不同,但是他们的基本工程化结构是相似的
- 既然相似,就没必要去从零进行开发,完全可以使用一些工具,帮助我们生产基本的工程化模板
- 不同的项目,在这个模板的基础上进行项目开发或进行一些配置的简单修改即可
- 这样也可以间接保证项目基本结构一致,方便后期的维护
脚手架让项目从搭建到开发,再到部署,整个流程变得快速和便捷

前端脚手架

对于现在比较流行的三大框架都有属于自己的脚手架:
- Vue的脚手架: @vue/cli
- Angular的脚手架: @angular/cli
- React的脚手架:create-react-app(CRA)
他们的作用都是帮助我们生成一个通用的目录结构,并且将我们所需的工程环境配置好.
使用这些脚手架需要依赖什么呢?
- 目前这些脚手架都是使用node编写,并且都是基于webpack的
- 所以我们必须在电脑上安装node环境

二、create-react-app

安装node

React脚手架本身需要依赖node,所以我们需要安装node环境
- 无论是windows还是mac OS 都可以通过node官网直接进行下载
- 这里推荐使用LTS版本,是长期支持版本,比较稳定

三、创建React项目

创建React项目

创建React项目的命令如下:
- 注:项目名称 不能包含大写字母
- 另外还有更多创建项目的方式,可参考github的Readme
  - create-react-app 项目名称
创建完成之后,进入对应的目录,就可以将项目跑起来:

目录结构分析

我们可以通过VSCode打开项目:

- public
-- favicon.ico // 应用程序顶部的icon图标
-- index.html // 应用的index.html入口文件
-- logo192.png // 在manifest.json中使用
-- logo512.png // 在manifest.json中使用
-- manifest.json // 和web app配置相关
-- robots.txt // 指定搜索引擎可以或者无法爬取哪些文件
- src
-- App.css // App组件相关样式
-- App.js // App组件代码文件
-- App.test.js // App组件的测试代码文件
-- index.css // 全局样式文件
-- index.js // 整个应用程序的入口文件
-- logo.svg // 启动项目所看到的React图标
-- reportWebVitals.js // 发送一些包之类的东西
-- setupTests.js // 测试初始化文件
- package.json // 对整个应用程序的描述:包括应用名称,版本,依赖包,及项目启动,打包等.
- README.md // readme说明文档

了解PWA

整个目录结构都非常好理解,只是有一个PWA相关的概念:
- PWA全程Progressive Web App 即 渐进式WEB应用
- 一个PWA应用首先是 一个网页 可以通过Web技术编写出一个网页应用
- 随后添加上 App Manifest 和 Service Worker 来实现PWA的 安装和离线 等功能
- 这种Web存在的形式,也称之为是Web App
PWA解决了哪些问题?
- 可以添加至主屏幕,点击主屏幕图标可以实现启动动画及隐藏地址栏
- 实现离线缓存功能,用户手机没网,依然可以使用一些离线功能
- 实现消息推送
- 等一系列类似于 Native App相关的功能

四、webpack配置

脚手架中的webpack

React脚手架默认是基于Webpack来开发的
但是,很奇怪,我们并没有在目录结构中看到任何webpack相关的内容?
- React脚手架将webpack相关的配置隐藏起来了
如果我们希望看到webpack的配置信息,应该怎么做?
- 可以执行一个pack.json文件中的一个脚本: "eject": "react-scripts eject"
- 这个操作是不可逆的,所以执行过程中会给我们提示
- npm run eject