React 脚手架解析

Rsquo
477 阅读3分钟

一、React脚手架介绍

1.1 脚手架

  • 现在比较流行的三大框架都有属于自己的脚手架：

    • Vue的脚手架：@vue/cli
    • Angular的脚手架：@angular/cli
    • React的脚手架：create-react-app

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

  • 使用这些脚手架需要依赖什么呢？

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

1.2 Node环境

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

    • 无论是windows还是Mac OS，都可以通过node官网直接下载；

    • 官网地址：nodejs.org/en/download…

    • 注意：推荐下载LTS（Long-term support ）版本，是长期支持版本，会比较稳定

  • 本系列文章所用 node 版本为 16.15.1

1.3 React的脚手架工具

  • create-react-app

二、使用脚手架创建项目

2.1 创建项目

  • 安装脚手架

    • 在终端执行命令：npm install create-react-app -g
    • 查看版本：create-react-app --version
    • 注意：文章所用版本为 5.0.1

  • 创建React项目：

    • 终端执行命令：creat-react-app <fileName>

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

  • 运行项目：npm start

    image.png

2.2 目录结构的分析和PWA介绍

  • node_modules
    • 项目所需要的各种依赖
  • public
    • favicon.ico -- 应用程序顶部icon图标
    • index.html -- 应用的index.html入口文件
    • logo192.png -- 在manifest.json中被使用
    • logo512.png -- 在manifest.json中被使用
    • manifest.json -- 与web app配置相关
    • robots.text -- 指定搜索引擎可以或者不可以爬取那些信息
  • src
    • App.css -- App组件相关样式
    • App.js -- App组件代码文件
    • App.test.js -- App组件的测试代码文件
    • index.css -- 全局样式文件
    • index.js -- 整个应用程序的入口文件
    • logo.svg -- 启动项目时,所看到的React图标
    • reportWebVitals.js -- 默认帮我们写好的 注册pwa相关的代码
    • setupTests.js -- 测试初始文件
  • pwa是什么? (全称Progressive Web App，即渐进式WEB应用)
    • 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用
    • 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
    • 这种Web存在的形式，我们也称之为是 Web App
    • pwa可以将网页添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
    • pwa实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
    • pwa实现了消息推送

2.3 从零编写项目代码

  • index.js
import ReactDOM from 'react-dom/client'

import App from './App'

// 编写React代码，并且通过React渲染出来对应的内容
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
  • App.jsx
import React from "react";

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: "Hellp React Scaffold"
    }
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
      </div>
    )
  }
}

export default App
  • HelloWorld.jsx
import React from "react";

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h2>Hello World</h2>
        <p>你好，世界！</p>
      </div>
    )
  }
}

export default HelloWorld

2.4 脚手架中webpack配置

  • 查看webpack配置信息

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

      • 在终端执行命令：npm run eject

    • 这个操作是不可逆的，所以在执行过程中会给出提示：

    image.png
avatar
文章
阅读
粉丝