久しぶりのReact入門教育がありテキストを更新したのですが、思いのほか大変で時間がかかってしまいました。
大昔は自著 「作りながら学ぶ React 入門」 を使っていましたが、内容が古くなったので最新のReactに合わせたテキストを作り、教育毎に内容を更新して使っていました。
Bing Image Creatorが生成した画像です
create-react-appが開発終了になった
今回のテキスト更新が大変だった原因は、Reactの開発環境を作ってくれるFacebook製ツールcreate-react-appの開発が止まってしまったからです。今でもこれを使っている書籍等はありますが、もう開発が行われていないので教育で使うわけにはいきません。
代わるツールとしては、Next.jsのcreate-next-app か Vite でしょうか？
Viteはcreate-react-app同様に、ブラウザーで動く素直なReactアプリを作ってくれますます。それに対しNext.jsは元来SSR(Server Side Rendering)用のフレームワークでレンダリングがサーバー上で行われたりします。
私個人としては爽快に動くViteが好きです。しかし、React公式ページのインストール ページではNext.jsを薦めています。
たしかに、今後のReactで重要な技術となるReact Server Compnentをサポートする開発環境は現在Nextjsなど少数です。
結論としてはNext.jsのcreate-next-appを採用しました。
Next.jsのグローバルCSSには癖がある
テキストの最初の方では、通常のWebアプリ同様のグローバルCSSを使っています。Reactを学び始めたばかりの人に、いきなりReact特有なCSSスタイリングを学ばせたくないので、通常のWebアプリ同様のグローバルCSS使っていました（CSS自体はテーブルタグ用の簡単なものです）。
ところが、Next.jsでグローバルCSSを使うにはNext.js固有のpages/_app.jsでCSSを指定しないといけません。😅
結経グローバルCSSは諦め、CSS Modulesを使う事にしました。CSS ModulesはclassNameの指定が少し特殊ですが、一般のReactアプリでも広く使われるのCSS Modulesを使うのは良いことかも知れません。
Next.jsのルーティングとStateの共有
従来の演習アプリではReact Routerを使っていたので、1つのStateをURLに対応した複数のコンポーネントに渡す事ができました。
しかし、Next.jsのStatic RouterではURL毎に別コンポーネントになるので、1つのStateを共有できません。いろいろと試してみましたが、今回はルーティングの章ではStateの共有を諦めました。
Stateの共有は、あとで出てくるState管理（Redux, Recoil…）の章で、この別コンポーネントのStateを共有する事にしました。
これはState管理の有りがたさが感じられて、良いテキストの流れかも知れない・・・
そしてReact Server Component
せっかくNext.jsを使ったので、React Server Componentの解説も書きました。Reactの将来を知る入り口として。
React Server Componentのサンプルコードは以前ブログに書いたNext.jsのReact Server Componentsを試してみたを使いました。
その他にも
最近ブログに書いた、
も今回のテキスト更新で得た知見です。
