A continuación, te explico cómo integrar Laravel con React.js usando Vite.js como bundler en lugar de create-react-app o el enfoque predeterminado de Laravel con Breeze. Usaremos una tabla de suscriptores como ejemplo práctico. Te guiaré paso a paso para ambos enfoques: Laravel como API con React separado y Laravel con React integrado.

Laravel como Backend (API) + React con Vite como Frontend Separado

Paso 1: Configurar Laravel como API

1. Instalar Laravel:

   bash

   composer global require laravel/installer
   laravel new laravelReactApi
   cd laravelReactApi

2. Configurar la Base de Datos: Edita .env:

   text

   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=laravelreactapi
   DB_USERNAME=root
   DB_PASSWORD=

3. Crear Modelo y Migración para Suscriptores:

   bash

   php artisan make:model Subscriber -mcr

   • Edita la migración (database/migrations/xxxx_create_subscribers_table.php):

     php

     use Illuminate\Database\Migrations\Migration;
     use Illuminate\Database\Schema\Blueprint;
     use Illuminate\Support\Facades\Schema;
     
     class CreateSubscribersTable extends Migration
     {
         public function up()
         {
             Schema::create('subscribers', function (Blueprint $table) {
                 $table->id();
                 $table->string('name');
                 $table->string('email')->unique();
                 $table->boolean('active')->default(true);
                 $table->timestamps();
             });
         }
     
         public function down()
         {
             Schema::dropIfExists('subscribers');
         }
     }

   • Ejecuta la migración:

     bash

     php artisan migrate

4. Configurar el Controlador: Edita app/Http/Controllers/SubscriberController.php:

   php

   namespace App\Http\Controllers;
   
   use App\Models\Subscriber;
   use Illuminate\Http\Request;
   
   class SubscriberController extends Controller
   {
       public function index()
       {
           return Subscriber::all();
       }
   
       public function store(Request $request)
       {
           $request->validate([
               'name' => 'required|string|max:255',
               'email' => 'required|email|unique:subscribers,email',
           ]);
           $subscriber = Subscriber::create($request->all());
           return response()->json($subscriber, 201);
       }
   }

5. Definir Rutas API: En routes/api.php:

   php

   use App\Http\Controllers\SubscriberController;
   
   Route::get('/subscribers', [SubscriberController::class, 'index']);
   Route::post('/subscribers', [SubscriberController::class, 'store']);

6. Habilitar CORS: Instala el paquete CORS:

   bash

   php artisan config:publish cors

   Edita config/cors.php:

   php

   return [
   
       /*
       |--------------------------------------------------------------------------
       | Cross-Origin Resource Sharing (CORS) Configuration
       |--------------------------------------------------------------------------
       |
       | Here you may configure your settings for cross-origin resource sharing
       | or "CORS". This determines what cross-origin operations may execute
       | in web browsers. You are free to adjust these settings as needed.
       |
       | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
       |
       */
   
       'paths' => ['api/*', 'sanctum/csrf-cookie'],
       'allowed_methods' => ['*'],
       'allowed_origins' => ['*'],
       'allowed_origins_patterns' => [],
       'allowed_headers' => ['*'],
       'exposed_headers' => [],
       'max_age' => 0,
       'supports_credentials' => false,
   ];

7. Iniciar el Servidor:

   bash

   php artisan serve

Paso 2: Configurar React con Vite

1. Crear el Proyecto React con Vite:

   bash

   npm create vite@latest frontendReact -- --template react
   cd frontendReact
   npm install

2. Instalar Axios:

   bash

   npm install axios

3. Crear un Componente para Suscriptores: Edita src/App.jsx:

   jsx

   import { useEffect, useState } from 'react'
   import './App.css'
   import axios from 'axios';
   
   function App() {
     const [subscribers, setSubscribers] = useState([]);
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
   
     useEffect(()=>{
       fetchSubscribers()
     },[]);
   
     const fetchSubscribers = async()=>{
       const response = await axios.get("http://localhost:8000/api/suscribers");
       setSubscribers(response.data)
     }
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       const response = await axios.post("http://localhost:8000/api/suscribers",{name,email});
       setSubscribers([...subscribers,response.data]);
       setName('');
       setEmail('');
     }
   
     return(
       <div>
         <form onSubmit={handleSubmit}>
           <input type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="Nombre"            
                 />
           <input
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder="Correo"
             />
           <button type="submit">Suscribir</button>
         </form>
         <ul>
           { subscribers.map((subscriber)=>(
             <li key={subscriber.id}>{subscriber.name} - {subscriber.email} ({subscriber.active?'Activo':'Inactivo'})</li>
           ))
           }        
         </ul>
       </div>
     )
   
   }
   
   export default App

4. Iniciar Vite:

   bash

   npm run dev

   Vite corre por defecto en http://localhost:5173.

Resultado

• Laravel en http://localhost:8000.
• React con Vite en http://localhost:5173.
• CORS permite la comunicación entre ambos.

Leido 6789 veces | 5 usuarios