Sediakan Laravel sebagai backend API dengan memasang Laravel, mengkonfigurasi pangkalan data, mewujudkan laluan API, dan mengembalikan JSON dari pengawal, secara pilihan menggunakan Sanctum Laravel untuk pengesahan. 2. Pilih antara Spa React Spa yang dihidangkan secara berasingan atau menggunakan inersia.js untuk integrasi Laravel yang lebih ketat, dengan inersia yang membolehkan komponen React berfungsi dalam sistem penghalaan dan sesi Laravel. 3. Apabila menggunakan inersia, pasangkan pakej yang diperlukan, konfigurasikan Vite, buat komponen React Root, letakkan halaman React dalam Sumber/JS/Pages/, dan mengembalikan respons inersia dari laluan dengan data yang diluluskan sebagai prop. 4. Untuk persediaan yang dipadam, jalankan Laravel dan bertindak balas pada domain berasingan, gunakan AXIOS atau mengambil untuk memanggil API Laravel dari React, dan mengendalikan CORS dan pengesahan dengan betul. 5. Amalan terbaik termasuk menggunakan Vite untuk membina lebih cepat, menganjurkan komponen React mengikut ciri, memformat respons API dengan sumber API Laravel, dan ujian CORS dan pengesahan awal. Pilihan antara inersia dan aplikasi React Standalone bergantung kepada kerumitan projek dan keutamaan pasukan, dengan inersia memudahkan integrasi penuh dan spa mandiri yang menawarkan fleksibiliti frontend yang lebih besar, kedua-dua pendekatan yang sah untuk aplikasi Laravel-reaksi moden.

Mengintegrasikan React dengan Laravel membolehkan anda membina frontends yang kuat dan dinamik sambil memanfaatkan ciri backend Laravel yang teguh seperti penghalaan, pengesahan, dan API. Inilah caranya untuk melakukannya dengan berkesan dalam projek Laravel moden.

1. Sediakan Laravel dan buat API

Pertama, pastikan Laravel ditubuhkan untuk bertindak sebagai API backend.

• Pasang Laravel melalui Komposer:

  

   komposer membuat projek laravel/laravel-name anda

• Konfigurasikan fail .env anda dengan tetapan pangkalan data dan jalankan migrasi:

   PHP Artisan berhijrah

• Buat Laluan API di routes/api.php :

  

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

• Pastikan pengawal anda kembali JSON (Sumber API atau Koleksi Fasih):

   Indeks Fungsi Awam ()
  {
      Kembali pos :: semua ();
  }

Gunakan Sanctum Laravel jika anda memerlukan pengesahan untuk frontend React anda.

2. Pilih cara untuk bertindak bertindak balas: spa vs inersia.js

Anda mempunyai dua pendekatan utama:

Pilihan A: Aplikasi React Standalone (SPA)

• Membina React secara berasingan menggunakan Vite atau Buat App React.
• Hidangkannya dari domain yang berbeza (misalnya, http://localhost:3000 ) atau sebagai fail statik.
• Konfigurasikan Laravel ke panggilan API proksi semasa pembangunan (pilihan).

? Terbaik untuk frontends yang besar dan kompleks dengan banyak komponen interaktif.

Pilihan B: Gunakan inersia.js (disyorkan untuk kesederhanaan)

Inersia membolehkan anda menggunakan komponen React semasa tinggal di dalam sistem penghalaan dan sesi Laravel.

• Pasang inersia:

   Komposer memerlukan inerstijs/inersia-laravel

• Sediakan perancah depan:

   NPM Install @InertiaJs/React React React-dom @vitejs/plugin-react

• Kemas kini vite.config.js :

   import {defineconfig} dari 'vite';
  Import React dari '@vitejs/plugin-react';
  import Laravel dari 'laravel-vite-plugin';
  
  Eksport DefinectonFig lalai ({
    Plugin: [
      Laravel ({
        Input: 'Sumber/js/app.jsx',
        Refresh: Benar,
      }),
      bertindak balas (),
    ],
  });

• Buat komponen Root React anda ( resources/js/app.jsx ):

   import {createroot} dari 'react-dom/client';
  import {createinertiaapp} dari '@inertiajs/react';
  
  createInertiaApp ({
    menyelesaikan: nama => memerlukan (`./pages/$ {name}`),
    persediaan ({el, app, props}) {
      CREEATEROOT (EL) .render (<app {... props} />);
    },
    Tajuk: Tajuk => `Aplikasi Saya | $ {title} `,
  });

• Kembalikan respons inersia dari laluan Laravel:

   Gunakan inersia \ inersia;
  
  Route :: Get ('/', function () {
      kembali inersia :: render ('selamat datang', ['mesej' => 'hello dari laravel!']);
  });

? Hebat untuk aplikasi stack penuh di mana anda mahu pengendalian pengendalian Laravel dan bertindak balas yang menggerakkan UI.

3. Membina komponen React di Laravel

Dengan inersia atau persediaan yang dibundel:

• Letakkan komponen reaksi dalam resources/js/Pages/ .

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

   import {usepage} dari '@inertiajs/react';
  
  Eksport fungsi lalai postIndex ({posts}) {
    const {props} = usepage ();
    kembali (
      <dana>
        <h1> Posts </h1>
        {props.posts.map (post => ((
          <div key = {post.id}> {post.title} </div>
        ))}
      </div>
    );
  }

• Lulus data dari pengawal Laravel:

   kembali inersia :: render ('jawatan/indeks', [
      'Posts' => Post :: All ()
  ]);

? Untuk data dinamik (contohnya, carian, penomboran), gunakan lawatan inersia atau axios untuk memukul laluan API Laravel.

4. Gunakan Laravel sebagai API bertindak balas sebagai frontend (decoupled)

Sekiranya anda lebih suka frontend sepenuhnya berasingan:

• Pastikan Laravel berjalan pada api.yourapp.test (backend sahaja).

• Membina aplikasi React (menggunakan Vite, Next.js, dll) pada localhost:3000 .

• Hubungi API Laravel melalui Axios atau Fetch:

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

• Handle CORS: Pasang fruitcake/laravel-cors atau gunakan ciri spa Sanctum Laravel.

   Komposer memerlukan buah-buahan/laravel-cors

?? Ingatlah untuk menguruskan pengesahan (sanctum/sosialit) dan CSRF jika tidak tanpa stat.

Petua akhir

• Gunakan Vite Over Webpack (lebih cepat membina).
• Simpan komponen React yang dianjurkan oleh halaman atau ciri.
• Gunakan sumber API Laravel untuk memformat output JSON dengan bersih.
• CORS Ujian dan Pengesahan Awal.

Pada asasnya, anda boleh pasangan rapat bertindak balas melalui inersia atau memastikan ia terpisah sebagai spa frontend. Inersia mengurangkan kerumitan dan membuat anda dalam ekosistem Laravel, sementara aplikasi React Standalone memberikan lebih banyak fleksibiliti frontend. Pilih berdasarkan keperluan pasukan dan projek anda.

Atas ialah kandungan terperinci Bagaimana untuk mengintegrasikan React dengan Laravel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!