代码使我头疼之React初学习
共 4052字，需浏览 9分钟
·
2021-12-27 20:43
前言
开始了，去年(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
可以看到官网的介绍，很好，就是我要的东西了
nvmallows 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
于是立刻安装下来
不过后面转念一想，应该请教一下有经验的带师才行~~（毕竟阿里在造轮子坑人这方面是有前科的）~~
结果前端带师的回复让我心里乱了起来
那我还是先不用了吧，反正现在用官方的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