react实战 系列

react实战 系列(未完结,持续更新中...)

前言

学习 react 的方法,比较常规的是跟着官方文档边看边做,可是 react 的官网教程有点难(至少比 vue 的难),亦或买几本讲基础的或实战类型的 react 的书,可是 react 是一个生态圈,比如要学 react、es6、webpack、各种插件包、ui库(例如 antd)、路由(如 react-router-dom)、状态(如 Redux)等等, 得买几本?

再想想,我们最终目标:学会 react 开发

而目标的检验标准就是:能用 react 解决实际问题。比如做一个后台管理系统。

模仿是一个较好的学习方法。

最好找一个开源的 react 项目,不要太复杂,项目必须得优秀

笔者找的是 spug。此刻 github 上 star 是 7.2k。什么概念? bizcharts(阿里通用图表组件库) 此刻 star 是 5.8k,vuex 是 27k,lodash 是 56k,虽然比顶级的(react 的 star 是 186k)相差许多倍,但也能说明这个项目的优秀。

笔者将通过自己的角度,一边分析、一边进行二次开发,尽可能的模拟真实场景。

:倘若你会 vue,却是 react 新手,建议先看 七天接手react项目

环境准备

进入github spug,克隆项目到本地:

$ git clone git@github.com:openspug/spug.git spug-study
Cloning into 'spug-study'...
remote: Enumerating objects: 11954, done.
remote: Counting objects: 100% (4463/4463), done.
remote: Compressing objects: 100% (1323/1323), done.
remote: Total 11954 (delta 3358), reused 4133 (delta 3108), pack-reused 7491
Receiving objects: 100% (11954/11954), 5.19 MiB | 111.00 KiB/s, done.
Resolving deltas: 100% (8661/8661), done.

项目目录结构如下:

$ ll spug-study
total 48
drwxr-xr-x 1 78614 197609     0  4月 10 21:16 docs/
-rw-r--r-- 1 78614 197609 35184  4月 10 21:16 LICENSE
-rw-r--r-- 1 78614 197609  3732  4月 10 21:16 README.md
drwxr-xr-x 1 78614 197609     0  4月 10 21:16 spug_api/
drwxr-xr-x 1 78614 197609     0  4月 10 21:16 spug_web/

spug_api 是后端项目,前端只需关注 spug_web

$ cd spug-study/spug_web/

// 安装依赖
$ npm i
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
...

added 1787 packages, and audited 1788 packages in 2m

107 packages are looking for funding
  run `npm fund` for details

32 vulnerabilities (1 low, 16 moderate, 14 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

vscode 终端中启动项目:

spug_web> npm run start

> spug_web@3.0.0 start   
> react-app-rewired start

...
Compiled successfully!

You can now view spug_web in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.85.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

浏览器显示:
spug1.png

环境准备完毕。

目录

  1. 起步(mockjs、第一个模块、docusaurus)
  2. 我的仪表盘(bizcharts、antd、moment)
  3. react 的第一个组件
  4. React 的数据流和生命周期
  5. React 中的表单和路由的原理
  6. Redux
posted @ 2022-04-09 16:28  彭加李  阅读(789)  评论(0编辑  收藏  举报