React学习笔记 --- React脚手架

已注销
2,534 阅读9分钟

一 、 脚手架的作用

1.1 为什么需要脚手架

根本原因: 前端项目的复杂化

  • 不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单；
    • 需要引入的css文件和js文件增多
    • 引入的css和js可能还需要在引入别的css和js文件
  • 比如css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析
  • 比如JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化的技术来管理它们之间的相互依赖；
  • 比如项目需要依赖很多的第三方库，如何更好的管理它们（比如管理它们的依赖、版本升级等）；
  • 项目中可能会需要使用如babel、webpack、gulp。配置它们转换规则、打包依赖、热更新等等一些的内容，相对比较复杂

脚手架（Scaffold），本质上就是软件项目的模板， 其对软件项目中的通用目录结构进行了配置，同时对常用的构建工具和第三方依赖进行了配置，我们只需要在其基础上进行扩展开发和修改即可，不需要在从0搭建，节约了开发成本和时间

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

1.2 常见的脚手架工具

  1. Vue的脚手架：vue-cli
  2. Angular的脚手架：angular-cli
  3. React的脚手架：create-react-app

cli --- command line interface --- 命令行界面

1.3 脚手架工具需要的依赖

  1. 目前市面上常见的脚手架都是使用node编写的，并且都是基于webpack的，所以需要安装node

  2. 可能在国内安装npm包的时候，因网络问题会导致安装有可能安装不上，此时可以考虑类似于cnpm,nrm等工具来帮助我们进行下载源的切换

  3. 一些脚手架（例如 create-react-app）使用的包管理工具是yarn，所以需要对yarn进行安装

    推荐全局安装yarn 以便于使yarn成为一条全局的命名行命名

  4. 一些脚手架工具（例如 create-react-app）需要进行全局安装，所以需要事先对其进行全局安装，或者在命令上前加上npx进行临时安装

二 、包管理工具

2.1 npm

  • 全称 Node Package Manager，即“node包管理器”；
  • 作用肯定是帮助我们管理一下依赖的工具包（比如react、react-dom、axios、babel、webpack等等）；
  • 作者开发的目的就是为了解决“模块管理很糟糕”的问题

2.2 yarn

  • Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具；
  • Yarn 是为了弥补 npm 的一些缺陷而出现的；
  • 早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；
  • 虽然从npm5版本开始，进行了很多的升级和改进，并添加了npx，但是依然很多人喜欢使用yarn；
  • yarn

三、 脚手架的基本使用

# 新建一个新的React的项目
# Tips: react的脚手架项目名不可以存在大写字母，多个字母之间可以使用下划线或中划线（推荐）来进行划分
$ create-react-app react-scaffold

在创建完react脚手架项目后，可以使用npm start命令来运行脚手架，在运行成功后

  1. 在本地开启一个服务，运行对应的项目，并自动开启默认浏览器来运行和显示对应的页面
  2. react项目的默认运行在3000端口上，如果开启了多个脚手架项目，其端口号会依次进行递增操作
  3. react脚手架项目默认是使用yarn这个包管理工具进行包的管理和维护的

d2YcDg.png

# 启动脚手架
$ cd 项目名

# 这里的start 本质上是package.json中script字段胡中配置的脚本
# 其本质上是使用了react-scripts 这个工具来启动，构建，测试整个脚手架项目的
$ yarn start

四、 脚手架的目录结构

d2dZTg.png

备注：
	1. `node_modules`目录是`npm/yarn`来管理和维护第三方包的目录结构，其中存放了我们在开发过程中和react脚手架中所需要的使用到的第三方依赖，及这些第三方依赖需要使用到的其它依赖，一般通过`yarn/npm命令`来进行维护和管理，不需要我们手动对其进行操作
	
	2. `yarn.lock/package-lock.json文件`: 在`package.json`中存放的是我们`开发和生产`过程中的`直接依赖`，但是这些直接依赖的版本不是直接固定的，而是可变的，例如`^10.2.2`,就是可以匹配中版本号，其会匹配到`minor的最高版本`（例如^3.x.x,其在下载和更新包的时候，会自动去匹配3.x.x中的最新版本，但是不会匹配到大于等于4.0.0的版本）。而此时 `yarn.lock/package-lock.json文件`中就存放着我们实际所下载的那个`第三方依赖`的具体版本号，以及`这个第三方依赖`所依赖的其它依赖和它们的版本规则，这个文件我们一般也不对其进行手动修改
	
  3. `mainifest.json`和`serviceWork.js`主要是使用在`PWA`中的,`mainifest.json`主要用于`PWA`中关于`Web APP的一些项目配置`，`serviceWork.js`主要用于`PWA`中关于`Web App`中的`关于离线缓存功能的使用`
  	 注意： 在`React`的脚手架中默认是关闭`离线存储`这个功能的，如果需要使用，需要`手动配置，打开离线缓存功能`
  	 
  4. `src/index.js`是整个脚手架项目的入口文件，所有的代码都是从这个文件开始执行
  	 `public/index.html`是整个脚手架显示界面的主文件
  	 
  5. 脚手架项目中的`logo192.png`,`logo512.png`文件是在`web app`中对不同尺寸的机型进行`logo适配`的文件，所以如果项目中没有使用到`Web app`, 那么和`web app`相关的代码和文件应该被移除。

