Learning React

• Resuming in 202202

  • I remember stopping around when I was going through the official React tutorial.
  • Let’s try the React Beginner Tutorial.

  It’s also recommended to refer to /mrsekut-p (takker).

  • It has comprehensive notes on learning React and TypeScript.
  • (blu3mo)🙏

---

• I want to quickly learn how to create something that works on the web.

• I did some basic JavaScript back in fifth grade.

• But it seems like the world has completely changed.

  • https://note.com/erukiti/n/n38495d44386a

  • “Reset all your knowledge, experience, and common sense about HTML/CSS/JS. To put it more simply, forget everything about web technology. Read all the official documentation and unlearn.”

  • If you have ever worked with JavaScript back then (i.e., before ES5), you probably had some dissatisfaction with it. You recognized that it was a language clearly inferior to other languages like Ruby, Scala, and Go. And you were not wrong.

  • https://note.com/erukiti/n/n38495d44386a

  • The web front-end used to be a world where you could simply manipulate the DOM directly or play with toy-like scripts. But that era is long gone. Unlike the Stone Age, abstractions like virtual DOM have been introduced.

• For now, I’m thinking of learning React and TypeScript (20210325).

  • I’ll think about the backend later. I have some knowledge of Ruby On Rails, but I’m not sure if I’ll use it.

• If you really just want to create an app with React, I strongly recommend doing it on UserScript (takker).

  • If you try to build everything from scratch, you’ll get stuck in non-essential parts and lose track of the essence.
    • You wanted to use React to build an app, but somehow you end up spending time on environment setup.
      • Learn how to use npm/yarn.
      • Learn how to write package.json.
      • Learn how to configure webpack.
      • Configure eslint and prettier in the editor.
      • Only after doing all this, you can finally start development.
      • You will make configuration mistakes at each step, so you’ll need to figure out the cause every time.
  • On UserScript, you can make things work just by copying and pasting.
    • For example,
      • [/programming-notes/Preactを使ったScrapbox UserScriptのDemo (TODO app)#609648cc1280f000004c75b7](https://scrapbox.io/programming-notes/Preactを使ったScrapbox UserScriptのDemo (TODO app)#609648cc1280f000004c75b7)
      • /pokutuna/プレゼンタイマー
    • After copying and pasting them into a suitable page, you can immediately use them by importing them into your own page.
    • You can even execute them by writing them in the development console using the dynamic import syntax.
    • You can start creating your own app immediately by modifying the contents.
      • If you don’t want to import Preact libraries from an external project, you can simply copy and paste them into your own page.
        • Since the file size is small, it’s easy to copy and paste.
  • It eliminates the need to implement the basics of an app.
    • The site’s UI and text editor are already provided.
    • All you have to do is implement the features you want on top of that.
  • However, there are limitations.
    • It requires some effort to use third-party libraries.
    • There are no linters or formatters.
      • Keep reloading with F5 until the errors are gone.
      • Then debug using the developer tools.
    • You can’t use TypeScript.
      • You have to rely on mental type inference.

• If you’re okay with starting from scratch, CodeSandBox is recommended.

  • No need for environment setup.
  • You can use TypeScript.
  • You can use any third-party packages.
  • It automatically rebuilds the app every time you edit it.
  • It can be integrated with GitHub.
  • You can deploy to Vercel with just one click.

• I want to take the shortest route to becoming an iOS engineer.

  • iOSエンジニアがWebフロントエンドエンジニア(仮)になった話

• This looks promising.

  • Reactチュートリアル1：犬画像ギャラリーを作ろう- React Beginner Tutorial by takker seems to be good. (takker)
  • 🙏🙏 (blu3mo)
  • React Beginner Tutorial

• React Hooks Introduction is also good for those who recently started with React.

  • Other pages are also helpful.

• Random notes:

  • There are props and state in React. Props refer to the attributes written in JSX syntax like <tag param=value>.
    • The attributes written inside <...> are just HTML tags. (takker)
      • <...> itself is just an HTML tag.
  • When something is specified in the state (setState), it will trigger a render when it is updated.
    • Instead of re-rendering everything, React creates a Virtual DOM and compares it to update only the necessary parts. This is why React is valuable.
    • That’s what I think.