はぜにっき

日記です。（毎日更新ではない）

"最近のReact" キャッチアップ用の記事まとめたーの 2021.03

Enginnering

今はVue.jsを見ているんですが、4月からは仕事で使うウェッブアプリケーションのフロントエンドフレームワークがReactになります。

Class Componentのライフサイクル（の一部）とNext.jsのgetXXProps ぐらいまでしかまともに理解しておらず、最近のReactに何となく追いつくために参考にした記事やサイト、手をつけようとしているものたちをメモしておきます。

書いてくださった方々、本当にありがとうございます。

実質「あとから読もう」と思ってふぁぼっていたツイートのリンク集だったりします。(期間: 2020.05.01 ~ 2021.03.11)
Twitterで管理するの破綻しているので、Scrapboxとかどこかに残していく運用にしないとなあ...

TypeScript

基本的な部分はさらで書ける。簡単なパズル調べながらやっと読める程度で、すぐ忘れそう。

React

とりあえず

をやって

Reactのコンポーネント周りの用語を整理する を読む

Hooks

中身がどうなってるかはさっぱりだけど、どういうものかは何となく理解した。手に馴染んだ感がないのは書いた量が少ないから...

Context API

Concurrent Mode

React Suspence

前提になる Error Boundary 、 Suspence の解説。最初に公式ドキュメントを読んだら？？？になったが、これで理解できた。

React Server Components

Vercelが色々出してくれてて助かる。

CSS (in JS)

styled-components

github.com

READMEを見て何となく理解。あんまり好きな書き方ではないかなあ...

CSS Modules

nextjs.org

Next.jsのTutorialsで認知。
型は skovy/typed-scss-modules を使うとかなり良かった。先にscss側を記述してCtrl+Sしてからtsxを書かないと型がなくて怒られるのがつらい。 ( https://hazesoft.dev で使った )

Lightwind CSS

zenn.dev

Tailwind CSSを見てウッとなってたらあった。
ちゃんと触れてはないけど読む限りは好み。ちゃんと補完が効くようにできたらProductionで使いたいな。

他

atoms の「制御・非制御」をどう作るのか

コンポーネント/データ設計

正直全然正解がわからん

Next.js / Vercel

webpack等

他 雑観

  • React Hooks Formの型が良くなって良い感じだという噂をTwitterで見たので使ってみたい
  • Lint, Testはあんまり追えてない。何とかしたい
  • Reduxってどうなん今。昔はtypescript-fsaとかあったけどRedux Toolkit一強？
    • というか状態保存ってContext APIが良いのかReduxが良いのかRecoilっていうのが良いのかよくわかっていない
    • 素振りしなきゃ...
  • aspida, pathpidaが良さそう
  • Functional Components + Hooksが良さそうで、そこにReact Server Componentsが来る。で、どういう作りがシンプルでわかりやすいかはわからん
  • Prismaまだ触ってない
    • Blitzも...
  • Next.jsでSPA作るのってどうなんだろう
    • next/routerが便利だけどSPAならinitしてroconのほうが良いのか？
    • next/link, next/images 周りの挙動もよくわかっていない。SPA特有の挙動とかありそう
  • 認証周りは手薄。JWT + HTTPS Cookieで良いのではと思っているがCSRFとかその他諸々100％を正しく理解はしていないので結構怖い

「この構成いいよ！」みたいなオープンソースのReact Applicationがあったら楽なんだけど、まだちゃんと探してない。realworldみたいなやつ。

そういうのは自分で多少書いてから見たほうがなるほど〜〜ってなりそうなので、上のエントリを全部ガッと読んだり写経して、素振りウェッブアプリケーションを何個か作ってから調べてみようと思っている。それを3月中にやりたい。間に合わなさそう。