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 parfaitement 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 souple

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 nome-do-projeto
cd nome-do-projeto

2. Installation de React

Créez ensuite un nouveau projet React au sein de 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 sources à 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, comme 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 dans 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 ressemblerait à 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

Visitez http://localhost:8000/api/data pour vous assurer que 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 le 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>Integrando o PHP com React usando Lithe</h1>
            {data ? (
                <div>
                    <p>{data.message}</p>
                    <ul>
                        {data.items.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                </div>
            ) : (
                <p>Carregando...</p>
            )}
        </div>
    );
}

export default App;

2. Démarrage du serveur React

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

composer create-project lithephp/lithephp nome-do-projeto
cd nome-do-projeto

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

Allez sur 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 autoriser plusieurs sources selon les besoins. Vous pouvez désormais étendre votre candidature à 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!