Wie kann man Reagieren mit Laravel integrieren?

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!