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