Richten Sie Laravel als API -Backend ein, indem Sie Laravel installieren, die Datenbank konfigurieren, API -Routen erstellen und JSON von Controllern zurückgeben, und verwenden Sie optional Laravel Sanctum zur Authentifizierung. 2. W?hlen Sie zwischen einem eigenst?ndigen React -Spa, der separat oder Tr?gheit verwendet wird. Js für eine strengere Laravel -Integration, wobei Tr?gheit die React -Komponenten innerhalb des Routing- und Sitzungssystems von Laravel funktionieren kann. 3. Bei Verwendung der Tr?gheit installieren Sie die erforderlichen Pakete, konfigurieren Sie VITE, erstellen Sie eine Root -React -Komponente, platzieren Sie die React -Seiten in Ressourcen/JS/Seiten/Rückgabe von Tr?gheitsantworten von Routen mit Daten, die als Requisiten übergeben wurden. 4. Für ein entkoppeltes Setup führen Sie Laravel aus und reagieren Sie sie auf separaten Dom?nen, verwenden Sie Axios oder holen Sie Laravel -APIs von React und behandeln Sie die Kors und die Authentifizierung ordnungsgem??. 5. Zu den Best Practices geh?rt die Verwendung von VITE für schnellere Builds, die Organisation von React -Komponenten durch Merkmal, Formatierung von API -Antworten mit Laravel -API -Ressourcen sowie frühzeitige Testen von CORs und Authentifizierung. Die Auswahl zwischen Tr?gheit und eigenst?ndiger React-App h?ngt von der Projektkomplexit?t und den Teampr?ferenzen ab, wobei Tr?gheit die Integration der Vollstapel und eigenst?ndige Spas vereinfacht, die eine gr??ere Frontend-Flexibilit?t bieten, beide gültige Ans?tze für moderne Laravel-React-Anwendungen.

Durch die Integration von React in Laravel k?nnen Sie leistungsstarke, dynamische Frontenden erstellen und gleichzeitig die robusten Backend -Funktionen von Laravel wie Routing, Authentifizierung und APIs nutzen. Hier erfahren Sie, wie Sie es effektiv in einem modernen Laravel -Projekt machen.

1. Richten Sie Laravel ein und erstellen Sie eine API

Stellen Sie zun?chst sicher, dass Laravel als Backend -API eingerichtet ist.

• Installieren Sie Laravel über Komponist:

  

   Komponist erstellen-project laravel/laravel your-project name

• Konfigurieren Sie Ihre .env -Datei mit Datenbankeinstellungen und führen Sie Migrationen aus:

   PHP Artisan migrieren

• Erstellen Sie API -Routen in routes/api.php :

  

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

• Stellen Sie sicher, dass Ihre Controller JSON zurückgeben (API -Ressourcen oder eloquente Sammlungen):

   ?ffentlicher Funktionsindex ()
  {
      Rückgabepost :: All ();
  }

Verwenden Sie Laravel Sanctum, wenn Sie eine Authentifizierung für Ihr React -Frontend ben?tigen.

2. W?hlen Sie, wie Sie reagieren k?nnen: Spa vs Tr?gheit.js

Sie haben zwei Hauptans?tze:

Option A: Standalone React App (SPA)

