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.

浏览器显示:

react实战 系列_github

环境准备完毕。

目录


  1. 第一篇(准备中...)


作者:彭加李