React脚手架的介绍和环境的搭建

林夕HT
170 阅读4分钟

认识脚手架工具

  • 帮我们可以快速生成项目的工程化结构:
    • 每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的;
    • 既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板
    • 不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可;
    • 这样也可以间接保证项目的基本机构一致性，方便后期的维护:
  • 脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷:
  • Vue的脚手架:@vue/cli
  • Angular的脚手架:@angular/cli
  • React的脚手架:create-react-app简称（CRA）

作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。

  • 目前这些脚手架都是使用node编写的，并且都是基于webpack的;
  • 所以我们必须在自己的电脑上安装node环境:

create-react-app

Create React App (create-react-app.dev)

先要配置环境Node.js (nodejs.org)14.x+ node以上

  • 全局安装npm install create-react-app -g 全局安装
  • 安装完成后可以 create-react-app --version 查看版本号确定是否安装完成
若是npm镜像源地址过慢可以切换依赖地址
  1. 查看当前镜像源地址npm get registry
  2. 设置淘宝镜像源地址npm config set registry http://registry.npm.taobao.org/
  3. 设置镜像源地址npm config set registry https://registry.npmjs.org/新：npm config set registry https://registry.npmmirror.com
  4. 恢复默认镜像地址 删除会恢复默认镜像npm config delete registry

创建React项目

  • 创建React项目的命令如下:create-react-app 项目名称
    • 注意：项目名称不能包含大写字母
  • 创建完成后进入目录运行
cd 项目名称
npm start

目录结构

目录结构.jpg 新增了reportWebVitals.js文件，内容如下：

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

这个webVital是Google提出的、检测用户体验的标准，这些指标包含三个关键指标（CLS、FID、LCP）和两个辅助指标（FCP、TTFB）。具体含义如下（参考链接）：

  • LCP (Largest Contentful Paint)：最大内容渲染时间。指的是从用户请求网址到窗口中渲染最大可见内容所需要的事件（最大可见内容通常是图片或者视频，或者大块的文本）。

  • FID (First Input Delay):首次输入延迟。指的是从用户首次与网页互动（点击链接、按钮等）到浏览器响应此次互动直接的时间。用于判断网页进入互动状态的时间。

  • CLS (Cumulative Layout Shift) :累计布局偏移，得分范围0-1，指的是网页布局在加载期间的偏移量，0表示没有偏移，1表示最大偏移，这个指标指示用户与网站的交互体验，如果网址在加载过程布局一直跳动，用户体验会很差。比如加载一张图片，但没有大小空白占位，导致图片显示时页面高度跳动。

  • FCP(First Contentful Paint)首次内容绘制。标记浏览器渲染来自 DOM 第一位内容的时间点，内容可能是文本、图像等元素。

  • TTFB (Time to First Byte) 首字节到达的时间点。

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

更多PWA相关的知识

webpack的配置

  • React脚手架默认是基于Webpack来开发的；
  • 但是，很奇怪：我们并没有在目录结构中看到任何webpack相关的内容
    • 原因是React脚手架将webpack相关的配置隐藏起来了（其实从Vue CLI3开始，也是进行了隐藏）；
  • 如果我们希望看到webpack的配置信息
    • 我们可以执行一个package.json文件中的一个脚本："eject": "react-scripts eject"
    • 这个操作是不可逆的，所以在执行过程中会给提示； npm run eject进行操作
avatar
文章
阅读
粉丝