Laravel? ????, ?????? ??, API ?? ?? ? ?????? JSON? ???? API ???? Laravel? ?????. 2. ????? ???? ??? ?? ?? ??? ????? inertia.js? ???? ? ??? Laravel ??? ???? Laravel? ??? ? ?? ??? ??? ?? ?? ??? ?? ? ? ????. 3. ??? ??? ? ??? ???? ????, VITE? ????, ?? ?? ?? ??? ???, ???/js/pages/? ?? ???? ????, ???? ?? ? ?????? ???? ?? ??? ??????. 4. ?? ? ??? ?? Laravel? ???? ??? ????? ???? Axios ?? Fetch? ???? React?? Laravel API? ???? CORS ? ??? ???? ??????. 5. ?? ???? ? ?? ??? Vite? ????, ???? ?? ?? ?? ??, Laravel API ???? API ??? ?????, ??? COR ? ??? ??? ????? ?? ?????. ??? ??? ?? ? ??? ??? ???? ??? ? ? ?? ??? ?? ????. ??? ? ?? ?? ? ??? ??? ????? ?? Laravel-React ?? ????? ?? ??? ?? ??? ?????.

Laravel? React? ???? Laravel? ??? ??? ??? ???, ?? ? API? ?? ??? ??? ??? ??? ? ????. ?? ?? ?????? ????? ???? ??? ??? ????.

1. Laravel? ???? API? ????

?? Laravel? ??? API ?????? ???? ??? ??????.

• ???? ?? Laravel ?? :

  

   ??? ?? ???? laravel/laravel your-project-name

• ?????? ???? .env ??? ???? ??????? ??????.

   PHP ?? ??

• routes/api.php ?? API ?? ?? :

  

   route :: get ( '/posts', [postcontroller :: class, 'index']);

• ????? JSON (API ??? ?? ?? ???)? ????? ??????.

   ?? ?? ?? ()
  {
      ?? ??? :: all ();
  }

REACT ??? ??? ?? ??? ??? ?? Laravel Sanctum? ??????.

2. React : SPA vs Inertia.js? ???? ??? ??????

? ?? ?? ?? ??? ????.

?? A : ??? ?? ? (SPA)

• Vite? ???? ??? React? ????? React ?? ??????.
• ?? ??? (? : http://localhost:3000 ) ?? ?? ???? ??????.
• ?? ?? Laravel? ??? API ??? ?????? (?? ??).

? ?? ?? ? ?? ????? ?? ??? ?? ??? ?? ?????.

?? B : Inertia.js ?? (???? ?? ??)

??? ???? Laravel? ??? ? ?? ??? ?? ???? ?? React ?? ??? ??? ? ????.

• ?? ?? :

   ????? ??/??-??? ?????

• ??? ?? ?? ?? ?? :

   npm install @inertiajs/React React React-dom @vitejs/plugin-react

• vite.config.js ? ???????.

   'vite'?? {defuleconfig} ?? ??;
  '@vitejs/plugin-react'?? ?? ?? ??;
  'Laravel-Vite-Plugin'?? LaRavel? ?? ????.
  
  ???? DefuleConfig ({
    ???? : [
      ? ?? ({
        ?? : 'Resources/JS/App.jsx',
        ?? ?? : ??,
      }),
      React (),
    ],,
  });

• ?? ?? ?? ??? ???? ( resources/js/app.jsx ) :

   'React-Dom/Client'?? {Createroot} ?? ??;
  '@inertiajs/react'?? {createInertiaApp} import;
  
  CreateInertiaApp ({
    Resolve : name => require (`./pages/$ {name}`),
    ?? ({el, app, props}) {
      Createroot (el) .render (<app {... props} />);
    },
    ?? : title =>`? ? | $ {title}`,
  });

• Laravel ???? ?? ?? ?? :

   ?? \ ?? ??;
  
  route :: get ( '/', function () {
      INTERIA? ????? :: ??? ( '??', [ 'message'=> 'Hello From Laravel!']);
  });

lavel Laravel ?? ???? ??? ? ?? ?? ?????.

3. Laravel ??? ?? ?? ??? ??????

?? ?? ?? ???? :

• resources/js/Pages/ ? ?? ?? ??? ??????.

• ? : resources/js/Pages/Posts/Index.jsx

   '@inertiajs/react'?? {usepage} ?? ??;
  
  ???? ?? ?? postIndex ({posts}) {
    const {propss} = usepage ();
    ?? (
      <div>
        <H1> ??? </h1>
        {props.posts.map (post => (
          <div key = {post.id}> {post.title} </div>
        ))}
      </div>
    );
  }

• Laravel Controller? ??? ?? :

   ?? ?? :: render ( 'posts/index', [
      '???'=> post :: all ()
  ]);

? ?? ??? (? : ??, Pagination)? ?? ?? ?? ?? Axios? ???? Laravel API ??? ????.

4. Laravel? API? ???? ??? ??? ????? (??)

??? ??? ??? ??? ???? ?? :

• api.yourapp.test ?? Laravel? ?? ?????? (??? ? ??).

• localhost:3000 ?? React ? (Vite, Next.js ?)? ??????.

• Axios? ?? Laravel API? ????? ?? ????.

   useeffect (() => {
    axios.get ( 'http : //api.yourapp.test/api/posts')
      .
      .catch (err => console.error (err));
  }, []);

• CORS ?? : fruitcake/laravel-cors ????? Laravel Sanctum? ?? ??? ??????.

   ???? ?? ???/? ?? ??? ?????

?? SANSTELES? ?? ?? ?? (Sanctum/Socialite) ? CSRF? ???????.

?? ?

• Webpack ?? Vite? ?????? (? ?? ??).
• ?? ?? ??? ??? ?? ???? ??????.
• Laravel API ???? ???? JSON ??? ???? ??????.
• CORS ? ??? ??? ???????.

????? ??? ?? ??? ??? ????? ??? ?? ??? ??? ??? ? ????. ??? ???? ??? Laravel ????? ??? ???? ?? ??? React ?? ? ?? ??? ?? ???? ?????. ? ? ???? ??? ?? ??????.

? ??? ??? Laravel? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!