Configurez Laravel en tant que backend API en installant Laravel, en configurant la base de données, en créant des itinéraires API et en renvoyant JSON à partir de contr?leurs, en utilisant éventuellement Laravel Sanctum pour l'authentification. 2. Choisissez entre un spa React autonome servi séparément ou en utilisant une inertie.js pour l'intégration de Laravel plus serrée, l'inertie permettant aux composants de réaction de fonctionner dans le système de routage et de session de Laravel. 3. Lorsque vous utilisez une inertie, installez les packages requis, configurez VITE, créez un composant Root React, placez les pages React dans Resources / JS / Pages / et renvoyez les réponses d'inertie à partir de routes avec des données passées sous forme de plans. 4. Pour une configuration découplée, exécutez Laravel et réagissez sur des domaines séparés, utilisez Axios ou récupérez pour appeler les API Laravel de React, et gérez correctement les COR et l'authentification. 5. Les meilleures pratiques incluent l'utilisation de VITE pour des constructions plus rapides, l'organisation de composants React par fonctionnalité, la mise en forme des réponses de l'API avec les ressources de l'API Laravel et le test des COR et l'authentification t?t. Le choix entre l'inertie et une application REACT autonome dépend de la complexité du projet et des préférences de l'équipe, avec une inertie simplifiant l'intégration complète de la pile et les spas autonomes offrant une plus grande flexibilité du frontend, les deux approches valides pour les applications modernes de la réaction de larave.

L'intégration de React avec Laravel vous permet de construire des fronts puissants et dynamiques tout en tirant parti des fonctionnalités backend robustes de Laravel comme le routage, l'authentification et les API. Voici comment le faire efficacement dans un projet Laravel moderne.

1. Configurez Laravel et créez une API

Tout d'abord, assurez-vous que Laravel est configuré pour agir comme une API backend.

• Installez Laravel via le compositeur:

  

   Composer Create-Project Laravel / Laravel Your-Project-Name

• Configurez votre fichier .env avec les paramètres de la base de données et exécutez les migrations:

   PHP Artisan Migrate

• Créer des routes API dans routes/api.php :

  

   Route :: Get ('/ Posts', [PostController :: Class, 'index']);

• Assurez-vous que vos contr?leurs renvoient JSON (ressources API ou collections éloquentes):

   Index de fonction publique ()
  {
      Return Post :: all ();
  }

Utilisez Laravel Sanctum si vous avez besoin d'authentification pour votre frontend React.

2. Choisissez comment servir React: Spa vs inertia.js

Vous avez deux approches principales:

Option A: Application autonome React (SPA)

• Build React séparément à l'aide de l'application React ou Create React.
• Servez-le à partir d'un domaine différent (par exemple, http://localhost:3000 ) ou en tant que fichiers statiques.
• Configurez Laravel vers les appels d'API proxy pendant le développement (facultatif).

? Mieux pour les grands fronts complexes avec de nombreux composants interactifs.

Option B: Utilisez Inertia.js (recommandé pour la simplicité)

L'inertie vous permet d'utiliser des composants React tout en restant dans le système de routage et de session de Laravel.

• Installez l'inertie:

   Le compositeur a besoin d'inertie / d'inertie-laravel

• Configurez l'échafaudage Frontend:

   NPM Install @ inertiajs / react react react-dom @ vitejs / plugin-react

• Mettre à jour vite.config.js :

   import {DefinConfig} de 'Vite';
  Importer React à partir de '@ vitejs / plugin-react';
  Importer Laravel de ?Laravel-vite-Plugin?;
  
  Exporter de défaut DefiConfig ({
    Plugins: [
      Laravel ({
        Entrée: ?Ressources / js / app.jsx?,
        actualiser: vrai,
      }),
      réagir(),
    ],
  });

• Créez votre composant Root React ( resources/js/app.jsx ):

   import {Createroot} à partir de 'react-dom / client';
  import {createInertiaApp} à partir de '@ inertiajs / react';
  
  CreateInertiaApp ({
    résolution: name => require (`./pages / $ {name}`),
    Configuration ({el, app, accessoires}) {
      Createroot (el) .Render (<app {... accessoires} />);
    },
    Titre: Titre => `Mon application | $ {title} `,
  });

• Retour des réponses d'inertie des routes de Laravel:

   Utiliser l'inertie \ inertie;
  
  Route :: get ('/', function () {
      retourner inertia :: render ('bienvenue', ['message' => 'Bonjour de Laravel!']);
  });

? Idéal pour les applications complètes où vous voulez le routage de la manipulation de Laravel et réagissez à alimenter l'interface utilisateur.

3. Construire des composants de réaction à l'intérieur de Laravel

Avec inertie ou configuration groupée:

• Placer les composants React dans resources/js/Pages/ .

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

   import {usePage} de '@ inertiajs / react';
  
  Exporter la fonction default PostIndex ({Posts}) {
    const {props} = usePage ();
    retour (
      <div>
        <h1> Posts </h1>
        {props.posts.map (post => (
          <div key = {post.id}> {post.title} </div>
        ))}
      </div>
    ));
  }

• Passez les données de Laravel Controller:

   return inertia :: render ('Posts / index', [
      'Posts' => Post :: all ()
  ]));

? Pour les données dynamiques (par exemple, la recherche, la pagination), utilisez des visites d'inertie ou Axios pour frapper les routes API Laravel.

4. Utilisez Laravel comme l'API réagit comme frontage (découplé)

Si vous préférez un frontend entièrement séparé:

• Gardez Laravel en marche sur api.yourapp.test (backend uniquement).

• Build React App (Using Vite, Next.js, etc.) sur localhost:3000 .

• Appelez les API Laravel via Axios ou récupérez:

   useEFFECT (() => {
    axios.get ('http: //api.yourapp.test/api/posts')
      .Then (res => setPosts (res.data))
      .Catch (err => console.error (err));
  }, []);

• Gérer les COR: Installez fruitcake/laravel-cors ou utilisez les caractéristiques du spa de Laravel Sanctum.

   le compositeur a besoin de gateaux aux fruits / lacs de laravel

?? N'oubliez pas de gérer l'authentification (sanctuaire / mondaine) et le CSRF sinon apatride.

Conseils finaux

• Utilisez Vite sur WebPack (builds plus rapides).
• Gardez les composants réagis organisés par page ou entités.
• Utilisez les ressources de l'API Laravel pour formater proprement la sortie JSON.
• Tester les COR et l'authentification t?t.

Fondamentalement, vous pouvez soit étroitement réagi par l'inertie ou le garder séparé en tant que spa frontal. L'inertie réduit la complexité et vous maintient dans l'écosystème de Laravel, tandis qu'une application REACT autonome donne plus de flexibilité frontale. Choisissez en fonction de vos besoins d'équipe et de projet.

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!