Intégrer PHP avec React en utilisant Lithe

Dans cet article, nous apprendrons comment intégrer le framework Lithe à la bibliothèque React, en soulignant comment Lithe s'intègre de manière transparente aux bibliothèques frontend. En plus d'être excellent pour créer des API, Lithe facilite l'accès aux ressources de votre application en configurant efficacement CORS (Cross-Origin Resource Sharing) pour garantir que vos applications communiquent de manière sécurisée et efficace.

Étape 1 : Configuration de l'environnement

1. Installation de Lithe

Tout d’abord, installez Lithe si vous ne l’avez pas déjà fait. Exécutez la commande suivante dans le terminal :

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

2. Installation de React

Ensuite, créez un nouveau projet React dans votre projet Lithe. Exécuter :

npx create-react-app frontend
cd frontend

Étape 2 : Installation et configuration de CORS

1. Installation du module CORS

Pour utiliser le middleware CORS dans votre projet Lithe, vous devez installer le package lithemod/cors. Exécutez la commande suivante :

composer require lithemod/cors

2. Utilisation du middleware CORS

Après l'installation, vous devez configurer le middleware CORS dans votre application Lithe. Ouvrez le fichier principal src/App.php et ajoutez le code suivant :

Si vous souhaitez autoriser plusieurs origines à accéder à votre API, configurez CORS comme suit :

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

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

$app->listen();

En revanche, si vous souhaitez que seule votre application React consomme l'API, utilisez la configuration suivante :

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

Étape 3 : Configuration du backend avec Lithe

1. Création d'une route API

Dans votre projet Lithe, créez un nouveau routeur pour fournir des données à React. Créez un fichier de route, tel que 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);
});

Après avoir défini le fichier de route, vous devez ajouter le routeur à votre application Lithe. Ouvrez à nouveau le fichier principal src/App.php et ajoutez le code suivant avant d'appeler la méthode d'écoute :

// ...

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

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

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

// ...

Le fichier src/App.php ressemblera à ceci :

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. Tester l'itinéraire

Démarrez le serveur Lithe avec la commande suivante :

php line serve

Accédez à http://localhost:8000/api/data pour vous assurer que le JSON est renvoyé correctement.

Étape 4 : Configuration du frontend avec React

1. Consommer l'API dans React

Ouvrez le fichier src/App.js dans votre projet React et remplacez son contenu par :

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. Démarrage du serveur React

Pour démarrer le serveur de développement React, exécutez :

npm start

Étape 5 : Vérification de l'intégration

Accédez à http://localhost:3000 dans votre navigateur. Vous devriez voir le message « Bonjour de Lithe ! » et une liste des éléments renvoyés par l'API.

Considérations finales

Grâce à cela, vous avez intégré avec succès Lithe à React et configuré CORS pour autoriser uniquement l'application React à accéder aux ressources backend ou pour autoriser plusieurs origines selon les besoins. Vous pouvez désormais étendre votre application à votre guise.

N'hésitez pas à partager vos expériences et questions dans les commentaires !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!