react脚手架

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

脚手架是什么？

• 传统的脚手架指的是建筑学的一种结构：在搭建楼房、建筑物时，临时搭建出来的一个框架
• 编程中提到的脚手架，其实是一种工具，可以帮助我们快速生成项目的工程化结构
  • 每个项目做出的效果不同，但基本的工程化结果是相似的
• 总结：脚手架让项目从搭建到开发，到部署，整个流程变得快速和便捷

前端的脚手架

• 三大流行框架都有属于自己的脚手架
  • Vue的脚手架： vue-cli
  • React的脚手架: create-react-app
  • Angular的脚手架： angular-cli
• 依赖
  • 自己电脑上必须安装node环境

安装脚手架

`npm install -g create-react-app`
复制代码

• 创建react项目
  create-react-app 项目名字

目录结构分析

• README.md //说明文档
• package.json //配置文件
• public
  • favicon.ico //顶部icon图标
  • index.html //应用的index.html入口文件
  • logo192.png //manifest.json中使用
  • logo512.png //manifest.json中使用
  • manifest.json //和web app配置相关
  • robots.txt //指定收索引擎可以或者无法爬取那些文件

-src
– App.css //App组件相关的样式
– App.js //App组件的代码文件
– App.test.js //App组件的测试文件
– idnex.js //全局样式文件
– logo.svg //启动看到的图标
– serviceworker.js //默认帮助我们写好注册PWA相关的代码
– setuoTests.js //测试初始化文件
-yarn.lock

什么是PWA？

• 目录结构都很好理解，但是PWA是什么呢？
  • PWA全称称Progressive Web App，即渐进式WEB应用
  • 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用
  • 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
  • 这种Web存在的形式，我们也称之为是 Web App
• PWA解决的问题
  • 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
  • 实现了消息推送
  • 等等

编写脚手架

当前目录结构

src -> index.js 你会发现和我们之前写jsx代码一样的，但是是需要我们手动引用react和reactDOM

import react from 'react'
import reactDom from 'react-dom'

reactDom.render(<h2>hello react</h2>, document.getElementById("root"))
复制代码

但是我们把东西全都都写在ReactDom.render()中，代码是显得非常雍总，所以我们创建一个App.js组件出来

import React, { PureComponent } from 'react'    //快捷键rpc是创建一个类组件

export default class App extends PureComponent {
    render() {
        return (
            <div>
                App
            </div>
        )
    }
}
复制代码

import react from 'react'
import reactDom from 'react-dom'

import App from './App'

reactDom.render(<App/>, document.getElementById("root"))
复制代码