Code Gives Me a Headache: Learning React for the First Time

Preface

Here we go. I said I'd learn React last year (2020), and now it's the end of December 2021 before I actually get around to it… (year-end warning! haven't even started writing the year-end recap!)

But why learn React for the frontend? Isn't Vue perfectly fine? Vue is indeed great, and the MVVM pattern is easier to accept and understand, but I guess every community is going on about how React yyds, how React has taken over the world, plus I'd already done a lot of Flutter projects and basically grasped the idea of declarative UI, so I wanted to see the true face of React, the one being imitated~

Since I do more backend and mobile work, though of course I've also done quite a bit of web frontend, I'd been using Vue and React before this, but in the lowest of the low ways: importing Vue or React JS files into plain HTML and writing a single-page app directly.

Because I'd barely touched the npm/webpack toolchain way of doing things, this article is written from a complete beginner's perspective—just read it for a laugh~

Wrestling with the Environment

First off, even setting up the environment is pretty annoying. My daily dev environment is Windows+WSL, and React needs Node.js, so I planned to install it in WSL.

Here's the first problem: is the Node version in Ubuntu's apt too old? It's only 10.x, while the official recommendation is now 16.x. Excuse me, which century is apt's Node living in?

Then I downloaded the 16.x binary package from the official site and installed it manually, but configuring environment variables was a pain, and installing global packages with sudo also threw errors. Too much hassle!

After searching online I decided to use nvm to manage the Node environment. Link: https://github.com/nvm-sh/nvm

Looking at the official intro, great, this is exactly what I need.

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

After following the official tutorial to install nvm, a single command nvm install node finished installing the Node environment. So nice~

➞ 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)

Creating a New Project

I used the command from the official docs to create the app: npx create-react-app react_one, but frustratingly, it kept erroring…

Sometimes it was this error

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:

Sometimes it was this one

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

Searched every search engine to no avail. At first I thought it was because I'd set npm to the domestic Taobao mirror, but after switching it back the error was still there. Gotta say, this frontend toolchain is way too hard to use…

Then I remembered that when I'd run into problems before, I'd ask the frontend master, and the master's advice was to use yarn instead of npm, so I decided to give it a try~

According to the official docs (https://create-react-app.dev/docs/getting-started/), the command to create an app with yarn is:

yarn create react-app my-app

But unfortunately it happened again—creating the app with yarn still errored:

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

One last try… if this doesn't work I'm giving up on learning frontend…

This time I used proxychains4 to run the command, because I guessed the error was a network issue, and then…

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.

Yesss!!! That wasn't easy. When I saw Success, I almost teared up~

Success always arrives when you're just about to give up. Luckily this wasn't too late.

Start Coding!

Finally I can start~~(where did all that previous time go)~~

React can be developed in either JS or TS. As a half-baked frontend person who's been burned by JS, I'll definitely go with Anders Hejlsberg's TS. Static typing + strong typing is the most comfortable!

So I recreated the previously created project with the TS template:

yarn create react-app react_one --template typescript

Just as I was about to dive in and get to work, the frontend master told me that projects created by React's official create-react-app aren't great to use, and recommended Alibaba's umi framework.

Here's the master's original words

Just go with umi. This CRA is too much hassle

And then you still have to wrestle with routing

It's just a hello world, no friendly onboarding, changing anything is hard, even impossible

Facebook: we recommend not using decorators

And then they just won't let you enable them

Between React and the frontend master, I'll definitely choose to trust the master. I knew those foreigners weren't up to any good ╭(╯^╰)╮

And so…

Switching to UmiJs

There was a small interlude

While reading the umi official docs, I saw that Alibaba had made a domestic yarn registry, and I was overjoyed: there's something this good?!

The official wording:

We recommend using yarn to manage npm dependencies, and using a domestic registry (Alibaba employees should use the internal registry).

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

So I installed it immediately.

But then I thought again—I should consult the experienced master first~~(after all, Alibaba has a prior record of reinventing wheels and trapping people)~~

As it turned out, the frontend master's reply threw me into confusion

Never used it

Don't know what it is

Afraid it's like cnpm

Alibaba is always making junk

Then I'd better not use it for now. Official yarn is pretty fast anyway.

But when I installed tyarn just now, something seemed off:

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.

Following the error message, I used the --force flag

It's over

My yarn has now taken on Alibaba's shape o(╥﹏╥)o

A whole day's fussing—it won't all go to waste at the last step, will it?

With that uneasy feeling, I started creating a new project again…

yarn create @umijs/umi-app

Just as the official site said, creation succeeded.

Then I typed yarn and started installing dependencies. After that, yarn start to launch it. Great, it ran normally. I wouldn't worry about the rest.

Afterwards I also followed the docs to test hot reload, adding layouts, Build, and such. All OK~

After adding the layout: {} config in the .umirc.ts file, a sidebar appeared, prominently displaying the Ant Design logo. Nice, well played—no wonder, they're from the same company.

PS: hot reload is honestly a bit slow

Right as I said that, a line popped up in the terminal

Hot reload is a bit slow? Try the new MFSU solution to get hot reload back under 500ms. See https://github.com/umijs/umi/issues/6766

Looks like they know the score, hahahaha. Then I'll try this MFSU thing (forget it, I'll write about it next time)

References

• The frontend master's Getting Started with React: Understanding React from a JS perspective: https://github.com/coppyC/blog/issues/16
• Yarn official docs: https://yarnpkg.com/getting-started
• React official Chinese tutorial: https://zh-hans.reactjs.org/tutorial/tutorial.html
• TypeScript official tutorial: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html
• UmiJs official docs: https://umijs.org/zh-CN/docs/getting-started