Reactについて少し調べる

はじめに

Reactって何となく記法は見たことあるけど、使ってないし全体像が掴めてない。
create-react-appを念頭に基本を調べてメモ。

サンプルサイトを見てみると、どうやらindex.jsには以下しか書かれていない。

ReactDOM.render(<App />, document.getElementById("root"))

ReactDOMってなんや？
コンポーネントを画面に表示させるためのなにがしっぽい。
で、アプリに一回出せるrender()でコンポーネント指定して描画する感覚か。要素のレンダー – React
DOMというのがJS→HTMLへの変換うんぬんのことらしい。
【初心者向け】DOM(ドム)とは？わかりやすく解説 | ホームページ制作・作成代行ならAMS

そしてどうやら、最近ReactDOM.render→createRootを使うよう置き換わったらしい。
React18からはレンダリングにcreateRootを使おう

create-react-appで作られる雛形はcreateRootなので、そっとそのままにしておく。

慣習的にindexでrenderされるtopコンポーネントっぽい。
他のコンポーネントを対象として、Importして画面に並べたり、変数入れたりという感じ。
複数ページあるサイトを作る場合、ここでルートからのパスとコンポーネントを紐づけるっぽい。
RecipeFinder/App.js at master · devmahmud/RecipeFinder · GitHub
create-react-appはSPA。

indexのところでもだけど、クラス→関数に置き換わる動向。
クラスより関数の方がわかりやすいよね、みたいな個人的解釈。フックの導入 – React
で、便利な関数群がHooksというらしい。
普通renderすると変数の状態が消えちゃうけどHooks使うと保持できるよ、というイメージ。
【初心者向け】 React Hooks とは?その特徴・使い方…｜Udemy メディア

計算機
- ちょっと古い。
  GitHub - ahfarmer/calculator: Simple calculator built with React
ショップ
- 新しくて色々やってる。コンポーネントごとにindexがあるけどなんだこれ。
  ディレクトリ構成の方法もcreate-react-app以外のパターンで色々あるんやろなあ。
  GitHub - jeffersonRibeiro/react-shopping-cart: 🛍️ Simple ecommerce cart application built with Typescript and React

色々方法があるらしい。
React開発を行う際のcss設計方法について | masayanblog
個人的にわかりやすいので、とりあえずはcss modulesでいいかな。
将来的に非推奨になる可能性があるみたいだけど。

ローカルで追加のパッケージがあった場合、DockerではModule not foundとなった。
yarnってコピペで使っててよく知らなかったけど、Facebook製のパッケージマネージャーなのね。
yarn実行でpackage.json更新。