EY-Office ブログ

またまたReact教育のテキストをアップデートしています

以前に書いた久しぶりにReact教育のテキストをアップデートしたが大変だったの続きです。

近々React教育を行いますが、またテキストをアップデートしています。
EY-Officeの教育では最新のソフトウェアに対応して教育の内容(テキスト)をアップデートしています。

create_react_app to create_next_app Bing Image Creatorが生成した画像です

前回のテキストのアップデート

前回のテキストのアップデートでの大きな変更、React開発環境をcreate-react-appからNext.jsのcreate-next-appへの変更したことでした。

ただし、この時点ではNext.jsは、以前からのPages Routerを採用しました。
すでにNext.jsではApp Routerをサポートしていましたが、App Routerを使うとReact Server Componentsが有効になり、デフォルトではサーバー側でコンポーネントが実行されてしまいます。

Reactの基本であるクラインアント(ブラウザー)で実行するには、コードの先頭に'use client'を書かないと行けなくなりました。React開発経験の無い方に行うReact教育で、いきなりReact Server Componentsなどの話をするのは、受講者を混乱させる可能性があり'use client'を書くのは避けたかったのです。

ちなみに前回のテキストでReact Server Componentsは、React18の新機能紹介として軽く解説することにしました。

今回のテキストのアップデート

React 19 RC(リロード候補)がリリースされReact19が直前となった現在、React Server Componentsを避ける事は出来なくなりました。React公式ページのリファレンスも完全にReact Server Componentsに対応しています。

今回のテキストのアップデートでは、開発環境はNext.jsのApp Routerに変更しました。そして前回は拒否した 'use client' は書かなくてはいけなくなりまいました。

今回の対応では、React Server Componentsの章を後半に追加し、最初の方にあるReactの基本学習の章では'use client'は「後で説明するので今はおまじないだと思ってくれ」と書いて進めました (React Server Componentsが一般化した将来には 'use client' は常識になっている事を祈っています)。

それ以外にはReact19の新機能の解説を追加しました。さらにuseActionStateはフォーム処理の新しいスタイルとして、Reactの基本の部分でも紹介するようにしました。

まとめ

React Server Componentsの正式リリースはReactの歴史の中でも大きな変更だと思います、将来React Server Componentsが一般化するのかどうかは、まだ判りませんが、使われて行く事はたしかだと思います。

EY-Officeの教育では最新のソフトウェアに対応して教育の内容(テキスト)をアップデートしていますので、安心して受講してください。

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