ReactP5_React脚手架的详解

最新推荐文章于 2024-05-23 09:31:27 发布

dauntless1310

最新推荐文章于 2024-05-23 09:31:27 发布

阅读量542

点赞数

分类专栏： react学习文章标签： reactjs

本文链接：https://blog.csdn.net/dauntless1310/article/details/108431098

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ReactP5_脚手架的详解

React脚手架

这边是react学习笔记，期间加入了大量自己的理解，用于加强印象，若有错误之处还请多多指出

脚手架介绍相关的东西感觉要讲的太多，但是又好像都是些无关紧要的东西，就顺着课堂思路写吧

React脚手架

背景

前端复杂化

内部各文件之间引用依赖关系的复杂化：比如各种css，js，第三方代码调用
多种预处理文件编写和解析的复杂化：比如less，sass
复杂内容的模块化开发管理需要
各种外部库文件的升级更新、管理调用等等

脚手架的作用就是让项目从搭建到开发，再到部署，整个流程变得快速和便捷

前端脚手架

现在比较流行的三大框架脚手架：

Vue：vue-cli（会，感觉学起来很方便）
Angular：angular-cli （完全不会，也不想碰）
React：create-react-app （至今的感觉来看，感觉相对vue-cli来看复杂很多，不知道学会hooks之后感觉如何）

主要作用：生成一个通用的目录结构，配置所需的工程环境

目前这些脚手架都是使用node编写的，并且都是基于webpack的

所以我们必须在自己的电脑上安装node环境

这里我们主要是学习React，所以我们还是以React的脚手架工具：create-react-app作为讲解

安装node

React脚手架本身依赖node，所以需要安装node环境

官网安装地址：https://nodejs.org/en/download/

注意：这里推荐大家下载LTS（Long-term support ）比较稳定

下载选择

包管理工具（npm，yard）

npm

全称 Node Package Manager，即“node包管理器”

帮助我们管理依赖的工具包（比如react、react-dom、axios、babel、webpack等等）
yarn：

Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具

是为了弥补 npm 的一些缺陷而出现的

React脚手架默认也是使用yarn

脚手架安装

在国内，某些情况使用npm和yarn可能无法正常安装一个库，这个时候我们可以选择使用cnpm

在终端中执行代码：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装创建React项目的脚手架：

在终端中执行代码：npm install -g create-react-app

安装成功与否使用–version关键字来检查（一开始我nt了用了自己真名，就打个马赛克吧）

安装成功提示

创建React项目

创建React项目的命令如下：

终端命令：create-react-app [项目名称]

注意：项目名称不能包含大写字母

创建完成后，进入对应的目录，就可以将项目跑起来：

终端命令：cd [项目文件]
进入项目生成的文件之后执行

终端命令：yarn start

成功执行之后会弹出一个页面并且终端显示如下内容：

终端内容
显示页面
其中，执行默认的端口是3000，

顺便提一下其中的一个小插曲，我的默认浏览器一直都是IE，并且在设置成chrome的时候会产生一个闪退的问题，原因是腾讯管家里面有一个浏览器保护，把默认浏览器锁定在了IE，需要在腾讯管家中去改掉默认的浏览器或者是解锁之后再到windows设置里面去改变默认浏览器。

目录结构

PWA（此处我只做了解）

概念：

PWA全称Progressive Web App，即渐进式WEB应用

PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用

随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决问题

可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏

实现离线缓存功能，使用离线功能

消息推送