代码使我头疼之React初学习

前言

开始了，去年(2020)说要学的React，到现在2021年的12月底了，才来实施……（年底警告！年末总结还没开始写！）

不过前端为啥要学React呢？Vue不是很好用吗？Vue确实很好用，并且MVVM模式也更容易让人接受和理解，但大概是各种社区上都说react yyds啦，react一统江山啦什么的，加上我之前学Flutter做了很多项目，对声明式UI的思想已经基本掌握了，所以就想来看看React这个被模仿者的真实面貌~

由于我后端和移动端做得比较多，当然web前端也做了不少，在这之前vue、react也都一直有在用，但属于那种最low的用法：在普通的HTML里引入vue或react的js文件然后直接单页应用的写法。

因为基本没接触过npm、webpack这套基于工具链的用法，所以本文基于小白视角写成，看个乐呵就好~

折腾环境

首先折腾环境就挺烦的，日常开发环境是Windows+WSL，开发react需要nodejs，所以我打算在WSL里安装

第一个问题来了，Ubuntu apt里的node版本太低了吗，才10.x，现在官方都推荐使用16.x，请问apt里的node是活在哪个世纪？

然后我去官网下载了16.x版本的二进制包手动安装，不过配置环境变量很麻烦，而且使用sudo安装全局包的时候也报错，太麻烦了！

网上搜索了一下我决定使用nvm来管理node环境，地址：https://github.com/nvm-sh/nvm

可以看到官网的介绍，很好，就是我要的东西了

nvm allows you to quickly install and use different versions of node via the command line.

按照官网教程安装好nvm之后，只需要nvm install node一行命令就完成了node环境的安装，舒服了~

➞ nvm install node
Downloading and installing node v17.3.0...
Downloading https://nodejs.org/dist/v17.3.0/node-v17.3.0-linux-x64.tar.xz...
################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v17.3.0 (npm v8.3.0)
Creating default alias: default -> node (-> v17.3.0)

新建项目

我使用了官网文档的命令来创建app：npx create-react-app react_one，但令人沮丧的是，一直报错…

有时是这个错误

npm ERR! code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
npm ERR! 139880276887488:error:1408F119:SSL routines:ssl3_get_record:decryption failed or bad record mac:../deps/openssl/openssl/ssl/record/ssl3_record.c:677:

有时是下面这个

npm ERR! Cannot read properties of undefined (reading 'isServer')

各种搜索引擎搜索无果，一开始我以为是给npm设置了国内淘宝镜像导致的，结果改回来之后错误依旧。不得不感叹，这前端的工具链也太难用了吧……

然后想起了以前遇到问题的时候请教前端带师，带师给的建议是使用yarn而不是npm，所以我决定试试~

根据官网文档（https://create-react-app.dev/docs/getting-started/），使用yarn创建app的命令是：

yarn create react-app my-app

不过令人遗憾的事情又发生了，使用yarn来创建app依然报错：

TypeError: Cannot read properties of undefined (reading 'isServer')

最后一次尝试……如果不行的话我就放弃前端学习了…

这次我使用proxychains4来执行命令，因为我猜测这个报错是网络问题，然后……

Success! Created my-react at /home/da/code/frontend/1/my-react
...
We suggest that you begin by typing:

  cd my-react
  yarn start

Happy hacking!
Done in 122.59s.

欧耶！！！不容易啊，看到Success的时候，眼泪都快流下来了~

成功总在你差点就要放弃的时候到来，还好这不算晚。

开始编码！

终于可以开始了（之前的时间都花到哪里去了）

react可以使用js或者ts两种语言进行开发，作为半吊子前端且被js坑过的人来说，我肯定选Anders Hejlsberg大神的ts啦，静态类型+强类型才是最舒服的！

于是前面创建好的项目重新用ts的模板创建一遍：

yarn create react-app react_one --template typescript

正当我准备开始大干一番的时候，前端带师跟我说这react官方的create-react-app创建出来的项目不好用，推荐我使用阿里的umi框架

以下是带师原话

直接上umi吧，这个cra太折腾了

等等还得折腾路由

就一个hello world ，没有友好的引导，改点东西很难，甚至改不了

facebook：我们建议不使用装饰器

然后就不让你开启

在react和前端带师之间，我肯定选择相信带师，我就知道洋鬼子没安好心╭(╯^╰)╮

于是……

转向UmiJs

遇到一个小插曲

在看umi官方文档的时候，看到阿里搞了一个yarn的国内源，心中大喜：还有这种好东西？！

官方原话：

推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

# 国内源$ npm i yarn tyarn -g# 后面文档里的 yarn 换成 tyarn$ tyarn -v
# 阿里内网源$ tnpm i yarn @ali/yarn -g# 后面文档里的 yarn 换成 ayarn$ ayarn -v

于是立刻安装下来

不过后面转念一想，应该请教一下有经验的带师才行（毕竟阿里在造轮子坑人这方面是有前科的）

结果前端带师的回复让我心里乱了起来

没用过

不知道是啥

怕是和cnpm一样

阿里老是造垃圾

那我还是先不用了吧，反正现在用官方的yarn也挺快的

不过刚才在安装tyarn的时候好像有什么不对劲的地方：

npm ERR! code EEXIST
npm ERR! path /home/da/.nvm/versions/node/v16.13.1/bin/yarn
npm ERR! EEXIST: file already exists
npm ERR! File exists: /home/da/.nvm/versions/node/v16.13.1/bin/yarn
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

根据错误提示，我使用了--force参数

完了

我的yarn这下已经是阿里的形状了o(╥﹏╥)o

折腾了一天的成果，不会功亏一篑吧

怀着这样忐忑的心情，我又开始了新项目的创建……

yarn create @umijs/umi-app

跟官网说的一样，创建成功了。

然后输入yarn，开始安装依赖。再之后，yarn start启动，很好，能正常运行，后面的事情就不操心了。

后续我又根据文档测试了一下热更新添加布局、Build之类的功能，都OK~

在.umirc.ts文件里添加了layout: {}配置之后呢，就出来一个侧边栏，上面赫然显示着AntDesign的logo，可以啊，真有你的，不愧是同一家的东西。

PS：热更新属实有点慢啊

刚说这话的时候，命令行弹出来一句话

热更新有点慢，试试新出的 MFSU 方案，让热更新回到 500ms 内，详见 https://github.com/umijs/umi/issues/6766

看来心里是有点B数的啊哈哈哈哈哈，那我来试试看这个什么MFSU（算了下次再写了）

参考资料

• 前端带师的React入门：从js的角度理解 react：https://github.com/coppyC/blog/issues/16
• Yarn官方文档：https://yarnpkg.com/getting-started
• React官方中文教程：https://zh-hans.reactjs.org/tutorial/tutorial.html
• TypeScript官方教程：https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html
• UmiJs官方文档：https://umijs.org/zh-CN/docs/getting-started