フロントエンドUI構築用JavaScriptライブラリ。
2019年（React16.8） Hooksの導入にりコードの記述が簡潔になり学習ハードルが下がった。
前はクラスベースが主流だったがフックベース主流になった。
Webページをコンポーネントという小さな部品に分けて管理する。小さな部品を組み立てる。
ページ全体をリロードせずに必要な部分だけ更新するのでページの動作がスムーズになります。
コードの再利用性が高い。

参考書: モダンJavaScriptの基本から始める React実践の教科書

■vs Vue
処理速度がVueより速い。
学習コストがVueより高い。
TypeScriptと相性が良いのはReact。Vueより相性が良い。

動的なページにおすすめ。静的なページには向かない。

Webデザイナーよりバックエンドエンジニア向け。
Reactは段階的に導入することが可能である。
小規模のみ導入や大規模に導入することが可能である。

軸となるキーワード「SPA（Single Page Application）」

・ファンクション（関数）コンポーネント
関数コンポーネントの使用が推奨される傾向にあります。
簡潔で軽量なため、最近のReact開発では主に使われます。
簡潔で理解しやすく、フックを使用することで強力な機能をシンプルな形で提供できる。
stateやライフサイクルを持たないコンポーネントです。← 要確認

数年前までは「Create React App」が主流であったが、2023年にサポートが終了したため今は「Vite」が主流。

React Hooks
コンポーネントに機能を追加するための仕組みです。
useState - 画面の状態を管理
useEffect - 外部との連携を管理

# Viteの導入
npm create vite@latest sample-project -- --template react-ts

cd sample-project

npm install # 依存関係をインストール

npm run dev # サーバの起動

おすすめ https://zenn.dev/nosuke15/articles/2ea7884fd41cc3

TypeScriptの中にHTMLのような記述を埋め込むことができます。
TSXはブラウザが直接理解できないため、ビルド時にJavaScriptに変換されます。

// src/Sample.tsx

function CallHello() {
  return <div>Hello!</div>
}

// 関数コンポーネント
function Sample() {
  return (
    <>
      {/* class属性 */}
      <div className="sample"></div>

      {/* コンポーネント呼び出し */}
      <CallHello />
    </>
  );
}

export default Sample

React製のSPAで非常に一般的なルーティングライブラリです。
React本体には画面とURLを対応させる機能がないため、その部分を担当します。
URLに応じて、表示するReactコンポーネントを切り替える仕組みです。

# インストール
npm install react-router

■ディレクトリ構成（例）
app.js
resources/js/components
resources/js/pages
resources/js/services
resources/js/store