Integrando o PHP com React Usando o Lithe

Neste post, vamos aprender a integrar o framework Lithe com a biblioteca React, destacando como o Lithe se integra perfeitamente com bibliotecas frontend. Além de ser excelente para construir APIs, o Lithe facilita o acesso aos recursos da sua aplicação, configurando o CORS (Cross-Origin Resource Sharing) de forma eficiente para garantir que suas aplicações se comuniquem de maneira segura e eficaz.

Passo 1: Configurando o Ambiente

1. Instalação do Lithe

Primeiro, instale o Lithe, se ainda não o fez. Execute o seguinte comando no terminal:

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

2. Instalando o React

Em seguida, crie um novo projeto React dentro do seu projeto Lithe. Execute:

npx create-react-app frontend
cd frontend

Passo 2: Instalando e Configurando CORS

1. Instalando o Módulo CORS

Para utilizar o middleware CORS no seu projeto Lithe, você precisa instalar o pacote lithemod/cors. Execute o seguinte comando:

composer require lithemod/cors

2. Usando o Middleware CORS

Após a instalação, você deve configurar o middleware CORS em seu aplicativo Lithe. Abra o arquivo principal src/App.php e adicione o seguinte código:

Se você deseja permitir que várias origens acessem sua API, configure o CORS da seguinte forma:

use function Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

$app->use(cors());

$app->listen();

Por outro lado, se você quiser que apenas a sua aplicação React consuma a API, utilize a seguinte configuração:

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

Passo 3: Configurando o Backend com Lithe

1. Criando uma Rota API

No seu projeto Lithe, crie um novo roteador para fornecer dados ao React. Crie um arquivo de rota, como 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);
});

Após definir o arquivo de rota, você deve adicionar o roteador no seu aplicativo Lithe. Abra o arquivo principal src/App.php novamente e adicione o seguinte código antes de chamar o método listen:

// ...

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

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

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

// ...

O arquivo src/App.php ficaria assim:

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

$app = new \Lithe\App;

$app->use(cors());

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

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

$app->listen();

2. Testando a Rota

Inicie o servidor Lithe com o seguinte comando:

php line serve

Acesse http://localhost:8000/api/data para garantir que o JSON é retornado corretamente.

Passo 4: Configurando o Frontend com React

1. Consumindo a API no React

Abra o arquivo src/App.js no seu projeto React e substitua o conteúdo por:

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. Iniciando o Servidor React

Para iniciar o servidor de desenvolvimento do React, execute:

npm start

Passo 5: Verificando a Integração

Acesse http://localhost:3000 no seu navegador. Você deve ver a mensagem "Hello from Lithe!" e uma lista de itens retornados pela API.

Considerações Finais

Com isso, você integrou com sucesso o Lithe com o React e configurou o CORS para permitir que apenas a aplicação React acesse os recursos do backend ou permitir várias origens, conforme necessário. Agora você pode expandir sua aplicação conforme desejar.

Sinta-se à vontade para compartilhar suas experiências e dúvidas nos comentários!

Blog