三、React脚手架解析

lenjstlp
238 阅读4分钟

一、认识脚手架工具

前端工程的复杂化

  • 如果只是写几个demo，没啥复杂的
    • 如目录结构如何组织划分
    • 如怎样管理文件之间的相互依赖
    • 如怎样管理第三方模块的依赖
    • 如项目发布前如何压缩、打包项目
    • 等...
  • 现在前端项目已经越来越复杂了
    • 不会再是html文件中引入几个css文件，引入几个编写js文件或者第三方js文件这么简单了
    • 如css可能使用less、sass等预处理器进行编写，需要将它们转换成普通css，才能被浏览器解析
    • js不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，需要通过模块化的技术来管理它们之间的相互依赖
    • 如项目需要依赖很多的第三方库，如何更好的管理它们(管理它们的依赖、版本升级等)
  • 需要学习新的工具
    • 如babel、webpack、gulp，配置它们转换规则、打包依赖、热更新等一些内容
    • 脚手架等出现，就是帮我们解决这一系列问题的

脚手架是什么？

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

二、create-react-app

前端脚手架

  • 对于现在比较流行的三大框架都有属于自己的脚手架
    • Vue脚手架：@vue/cli
    • Angular的脚手架：@angular/cli
    • React的脚手架：create-react-app
  • 它们的作用都是生成一个通用的目录结构，并且已经将我们需要的工程环境配置好
  • 使用这些脚手架需要依赖什么呢？
    • 目前这些脚手架都是使用 node 编写的，并且都基于 webpack
    • 必须安装node环境

安装node

  • React脚手架本身需要依赖node
    • 无论mac/window都可以通过node官网直接下载
    • nodejs.org/en/download
    • 推荐下载LTS(Long-term support)版本，长期支持版本，比较稳定
  • Nodejs是一个基于Chrome V8引擎的JavaScript运行时环境

安装create-react-app

  • 命令如下
npm install -g create-react-app

create-react-app --version // 5.0.1

三、创建React项目

创建React项目

  • 通过脚手架来创建React项目
  • 命令如下
    • 项目名称不能包含大写字母
    • create-react-app 项目名称
  • 创建完成后，进入对应的目录，将项目跑起来

目录结构分析

  • 通过VSCode打开项目

react目录结构.png

了解PWA

  • pwa相关概念
    • PWA(progressive Web App)，即渐进式WEB应用
    • 一个PWA应用首先是一个网页，可以通过Web技术编写出一个网页应用
    • 随后添加上App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
    • 又称为 Web App
  • PWA解决的问题
    • 可以添加到主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
    • 实现离线缓存功能，及时用户手机没有网络，依然可以使用一些离线功能
    • 实现了消息推送
    • 等等一系列类似 Native App 相关的功能
  • developer.mozilla.org/zh-CN/docs/…

编写代码

  • 在src目录下，创建一个 index.js 文件，因为这是 webpack 打包的入口
  • 在index.js中开始编写React代码
    • 在模块化开发中，需要手动导入React、ReactDOM，因为它们都在安装的模块中
  • 如果不希望直接在 root.render 中编写过多的代码，就可以单独抽取一个组件 App.js

四、webpack的配置

脚手架中的 webpack

  • React脚手架默认是基于webpack来开发的
  • 但是目录中并没有看到任何的webpack相关的内容
    • React脚手架将webpack相关的配置隐藏起来了(从Vue CLI3开始，vue进行了隐藏)
  • 如果我们希望看到webpack的配置信息
    • 执行一个 package.json文件中的一个脚本："eject":"react-scripts eject"
    • 该操作不可逆，执行过程中会提示
      • npm run eject

五、从零编写代码

src/index.js

import ReactDOM from 'react-dom/client'
// 编写react代码，通过react渲染出来对应的内容
import App from './App'

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App />)

src/App.jsx

import React from 'react'

import HelloWorld from './components/HelloWorld'

class App extends React.Component {
    constructor () {
        super()
        this.state = {
            msg: 'Hello React'
        }
    }
    render () {
        const { msg } = this.state
        return (
            <div>
                <h1>{msg}</h1>
                <HelloWorld />
            </div>            
        )
    }
}

export default App

src/components/HelloWorld.jsx

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return (
            <div>
                <h2>Hello World</h2>
            </div>
        )
    }
}

export default HelloWorld
avatar
文章
阅读
粉丝