ライブラリとフレームワークの違い

ライブラリは、部品を借りて使うもの。
開発者は、いつ・どこで・なにを・どのように使うかを決める。

フレームワークは、仕組みに乗って動くもの。
開発者は、フレームワークのルール（どの場所にファイルを置くか、どんな関数名にするか）に従ってコードを書く必要がある。

React、Node.js、Next.jsの関係

(自分が経験のある.NETに置き換えたものも載せておく)

Reactは、UIをつくるためのライブラリ。
.NETでいえばBlazorのUI部品に相当する。

Node.jsは、サーバー上でJavaScritを動かすための実行環境。
Next.jsなどのフレームワークを実行する土台となる。
.NETでいえば.NETランタイムに相当する。

Next.jsは、Reactを使ってWebアプリを作るためのフレームワーク。
ルールに従って書くだけでルーティングやSSR(サーバーサイドレンダリング)が自動で動く。
.NETでいえばASP.NET Coreに相当する。

npmコマンド

Node.jsのためのパッケージ管理ツール。
.NETでいえばNuGetに相当する。

npm install reactでReactをプロジェクトに導入する。

npxコマンド

npmでインストールできるパッケージを一時的に実行するためのコマンド。
パッケージをグローバルにインストールせずにその場で実行できるのが特徴。

npx create-next-app myappでNext.jsのセットアップツールを実行し、myappというアプリを作成できる。
.NETでいえばdotnet newコマンドでテンプレートを実行するのに近いイメージ。

Reactプロジェクトの中身

npx create-react-appを実行するとカレントディレクトリに作成されるデータ

node_modulesフォルダ

アプリで使うライブラリ類。
プロジェクトから参照するパッケージ類がまとめて保存されている。
npmプロジェクトでは必ず作成される。開発者が直接操作することはない。

publicフォルダ

外部に公開されるファイル。
index.htmlやロゴの画像ファイルなどがまとめてある。

srcフォルダ

Reactのプログラムがまとめられているところ。

index.html

Webページのファイル。
このファイルで用意されるWebページにReactコンポーネントが組み込まれる。
<div id="root">にReactコンポーネントが組み込まれる。組み込み処理はsrc/index.jsで行う。

index.js

Reactアプリケーションで最初に実行されるファイル。

はじめに、importで必要なライブラリやファイルを読み込む。
Reactなどのフロントエンドフレームワークでは、あるコンポーネントから別のコンポーネントを読み込んで使うことがよくある。

次に、Reactアプリを表示する。
const root = ReactDOM.createRoot(document.getElementById('root'));では、HTMLファイルのid="root"という要素を見つけて、そこにReactアプリを表示する。
そして、root.render()で実際にReactアプリを画面に表示する。
<App />がメインのコンポーネントで、これが画面に表示される内容。

reportWebVitals();は性能測定のための機能を有効化する処理で、不要なら削除して問題ない。