初歩的な質問ですがReactは単ページしか無いのでしょうか？

Question

Reactについて学習中なのですが疑問があります。

Reactには、
http://localhost:3000/○○○○
みたいなページは無く、URLの遷移はせず、インデックスページの単ページで完結する仕様なんでしょうか？？

Comments

[m.ts10806]

今一つ、目的がわかりません。
なぜ、その「仕様」かと思ったのかとか、解釈には根拠をつけてください

Answer 1

いえ、普通に遷移するWebサイトの部品の1つとしてReactを組み込むことも可能です（React公式）。

開発元のFacebookでも、Reactをそのような使い方で運用している、とのことです（React公式）。

Answer 2

どちらでも可能です。

---

Reactの本質は「HTMLテンプレート」にあります。

JavaScriptにひっついているDOM APIという
ブラウザがロードしたHTMLを後から書き換えて画面の更新を促すためのモジュールがあります。
これはAからBに変更しろという命令でしかありません。

DOMは壊したら元には戻りません。
ON/OFF切り替えボタンになると、ONに変更したら画面が切り替わりますが、
当然元に戻すときもDOM API越しに「HTMLよ変更しろ！」という命令が必要になります。
行って来いで2個のコードが必要になります。不便ですね。

なのでReactは考えました。
じゃあ最初からJavaScriptに「HTMLっぽいもの」を持たせておき、
JavaScript上の変数が切り替わったら、最善のあるべき姿のHTMLにカシャッと切り替われば最強じゃね？と

その結果JSXというJavaScript上でHTMLを持てるちょっと進化した言語ができました。

---

URLの遷移はせず、インデックスページの単ページで完結する仕様

この思想をSPA(シングル ページ アプリケーション)と呼びます。

HTMLテンプレートを複数持たせて、
論理的に仕切ったページに遷移する時は、このHTMLテンプレートだけカシャッと切り替えれば
JavaScriptの変数は飛ばないからそのまま使い回せるやん！

それを実現するライブラリや機能をルーティングやルータと呼びます。
ReactならばReact Routerでしょうか。

もちろんこれは後付けなので、利用したい人だけがルータを採用し、
不要だなーと思っている人は採用しません。

Answer 3

URLを分けるようにも作れるし、分けないようにも作れます