◆Reactとは
ReactはFacebook社が開発しているJavaScriptのライブラリ
リアクティブプログラミング
Reactive: 反作用
何かの値が変化すると、それに反応して何かが起こります。
値の変化に反応して起こるのは表示の更新です。
リアクティブは値の伝播を中心にした考え方で、
元となる値を操作することでそれを利用する表示も自動的に更新されます。
◆Next.jsとは
Vercelというホスティングサービスを提供しているVercel社が開発しているReactのフレームワークです。
https://nextjs.org/
公式サイトのファーストメッセージ The React Framework for Production をまさしく体現したような、プロダクトの本番環境で使える機能満載 & 設定が容易なフレームワークとなっています。
Pre Renderingが便利
事前にHTMLをレンダリングすることです。
事前にHTMLをレンダリングすることで、Googleのbotへコンテンツを正しく認識してもらえたり、スペックの高いサーバでレンダリングしてブラウザへの負荷を下げたりと、Client Side Renderingでの課題を解決できます。
=SEO対策
ルーティングなどのサポートが便利
◆関数コンポーネントがオススメです
理由として、簡単に超ざっくり言うと
コードが短く済む
からです。（あとはReactチームがReactフックのサポートに結構力を入れているから）
＝＞ https://zenn.dev/killit/articles/5af626acfb2ab7
React 初心者の難問、カスタムフック（Custom Hook）
Q.npm startコマンドを実行した後、バックグラウンドで何が起こっていますか？
webpack-dev-serverを使用して、通信可能な開発サーバーを起動します。
これにより、npm startによって実行されるスクリプトがアプリケーションディレクトリに直接配置されるため、Create-React-Appの動作を確認できます。さらに、これらのスクリプトで使用されるwebpack構成ファイルをディレクトリに追加します。最後に、package.jsonファイルを更新して、Create-React-Appが使用している依存関係を実際に確認できるようにします
package.json を調べると そして、各コマンドが実際に行うことをたどることができる「スクリプト」セクションを確認してください。たとえば、「start」コマンドはここにあります。これは start.js を呼び出します スクリプトフォルダ内のファイル。これは、webpack-dev-serverが開始されるのを見るファイルです。
Q.ライフサイクル図ってなんぞ？
実装→更新 未実装 のときの流れ
４回目くらいでやっと理解…＞＜
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Q.理解せずにはいられない『props』『state』とは？？
◆props
this.props には、このコンポーネントの呼び出し元によって定義された props が含まれています。
props の紹介は コンポーネントと props を見てください。
https://ja.reactjs.org/docs/components-and-props.html
関数コンポーネントがオススメです
（コードが短く済む）
◆state
state には、そのコンポーネント固有のデータが含まれており、これは時間の経過とともに変化する可能性があります。state はユーザ定義のものであり、プレーンな JavaScript オブジェクトでなければなりません。
レンダーやデータフローに値が使用されていない場合（たとえば、タイマー ID）は、値を state にする必要はありません。そのような値は、コンポーネントインスタンスのフィールドとして定義できます。
state の詳細については、state とライフサイクルを参照してください。
https://ja.reactjs.org/docs/state-and-lifecycle.html
JSXは深く理解しておこう
Reactといえば、このJSXが特徴的。
JSX では JavaScript のすべての能力を使うことができます。どのような JavaScript の式も JSX 内で中括弧に囲んで記入することができます。
Q.これを言われてピンときますか？？
親コンポーネントから子コンポーネントに「props を渡す」こと
過去書いたReactのQiita記事はこちら