既存プロジェクトにReactを追加する
既存のプロジェクトにインタラクティブ性を追加したい場合、Reactで書き直す必要はありません。既存のスタックにReactを追加し、インタラクティブなReactコンポーネントをどこにでもレンダリングできます。
既存ウェブサイトのサブルート全体にReactを使用する
例えば、別のサーバー技術（Railsなど）で構築された既存のウェブアプリがexample.com にあり、example.com/some-app/で始まるすべてのルートをReactで完全に実装したいとします。
以下は、セットアップ方法の推奨事項です：
- Reactベースのフレームワークを使用してアプリのReact部分を構築する（Reactベースのフレームワークのいずれかを使用）。
- フレームワークの設定で
/some-appをベースパスとして指定する（設定方法：Next.js、Gatsby）。 - サーバーまたはプロキシを設定することで、
/some-app/以下のすべてのリクエストをReactアプリで処理するようにする。
これにより、アプリのReact部分は、これらのフレームワークに組み込まれたベストプラクティスの恩恵を受けることができます。
多くのReactベースのフレームワークはフルスタックであり、Reactアプリがサーバーを活用できるようにします。ただし、サーバーでJavaScriptを実行できない、または実行したくない場合でも、同じアプローチを使用できます。その場合は、HTML/CSS/JSのエクスポート（Next.jsのnext export出力、Gatsbyのデフォルト）を/some-app/で提供します。
既存ページの一部にReactを使用する
例えば、別の技術（Railsなどのサーバーサイド技術やBackboneなどのクライアントサイド技術）で構築された既存のページがあり、そのページのどこかにインタラクティブなReactコンポーネントをレンダリングしたいとします。これはReactを統合する一般的な方法であり、実際、Metaでは長年にわたりReactの使用のほとんどがこの形でした！
これは2つのステップで行えます：
- JavaScript環境をセットアップする：これにより、JSX構文を使用し、コードをimport/export 構文でモジュールに分割し、npmパッケージレジストリからパッケージ（例えばReact）を使用できるようになります。
- Reactコンポーネントをレンダリングする：ページ上で表示したい場所にコンポーネントをレンダリングします。
具体的なアプローチは既存のページ設定によって異なるため、いくつかの詳細を確認していきましょう。
ステップ1：モジュール式JavaScript環境をセットアップする
モジュール式JavaScript環境を使用すると、すべてのコードを1つのファイルに記述するのではなく、個別のファイルにReactコンポーネントを記述できます。また、他の開発者がnpmレジストリに公開した素晴らしいパッケージ（React自体を含む）をすべて使用できます。これを行う方法は、既存の設定によって異なります：
- アプリがすでに
import文を使用するファイルに分割されている場合、既存のセットアップを使用してみてください。JSコード内で<div />を記述すると構文エラーが発生するか確認してください。構文エラーが発生する場合は、BabelでJavaScriptコードを変換し、JSXを使用するためにBabel Reactプリセットを有効にする必要があるかもしれません。 - アプリにJavaScriptモジュールをコンパイルする既存のセットアップがない場合、それをViteでセットアップしてください。Viteコミュニティは、Rails、Django、Laravelを含むバックエンドフレームワークとの多数の統合を維持しています。使用しているバックエンドフレームワークがリストにない場合は、このガイドに従ってViteビルドをバックエンドと手動で統合してください。
セットアップが機能するか確認するには、プロジェクトフォルダで次のコマンドを実行してください：
npm install react react-dom次に、メインのJavaScriptファイル（index.jsまたはmain.jsと呼ばれるかもしれません）の先頭に以下のコード行を追加してください：
ページのコンテンツ全体が「Hello, world!」に置き換わったら、すべてが正常に動作しています！読み進めてください。
注記
既存のプロジェクトにモジュール式JavaScript環境を初めて統合することは困難に感じるかもしれませんが、その価値はあります！行き詰まった場合は、コミュニティリソースまたはVite Chatを試してみてください。
ステップ2: ページの任意の場所にReactコンポーネントをレンダリングする
前のステップでは、メインファイルの先頭に以下のコードを配置しました：
もちろん、実際には既存のHTMLコンテンツをクリアしたくはないでしょう！
このコードを削除してください。
代わりに、HTML内の特定の場所にReactコンポーネントをレンダリングしたいはずです。HTMLページ（またはそれを生成するサーバーテンプレート）を開き、任意のタグに一意のid属性を追加してください。例えば：
これにより、document.getElementByIdでそのHTML要素を見つけ、それをcreateRootに渡して、内部に独自のReactコンポーネントをレンダリングできるようになります：
index.htmlからの元のHTMLコンテンツは保持されたまま、独自のNavigationBarReactコンポーネントがHTMLの<nav id="navigation">内に表示されるようになったことに注目してくださいcreateRootの使用法ドキュメントをお読みください。
既存のプロジェクトでReactを採用する場合、小さなインタラクティブなコンポーネント（ボタンなど）から始め、徐々に「上に移動」して最終的にページ全体がReactで構築されるまで進めるのが一般的です。その時点に達した場合は、Reactを最大限に活用するために、直後にReactフレームワークへの移行をお勧めします。
既存のネイティブモバイルアプリでのReact Nativeの使用
React Nativeも既存のネイティブアプリに段階的に統合できます。Android（JavaまたはKotlin）またはiOS（Objective-CまたはSwift）用の既存のネイティブアプリをお持ちの場合は、このガイドに従ってReact Native画面を追加してください。