React学习 --- React脚手架

coderklaus
339 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

脚手架(Scaffold)，其实是一种工具，帮我们可以快速生成项目的工程化结构

  • 每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的
  • 既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板
  • 不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可
  • 这样也可以间接保证项目的基本结构一致性，方便后期的维护

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

脚手架是帮助我们生成一个通用的目录结构（项目模板），并且已经将我们所需的工程环境配置好

React也是有自己脚手架的，也就是create-react-app

react scaffold 默认使用的包管理工具是 yarn

react的脚手架默认情况下，就已经交由git仓库进行管理

# 安装yarn
$ npm install -g yarn

# 安装react脚手架
$ npm install -g create-react-app

# 创建项目
# react的项目名称命名方式和npm包名命名规则是一致的
# 项目名称不能包含大写字母，多个单词之间推荐使用中划线进行连接
$ create-react-app <项目名称>

# 创建完成后，进入对应的目录，就可以将项目跑起来
$ cd <项目名称>
$ yarn start
# 启动的项目默认运行在3000端口上，如果开启了多个项目，端口号会依次递增1

目录结构

IpKDKQ.png

PWA

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

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

随后添加上 App Manifest（PWA的配置文件） 和 Service Worker (PWA的逻辑脚本)来实现 PWA 的安装和离线等功能

这种Web存在的形式，我们也称之为是 Web App

PWA的功能:

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

react-scripts

React的脚手架是基于webpack进行开发和编写的

但是在整个脚手架中，我们是看不到webpack相关的配置文件的

这是因为react使用了react-scripts这个包来帮助我们隐藏了webpack的相关配置信息

在vue的脚手架中，也使用了vue-cli-service来隐藏webpack相关的配置信息

我们可以使用yarn eject（实际执行的是react-scripts eject）来暴露隐藏的webpack配置文件的信息

但是这个操作是不可逆的，所以在执行过程中会通过警告的方式给予我们相关的提示信息

Hello React

App.js --- 根组件

import { Component } from 'react'

export default class App extends Component{
  render() {
    return <h2>Hello World</h2>
  }
}

index.js --- 入口文件

import ReactDOM from 'react-dom'

import App from './App'

// react脚手架的默认挂载点是div#root 不是 div#app
ReactDOM.render(<App />, document.getElementById('root'))
avatar
文章
阅读
粉丝