React 知识点清单

create by jsliang on 2019-04-23 14:10:18
Recently revised in 2019-05-31 14:54:33

Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址

一 目录

不折腾的前端,和咸鱼有什么区别

目录
一 目录
二 前言
三 清单
四 Create React App
五 DvaJS
六 Service Workers
七 Debugger for Chrome
八 Source Maps 分析包大小
九 Sass 安装及使用
十 React Loadable - 代码打包分割
十一 React Router - 路由
十二 Axios - 调用后端接口
十三 Fetch - 调用后端接口
十四 Mock - 利用 Create React App 特性

二 前言

返回目录

求你别更新了,我学不过来了!

别笑,这是事实。

现在前端界的玩意真的太多了,有些东西你听都没听过,然后很多招聘信息中居然 明目张胆 的贴着应聘者须具备 XX 技能,看得你目瞪口呆。

所以,这篇文章仅仅罗列知识点及其简单使用,更深一步的时候还是看我其他的实战文章或者自行百度搜索。

由于是罗列,有时候你会发现它毫无逻辑,甚至可读性极差。
毕竟 —— 仅仅是罗列。

三 清单

返回目录

  1. 【Create React App】:构建一个 React 的脚手架工具
    1. 通过本文快速了解
    2. Create React App 中文文档
  2. 【DvaJS】:类似 Create React App 的,方便 React 快速搭建项目的脚手架工具
    1. 通过本文快速了解
    2. DvaJS 官网
  3. 【Service Worker】:具有离线缓存作用,能让浏览器在网速差或者网络不通的情况下,还能访问网站的静态资源。
    1. 通过本文快速了解
    2. Service Workers API - MDN
    3. 制作渐进式 Web 应用程序(PWA)
  4. 【Debugger for Chrome】:Visio Studio Code 软件的开发插件,可以用来调试 Vue、React 等脚手架代码,非常方便。
    1. 通过本文快速了解
    2. 使用 VSCode 调试 React 应用
  5. 【source-map-explorer】:用来分析 Bundle 包的大小,从而进一步优化项目。
    1. 通过本文快速了解
    2. React App 中如何分析Bundle Size?
  6. 【node-sass】:通过 Sass 这个 CSS 预编译处理器,更好地编写 CSS。
    1. 通过本文快速了解
    2. 添加 Sass 样式表
  7. 【React Loadable】:配合 React Router,在 Create React App 中进行组件分割,减少每个 JS 文件的大小。
    1. 通过本文快速了解
    2. Code-Splitting - GitHub
    3. react-loadable
    4. Code Splitting in Create React App
  8. 【React Router】:由于 Create React App 并没有规定路由解决方案,在此推荐 React Router。
    1. 通过本文快速了解
    2. React Router
  9. 【Axios】:Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 Node.js 中。可以用来调用后端接口。
    1. 通过本文快速了解
    2. Axios 中文说明
  10. 【Fetch】:Fetch API 类似于 Axios,它提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的部分,例如请求和响应。
    1. 通过本文快速了解
    2. 使用 Fetch - MDN
    3. React 快速上手 - 09 数据请求 fetch - SegmentFault
  11. 【Mock】:有时候后端接口还没好,我们不能干愣着,可以借助 Create React App 中的 Node 服务,直接调用本地模拟数据。
    1. 通过本文快速了解

四 Create React App

返回目录

通过运行一个命令来建立现代 Web 应用程序,来帮助你快速开发 React 项目。

  • 步骤:

  • 下载 Node.js

  • 安装 Create React App:
    1. npm i create-react-app -g
  • 开启新项目:
    1. create-react-app todolist
    2. cd todolist
    3. npm start
  • 打包项目:npm build

  • 项目目录:

- todolist
  + node_modules —————————— 项目依赖的第三方的包
  - public ———————————————— 共用文件
    - favicon.ico        —— 网页标签左上角小图标
    - index.html         —— 网站首页模板
    - mainfest.json      —— 提供 meta 信息给项目,并与 serviceWorker.js 相呼应,进行离线 APP 定义
  - src ——————————————————— 项目主要目录
    - App.css            —— 主组件样式
    - App.js             —— 主组件入口
    - App.test.js        —— 自动化测试文件
    - index.css          —— 全局 css 文件
    - index.js           —— 所有代码的入口
    - logo.svg           —— 页面的动态图
    - serviceWorker.js   —— PWA。帮助开发手机 APP 应用,具有缓存作用
  - .gitignore ——————————— 配置文件。git 上传的时候忽略哪些文件
  - package-lock.json ———— 锁定安装包的版本号,保证其他人在 npm i 的时候使用一致的 node 包
  - package.json ————————— node 包文件,介绍项目以及说明一些依赖包等
  - README.md ———————————— 项目介绍文件

五 DvaJS

返回目录

  • 什么是 DvaJS?

dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。

说白了,它是类似于 create-react-app 的,帮你配置脚手架的工具,可以让你快速搭建项目。

六 Service Workers

返回目录

在使用 Create React App 创建新项目时,会默认装上未开启的 Service Workers。

  • 什么是 Service Workers?

