ReactをLaravelと統合する方法は？

Laravelは、Laravelをインストールし、データベースの構成、APIルートの作成、コントローラーからJSONの返却を行い、オプションでLaravel Sanctumを使用して認証を使用して、APIバックエンドとしてLaravelを設定します。 2。個別に提供されるスタンドアロンReactスパを選択するか、inertia.jsを使用してLaravel統合を締めます。慣性により、ReactコンポーネントはLaravelのルーティングおよびセッションシステム内で動作することができます。 3.慣性を使用する場合は、必要なパッケージをインストールし、Viteを構成し、ルートリアクションコンポーネントを作成し、リソース/js/ページ/にReactページを配置し、プロップとして渡されたデータを使用してルートから慣性応答を返します。 4.分離されたセットアップの場合は、Laravelを実行して別々のドメインで反応し、AxiosまたはFetchを使用してReactからLaravel APIを呼び出し、Corsと認証を適切に処理します。 5.ベストプラクティスには、より高速なビルドにViteを使用すること、機能による反応コンポーネントの整理、Laravel APIリソースによるAPI応答のフォーマット、CORSと認証のテストが含まれます。慣性とスタンドアロンのReactアプリの選択は、プロジェクトの複雑さとチームの好みに依存します。慣性は、フルスタックの統合とスタンドアロンスパスを単純化し、最新のLaravel-Reactアプリケーションの有効なアプローチの両方を提供します。

ReactをLaravelと統合することで、ルーティング、認証、APIなどのLaravelの堅牢なバックエンド機能を活用しながら、強力で動的なフロントエンドを構築できます。現代のLaravelプロジェクトで効果的に行う方法は次のとおりです。

1. Laravelを設定し、APIを作成します

まず、LaravelがバックエンドAPIとして機能するように設定されていることを確認してください。

• Composerを介してLaravelをインストールします。

  

  作曲家Create-Project Laravel/Laravel Your-Project-Name

• データベース設定で.envファイルを構成し、移行を実行します。

   PHPの職人が移行します

• routes/api.phpでAPIルートを作成します：

  

  ルート:: get（ '/posts'、[postcontroller :: class、 'index']）;

• コントローラーがJSON（APIリソースまたは雄弁なコレクション）を返すようにしてください。

  パブリック関数インデックス（）
  {
      return post :: all（）;
  }

React Frontendの認証が必要な場合は、Laravel Sanctumを使用してください。

2。反応の提供方法を選択します：Spa vs Inertia.js

2つの主なアプローチがあります。

オプションA：スタンドアロンReactアプリ（SPA）

• Viteを使用して個別に反応するか、Reactアプリを作成します。
• 別のドメイン（ http://localhost:3000 ）または静的ファイルから提供します。
• 開発中にLaravelをプロキシAPI呼び出しに構成します（オプション）。

compantive多くのインタラクティブコンポーネントを備えた大きくて複雑なフロントエンドに最適です。

オプションB：inertia.jsを使用します（簡単にするために推奨）

Inertiaでは、Laravelのルーティングおよびセッションシステム内にとどまっている間、Reactコンポーネントを使用できます。

• 慣性をインストールします：

  作曲家には、inertiajs/inertia-laravelが必要です

• フロントエンドの足場を設定します：

   npmインストール @inertiajs/React React React-dom @vitejs/Plugin-React

• vite.config.jsを更新：

   'vite'から{defenconfig}をインポートします。
  '@vitejs/プラグインの反応'からのImport React;
  'laravel-vite-plugin'からlaravelをインポートします。
  
  デフォルトのデフォルトdefineconfigをエクスポートする（{
    プラグイン：[
      laravel（{
        入力： 'resources/js/app.jsx'、
        更新：本当、
      }）、
      React（）、
    ]、、
  }）;

• Root Reactコンポーネント（ resources/js/app.jsx ）を作成します。

   「React-Dom/Client」から{Createroot}をインポートします。
  '@inertiajs/React'から{createInertiaApp}をインポートします。
  
  CreateInertiaApp（{
    Resolve：name => require（ `./pages/$ {name}`）、
    セットアップ（{el、app、props}）{
      createroot（el）.render（<app {... props} />）;
    }、
    タイトル：title => `私のアプリ| $ {title} `、
  }）;

• Laravelルートからの慣性応答を返す：

  慣性\ inertiaを使用します。
  
  ルート:: get（ '/'、function（）{
      return inertia :: render（ 'wamelt'、['message' => 'hello laravel！']）;
  }）;

laravel LaravelハンドリングルーティングとUIに電力を供給する反応が必要なフルスタックアプリに最適です。

3. Laravel内の反応コンポーネントを構築します

慣性またはバンドルされたセットアップで：

• resources/js/Pages/に反応コンポーネントを配置します。

• 例： resources/js/Pages/Posts/Index.jsx

   '@inertiajs/React'から{usepage}をimport;
  
  デフォルト機能postindex（{post}）{
    const {props} = usePage（）;
    戻る （
      <div>
        <h1>投稿</h1>
        {propss.posts.map（post =>（
          <div key = {post.id}> {post.title} </div>
        ））}
      </div>
    ）;
  }

• Laravelコントローラーからのデータを渡す：

  復活:: render（ 'posts/index'、[
      'posts' => post :: all（）
  ]）;

？動的なデータ（検索、ページネーションなど）については、慣性訪問またはaxiosを使用して、Laravel APIルートにヒットします。

4。laravelをフロントエンドとしてAPI反応として使用します（分離）

完全に個別のフロントエンドを好む場合：

• laravelはapi.yourapp.test （バックエンドのみ）で実行し続けます。

• localhost:3000でReactアプリ（Vite、Next.jsなどを使用）をビルドします。

• AxiosまたはFetchを介してLaravel APIを呼び出します。

   effect（（）=> {
    axios.get（ 'http：//api.yourapp.test/api/posts'）
      .then（res => setposts（res.data））
      .catch（err => console.error（err））;
  }、[]）;

• CORSのハンドル： fruitcake/laravel-corsをインストールするか、Laravel SanctumのSPA機能を使用します。

  作曲家には、フルーツケーキ/ララヴェルcorsが必要です

overtaseatlesteatlesteatsステートレスではないにしても、認証（Sanctum/sanctum/sanctum/socialite）およびCSRFを管理することを忘れないでください。

最終的なヒント

• WebpackでViteを使用します（ビルドが高速）。
• ページまたは機能ごとに整理されたReactコンポーネントを保持します。
• Laravel APIリソースを使用して、JSON出力をきれいにフォーマットします。
• Corsと認証を早期にテストします。

基本的に、慣性を介してしっかりと反応するか、フロントエンドスパとして分離することができます。慣性は複雑さを軽減し、Laravelエコシステムにあなたを維持しますが、スタンドアロンのReactアプリはフロントエンドの柔軟性を高めます。チームとプロジェクトのニーズに基づいて選択します。

以上がReactをLaravelと統合する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。