• Reagieren Sie React separat unter Verwendung von VITE oder erstellen Sie die React -App.
• Servieren Sie es aus einer anderen Dom?ne (z. B. http://localhost:3000 ) oder als statische Dateien.
• Konfigurieren Sie Laravel in Proxy -API -Aufrufen w?hrend der Entwicklung (optional).

? Am besten für gro?e, komplexe Frontenden mit vielen interaktiven Komponenten.

Option B: Inertia.js verwenden (für Einfachheit empfohlen)

In der Tr?gheit k?nnen Sie React -Komponenten verwenden, w?hrend Sie im Routing- und Sitzungssystem von Laravel bleiben.

• Tr?gheit installieren:

   Der Komponist ben?tigt Tr?gheit/Tr?gheit

• Frontend -Gerüst einrichten:

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

• Aktualisieren Sie vite.config.js :

   importieren {definconfig} aus 'vite';
  Importieren Sie von '@vitejs/Plugin-React';
  Importieren Sie Laravel aus 'Laravel-Vite-Plugin';
  
  Standard default DefinoConfig ({{
    Plugins: [
      Laravel ({{
        Eingabe: 'Ressourcen/js/app.jsx',
        Aktualisierung: wahr,
      }),
      reagieren(),
    ],
  });

• Erstellen Sie Ihre Root React -Komponente ( resources/js/app.jsx ):

   importieren {createroot} aus 'react-dom/client';
  Import {createInertiaApp} aus '@inertiajs/react';
  
  CreateInertiaApp ({{
    Aufl?sung: name => fordert (`./pages/$ {name}`),
    Setup ({El, App, Props}) {
      Createroot (el) .render (<App {... props} />);
    },
    Titel: Titel => `Meine App | $ {Titel} `,,
  });

• Return -Tr?gheitsreaktionen von Laravel Routen zurückgeben:

   Tr?gheit verwenden;
  
  Route :: get ('/', function () {
      Return Inertia :: Render ('Willkommen', ['Nachricht' => 'Hallo von Laravel!']);
  });

? Ideal für Vollstapel-Apps, in denen Sie das Routing von Laravel-Handhabung und die Benutzeroberfl?che reagieren m?chten.

3.. Bauen Sie Reaktionskomponenten in Laravel auf

Mit Tr?gheit oder einem gebündelten Setup:

• Platzieren Sie die Reagemokomponenten in resources/js/Pages/ .

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

   Import {usePage} aus '@@inertiajs/react';
  
  Standardfunktion exportieren postIndex ({posts}) {
    const {props} = usePage ();
    zurückkehren (
      <div>
        <h1> Beitr?ge </h1>
        {props.posts.map (post => (
          <div key = {post.id}> {post.title} </div>
        ))}
      </div>
    );
  }

• Daten von Laravel Controller übergeben:

   Tr?gheit zurückgeben :: Render ('Beitr?ge/Index', [
      'post' => post :: all ())
  ]);

? Verwenden Sie für dynamische Daten (z. B. Such, Pagination) Tr?gheitsbesuche oder Axios, um Laravel -API -Routen zu treffen.

4. Verwenden Sie Laravel als API als Frontend (entkoppelt)

Wenn Sie ein vollst?ndig separates Frontend bevorzugen:

• Halten Sie Laravel auf api.yourapp.test (nur Backend).

• Bauen Sie die React -App (mit Vite, Next.js usw.) auf localhost:3000 .

• Rufen Sie Laravel -APIs über Axios oder Abrufen auf:

   useEffect (() => {
    axios.get ('http: //api.yourapp.test/api/posts')
      .then (res => setposts (res.data))
      .Catch (err => console.Error (err));
  }, []);

• Griff CORs: Installieren Sie fruitcake/laravel-cors oder verwenden Sie die Spa-Funktionen von Laravel Sanctum.

   Der Komponist ben?tigt Fruitcake/Laravel-Cors

?? Denken Sie daran, die Authentifizierung (Sanctum/Socialite) und CSRF zu verwalten, wenn nicht staatenlos.

Endgültige Tipps

• Verwenden Sie Vite über Webpack (schnellere Builds).
• Halten Sie die reagierenden Komponenten nach Seite oder Funktion organisiert.
• Verwenden Sie Laravel API -Ressourcen, um JSON -Ausgabe sauber zu formatieren.
• Testkors und Authentifizierung frühzeitig.

Grunds?tzlich k?nnen Sie entweder reagieren, die über Tr?gheit reagieren oder sie als Frontend -Spa getrennt halten. Die Tr?gheit verringert die Komplexit?t und h?lt Sie im Laravel -?kosystem, w?hrend eine eigenst?ndige App -App mehr Frontend -Flexibilit?t bietet. W?hlen Sie basierend auf Ihren Team- und Projektanforderungen.

Das obige ist der detaillierte Inhalt vonWie kann man Reagieren mit Laravel integrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!