d20dL6.png

由上图可见，React默认是不开启离线缓存的，如果需要开启离线缓存，需要将unregister方法修改为register方法

五、 webpack简介

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)；

  • 模块 --- 现代前端项目都是使用模块化的方式进行组织和编写的，但是一些老版本的浏览器还是不支持模块化写法的，此时就需要使用一些工具将模块化编写的各个js代码组织起来，转换为浏览器可以识别的代码
  • 打包 --- 在项目上线之前，需要对项目的代码进行丑化，压缩处理或者将sass,less编写的代码编译为原生的JS代码，或者将多个文件合并位一个文件等等相关的操作，此时就需要构建工具来帮助我们进行打包（bundle），以便于我们可以直接将打包后的文件直接放到服务器中进行部署

总结: webpack这一类的构建工具使我们可以在开发的时候使用任何我们喜欢的方式去编写对应的代码，因为webpack会将我们的代码进行打包和优化操作，以提升编代码的性能和兼容性

ps:

  1. 默认情况下，wepback只能打包编译js类型的文件，所以在使用webpack进行构建的工具，其js文件的后缀名默认是可以省略不写的

  2. 使用webpack打包的项目，如果修改的是src下的源代码的时候，是可以被webpack监控到的，其会自动对浏览器界面进行热更新操作

    但是如果修改的是webpack的配置文件，此时就需要重新启动webpack项目，以便于webpack读取到新的配置文件

5.1 React中的webpack

在React脚手架中，我们并没有在目录结构中看到任何webpack相关的内容

  • 原因是React脚手架讲webpack相关的配置隐藏起来了（其实从Vue CLI3开始，也是进行了隐藏）；

  • 如果希望看到webpack的配置信息

    • 我们可以执行一个package.json文件中的一个脚本："eject": "react-scripts eject"

      • 注意： 显示eact脚手架中的webpack的配置这个操作是不可逆的，所以在执行过程中会给与我们提示

        d2yXIf.png

        d2yzRg.png

        可以看到的是在显示webpack配置后的React脚手架中发生了一些变化

        1. 多出了script和config文件夹

        2. package.json中的内容发生了改变

          2.1 package.json中的依赖变多了

          2.2 package.json中的`script``字段内容发生了改变

          ​ 在显示前使用的是React-Scripts来进行的命令操作

          ​ 在显示后使用的是node来调用script目录下对应的JS文件来实现对应的操作

六、 React脚手架的简单使用

需求： 在界面中输出Hello React

// 在这里虽然没有显示调用React，但是JSX最后会被转换为React.createElement的方式去执行
// 所欲在这里依旧需要引入React
import React from 'react'
// 在这里使用了ReactDOM的render函数，所以需要引入react-dom
import ReactDOM from 'react-dom'

// 这里编码方式和之前类似
// 在这里会自动将其和index.html关联起来
// 所以document.getElementById('root')会自动去public/index.html中找id为root的元素进行挂载
ReactDOM.render(<h2>Hello React</h2>, document.getElementById('root'))

使用函数组件的方式去上述代码进行修改

App.js

// import React from 'react'
// import { Component } from 'react'

// 上面2句代码可以简写为
// 这里依旧需要使用React ---- JSX编译后形成React.createElement的形式来调用
// Componet是从React中解构出来的
import React, { Component } from 'react'

// 模块化编码中只有先导出，外部才可以引入
// 每一个js文件都是一个独立的作用域，如果不暴露（导出），那么外部是无法使用其内部代码
export default class App extends Component {
    constructor() {
        super()

        this.state = {
            msg: 'Hello React'
        }
    }


    render() {
        return (
            <h2>
            { this.state.msg }
            </h2>
        )
    }
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'

// 导入后才可以使用App组件
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

补充

PWA

  • PWA全称Progressive Web App，即渐进式WEB应用；
  • 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；
  • 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
  • 这种Web存在的形式，我们也称之为是 Web App

PWA的主要功能

  1. 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
  2. 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能；
  3. 实现了消息推送
  4. 可以实现一系列类似于Native App相关的功能；

上一篇 JSX的本质 下一篇 组件化开发

avatar
文章
阅读
粉丝