Lithe を使用した PHP と React の統合

この投稿では、Lithe フレームワークを React ライブラリと統合する方法を学び、Lithe がどのようにフロントエンド ライブラリとシームレスに統合されるかを説明します。 API の構築に優れていることに加えて、Lithe は CORS (Cross-Origin Resource Sharing) を効率的に構成することでアプリケーションのリソースへのアクセスを容易にし、アプリケーションが安全かつ効果的に通信できるようにします。

ステップ 1: 環境のセットアップ

1. Lithe のインストール

まず、Lithe をまだインストールしていない場合はインストールします。ターミナルで次のコマンドを実行します:

composer create-project lithephp/lithephp project-name
cd project-name

2. Reactのインストール

次に、Lithe プロジェクト内に新しい React プロジェクトを作成します。実行:

npx create-react-app frontend
cd frontend

ステップ 2: CORS のインストールと構成

1. CORSモジュールのインストール

Lithe プロジェクトで CORS ミドルウェアを使用するには、lithemod/cors パッケージをインストールする必要があります。次のコマンドを実行します:

composer require lithemod/cors

2. CORS ミドルウェアの使用

インストール後、Lithe アプリケーションで CORS ミドルウェアを設定する必要があります。メイン ファイル src/App.php を開き、次のコードを追加します:

複数のオリジンによる API へのアクセスを許可する場合は、CORS を次のように構成します。

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

$app->use(cors(['origins' => '*']));

$app->listen();

一方、React アプリケーションのみが API を使用するようにしたい場合は、次の構成を使用します。

$app->use(cors(['origins' => 'http://localhost:3000']));

ステップ 3: Lithe を使用してバックエンドを構成する

1. APIルートの作成

Lithe プロジェクトで、React にデータを提供する新しいルーターを作成します。 src/routes/api.php:
などのルート ファイルを作成します。

use Lithe\Http\{Request, Response};
use function Lithe\Orbis\Http\Router\{get};

get('/data', function(Request $req, Response $res) {
    $data = [
        'message' => 'Hello from Lithe!',
        'items' => [1, 2, 3, 4, 5],
    ];
    return $res->json($data);
});

ルート ファイルを定義した後、Lithe アプリケーションにルーターを追加する必要があります。メイン ファイル src/App.php を再度開き、listen メソッドを呼び出す前に次のコードを追加します。

// ...

use function Lithe\Orbis\Http\Router\router;

$apiRouter = router(__DIR__ . '/routes/api');

$app->use('/api', $apiRouter);

// ...

src/App.php ファイルは次のようになります:

use Lithe\Middleware\Configuration\cors;
use function Lithe\Orbis\Http\Router\router;

$app = new \Lithe\App;

$app->use(cors(['origins' => '*']));

$apiRouter = router(__DIR__ . '/routes/api');

$app->use('/api', $apiRouter);

$app->listen();

2. ルートのテスト

次のコマンドを使用して Lithe サーバーを起動します:

php line serve

http://localhost:8000/api/data にアクセスして、JSON が正しく返されることを確認します。

ステップ 4: React を使用してフロントエンドを構成する

1. React での API の使用

React プロジェクトで src/App.js ファイルを開き、その内容を次のように置き換えます。

import React, { useEffect, useState } from 'react';

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('http://localhost:8000/api/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    return (
        <div>
            <h1>Integrating PHP with React using Lithe</h1>
            {data ? (
                <div>
                    <p>{data.message}</p>
                    <ul>
                        {data.items.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}

export default App;

2. Reactサーバーの起動

React 開発サーバーを起動するには、次のコマンドを実行します。

npm start

ステップ 5: 統合の確認

ブラウザで http://localhost:3000 にアクセスします。 「Hello from Lithe!」というメッセージが表示されるはずです。 API によって返される項目のリスト。

最終的な考慮事項

これで、Lithe と React を正常に統合し、React アプリケーションのみがバックエンド リソースにアクセスできるようにするか、必要に応じて複数のオリジンを許可するように CORS を構成しました。これで、必要に応じてアプリケーションを拡張できます。

あなたの経験や質問をコメント欄でお気軽に共有してください!

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