? ?????? Lithe ?????? React ?????? ???? ??? ???? Lithe? ????? ?????? ???? ???? ??? ?????. Lithe? API ??? ??? ?? ??? CORS(Cross-Origin Resource Sharing)? ????? ???? ??????? ???? ????? ??? ? ??? ???? ?????? ???? ?? ???? ? ?? ????.

1??: ?? ??

1. Lithe ??

?? ???? ???? ?? Lithe? ?????. ????? ?? ??? ?????:

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

2. ??? ??

???? 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

JSON? ???? ????? ????? http://localhost:8000/api/data? ??????.

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 ??? ????? ?? ?? ??? ?????!