Service Workers 本质上充当 Web 应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。

  • 为什么加入 Service Workers?

在 Create React App 中,由于离线优先的 Progressive Web Apps(渐进式 Web 应用程序)比传统网页更快,更可靠,并提供了很好的移动体验,所以它将 Service Workers 添加了进来。

  • 如何开启 Service Workers?

修改 src/index.js 目录中的 serviceWorker.unregister();serviceWorker.register() 即可开启离线缓存功能。

进一步定制需要自行百度/Chrome。

七 Debugger for Chrome

返回目录

可以通过 Visio Studio Code 的插件 Debugger for Chrome 调试 Create React App:

步骤 1. 安装 -> Debugger for Chrome

步骤 2. 调试 -> 添加配置:

launch.json

{
  "version": "0.2.0",
  "configurations": [

    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

步骤 3. 保存 -> 开始调试

步骤 4. 通过上述步骤即可开始调试

如有问题可以参考下面资料

八 Source Maps 分析包大小

返回目录

使用 source maps 分析 JavaScript 包。

这有助于你了解代码膨胀的来源,从而配合其他插件来减少每个包的大小,优化项目。

步骤 1. 安装:npm i source-map-explorer -S

步骤 2. 修改 package.json:

package.json

"scripts": {
  "analyze": "source-map-explorer build/static/js/main.*",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
}

步骤 3. 打包:npm run build

步骤 4. 分析:npm run analyze

九 Sass 安装及使用

返回目录

Sass 是一种 CSS 的预编译处理器,简单来说就是方便你有组织有预谋地编写 CSS,更多 Sass 技巧可以去参考文献查找。

  1. 安装 node-sassnpm i node-sass -S
  2. 引入:@import 'styles/_colors.scss'; // 假设 styles 目录 在 src/ 目录下

  3. 参考文献:

  4. Sass 中文文档

  5. 添加 Sass 样式表 - Create React App 中文文档

十 React Loadable - 代码打包分割

返回目录

在 Create React App 中,我们可以使用 React Loadable 来进行代码的分割。

使用方式:

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

十一 React Router - 路由

返回目录

由于 Create React App 并没有规定路由解决方案,然后市面上比较收欢迎的路由解决方案是 React Router,所以可以尝试使用:

十二 Axios - 调用后端接口

返回目录

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 Node.js 中。

  • 功能:

  • 从浏览器中创建 XMLHttpRequests

  • 从 Node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

  • 安装:npm install axios -S

  • 使用:axios.get('/user').then((res) => {}).catch((err) => {})

  • Axios 中文说明

当然 React 调用接口不可能一家独霸,你还可以了解:AJAX API三驾马车: Axios vs . jQuery和Fetch - 掘金

十三 Fetch - 调用后端接口

返回目录

Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

由于 Fetch 是浏览器内置,所以可以直接调用:

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

由于 Fetch 具有极大兼容性,所以可以在 Create React App 中使用插件:cross-fetch,它能解决掉一大部分的兼容:npm i cross-fetch -S

十四 Mock - 利用 Create React App 特性

返回目录

在我们的 Create React App 中,其实是可以使用它自带的 Node 进行接口模拟的,下面我们来看目标目录:

- todolist
  + node_modules —————————— 项目依赖的第三方的包
  - public ———————————————— 共用文件
    - api                —— 新增的 Mock 文件夹
      - user.json        —— Mock 的 JSON 数据
    - favicon.ico        —— 网页标签左上角小图标
    - index.html         —— 网站首页模板
  - src ——————————————————— 项目主要目录
    - App.js             —— 主组件入口
    - index.css          —— 全局 css 文件
    - index.js           —— 所有代码的入口
  - .gitignore ——————————— 配置文件。git 上传的时候忽略哪些文件
  - package.json ————————— node 包文件,介绍项目以及说明一些依赖包等

然后,我们在 src 目录中某个文件的 ComponentDidMount 等位置,调用 Fetch 或者 Axios,即可获取到数据:

user.json

{
  "status": "0",
  "data": [
    {
      "name": "jsliang",
      "age": 24
    },
    {
      "name": "梁峻荣",
      "age": 24
    }
  ]
}

Test.js

import React, { Component } from 'react';

class Test extends Component {
  render() {
    return(
      <div>
        <h1>Hello React</h1>
      </div>
    )
  }

  componentDidMount() {
    fetch(
      '/api/test.json'
    )
      .then(res => res.json())
      .then(data => {
        console.log(data)
      })
      .catch(e => {
      console.log('错误:', e)
    })
  }
}

export default Test;

最后,我们就可以在浏览器的控制台查看到 Mock 接口数据:

data: [{name: "jsliang", age: 24}, {name: "梁峻荣", age: 24}]
status: "0"

Else 阅读推荐

返回目录

  1. 知乎专栏 - 魔都三帅和江浙沪包邮技术大联盟
  2. 关于 export 和 import - Stack Overflow
  3. 从redux-thunk到redux-saga实践 - SegmentFault

jsliang 广告推送:
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看!

图 图

知识共享许可协议
jsliang 的文档库梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

Copyright © jsliang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-05-31 14:54:34

results matching ""

    No results matching ""