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.

浏览器显示：

环境准备完毕。