3 Formas de Integrar Laravel y React.js: Guía Paso a Paso

En el mundo del desarrollo web moderno, la combinación de React JS y Laravel se ha convertido en una de las stacks más potentes para crear aplicaciones dinámicas, escalables y de alto rendimiento. Laravel ofrece un backend robusto con herramientas como Eloquent ORM y autenticación integrada, mientras que React maneja interfaces de usuario reactivas y componentes reutilizables. Esta integración es ideal para SPAs (Single Page Applications), e-commerce, SaaS y más.

En esta guía SEO optimizada, exploraremos formas detalladas de integrar React con Laravel, incluyendo ejemplos prácticos de código. Cubriremos tres métodos principales: API headless, integración directa con Vite y el uso de Inertia.js. Si buscas un tutorial React Laravel 2025, ¡has llegado al lugar correcto!

Prerrequisitos para Integrar React y Laravel

Antes de empezar, asegúrate de tener instalado lo siguiente:

• PHP 8.2+: Requerido para Laravel 11+.
• Composer: Gestor de paquetes PHP.
• Node.js y npm: Para React y Vite (versión LTS recomendada).
• Base de datos: MySQL o PostgreSQL.
• Editor de código: VS Code con extensiones para PHP y JS.

Instala el instalador de Laravel globalmente:

bash

composer global require laravel/installer

Estos prerrequisitos te permitirán configurar un entorno sólido para integrar React JS con Laravel sin complicaciones.

Prerrequisitos para Integrar React y Laravel

Método 1: Integración mediante API Headless (Laravel como Backend, React como Frontend Separado)

Este enfoque trata a Laravel como un API RESTful y React como un frontend independiente. Es perfecto para aplicaciones desacopladas donde el frontend se sirve desde un dominio diferente.

Pasos de Configuración

1. Crea un Proyecto Laravel:

   bash

   composer create-project laravel/laravel mi-app-laravel
   cd mi-app-laravel

2. Configura el API en Laravel:
   • En routes/api.php, define rutas RESTful:

     php

     use App\Http\Controllers\PostController;
     Route::apiResource('posts', PostController::class);

   • Crea un controlador con CRUD básico (php artisan make:controller PostController):

     php

     <?php
     namespace App\Http\Controllers;
     use App\Models\Post;
     use Illuminate\Http\Request;
     
     class PostController extends Controller
     {
         public function index()
         {
             return Post::all();
         }
     
         public function store(Request $request)
         {
             $post = Post::create($request->all());
             return response()->json($post, 201);
         }
     
         public function destroy($id)
         {
             Post::findOrFail($id)->delete();
             return response()->json(null, 204);
         }
     }

   • Maneja CORS instalando fruitcake/laravel-cors y configurándolo en config/cors.php.
3. Crea la App React Separada:

   bash

   npx create-react-app frontend-react
   cd frontend-react
   npm install axios

4. Conecta React al API de Laravel:
   • En un componente React (src/App.js):

     jsx

     import React, { useEffect, useState } from 'react';
     import axios from 'axios';
     
     function App() {
       const [posts, setPosts] = useState([]);
     
       useEffect(() => {
         axios.get('http://localhost:8000/api/posts')
           .then(response => setPosts(response.data));
       }, []);
     
       const deletePost = (id) => {
         axios.delete(`http://localhost:8000/api/posts/${id}`)
           .then(() => setPosts(posts.filter(post => post.id !== id)));
       };
     
       return (
         <div>
           {posts.map(post => (
             <div key={post.id}>
               <h3>{post.title}</h3>
               <button onClick={() => deletePost(post.id)}>Eliminar</button>
             </div>
           ))}
         </div>
       );
     }
     
     export default App;

   • Ejecuta: php artisan serve (Laravel en puerto 8000) y npm start (React en 3000).

Este método asegura separación total y escalabilidad, ideal para equipos frontend/backend independientes.

Método 1: Integración mediante API Headless (Laravel como Backend, React como Frontend Separado)

Método 2: Integración Directa con Vite (React Embebido en Laravel)

Usa Vite para compilar assets de React directamente en vistas Blade de Laravel. Es simple para apps monolíticas.

Pasos de Configuración

1. Instala Laravel con UI:

   bash

   composer require laravel/ui
   php artisan ui react
   npm install && npm run dev

2. Crea un Componente React:
   • En resources/js/components/Example.jsx:

     jsx

     import React from 'react';
     
     function Example() {
       return (
         <div>
           <h1>¡Hola desde React en Laravel!</h1>
           <p>Este es un componente integrado.</p>
         </div>
       );
     }
     
     export default Example;

   • Actualiza resources/js/app.js:

     js

     import React from 'react';
     import ReactDOM from 'react-dom';
     import Example from './components/Example';
     
     if (document.getElementById('example')) {
       ReactDOM.render(<Example />, document.getElementById('example'));
     }

3. Incluye en una Vista Blade (resources/views/welcome.blade.php):

   blade

   <div id="example"></div>
   <script src="{{ mix('js/app.js') }}"></script>

Ejecuta npm run dev para hot-reloading. Este método es rápido para prototipos

Método 2: Integración Directa con Vite (React Embebido en Laravel)

Método 3: Usando Inertia.js para SPAs Sin API (Ejemplo Detallado de CRUD)

Inertia.js permite SPAs sin endpoints API, compartiendo datos directamente entre Laravel y React. Es la opción moderna para 2025.

Pasos de Configuración

1. Crea Proyecto Laravel:

   bash

   composer create-project laravel/laravel inertia-react-app
   cd inertia-react-app

2. Instala Inertia y React:

   bash

   composer require inertiajs/inertia-laravel
   npm install @inertiajs/react react react-dom @vitejs/plugin-react

3. Configura Middleware (en bootstrap/app.php):

   php

   ->withMiddleware(function (Middleware $middleware) {
       $middleware->web(append: [
           \App\Http\Middleware\HandleInertiaRequests::class,
       ]);
   })

4. Actualiza Vite (vite.config.js):

   js

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/js/app.jsx'],
               refresh: true,
           }),
           react(),
       ],
   });

5. Crea Entry Point (resources/js/app.jsx):

   jsx

   import React from 'react';
   import { createRoot } from 'react-dom/client';
   import { createInertiaApp } from '@inertiajs/react';
   
   createInertiaApp({
       resolve: name => import(`./Pages/${name}`),
       setup({ el, App, props }) {
           const root = createRoot(el);
           root.render(<App {...props} />);
       },
   });

6. Layout Blade (resources/views/app.blade.php):

   blade

   <!DOCTYPE html>
   <html>
   <head>
       @vite('resources/js/app.jsx')
   </head>
   <body>
       @inertia
   </body>
   </html>

 

Ejemplo Práctico: CRUD de Posts con Subida de Archivos

1. Modelo y Migración:

   bash

   php artisan make:model Post -m

   En migración:

   php

   Schema::create('posts', function (Blueprint $table) {
       $table->id();
       $table->string('title');
       $table->text('content');
       $table->string('file_path')->nullable();
       $table->timestamps();
   });

   php artisan migrate

2. Controlador (php artisan make:controller PostController):

   php

   <?php
   namespace App\Http\Controllers;
   use App\Models\Post;
   use Illuminate\Http\Request;
   use Inertia\Inertia;
   
   class PostController extends Controller
   {
       public function index()
       {
           return Inertia::render('Posts/Index', [
               'posts' => Post::all(),
           ]);
       }
   
       public function create()
       {
           return Inertia::render('Posts/Create');
       }
   
       public function store(Request $request)
       {
           $validated = $request->validate([
               'title' => 'required|string|max:255',
               'content' => 'required|string',
               'file' => 'nullable|file',
           ]);
   
           $filePath = $request->file('file')?->store('uploads', 'public');
   
           Post::create(array_merge($validated, ['file_path' => $filePath]));
   
           return redirect()->route('posts.index');
       }
   
       // Similar para edit, update, destroy...
   }

3. Rutas (routes/web.php):

   php

   use App\Http\Controllers\PostController;
   Route::resource('posts', PostController::class);

4. Componentes React:

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

     jsx

     import React from 'react';
     import { Link } from '@inertiajs/react';
     
     export default function Index({ posts }) {
       return (
         <div>
           <Link href="/posts/create">Crear Post</Link>
           <ul>
             {posts.map(post => (
               <li key={post.id}>
                 {post.title}
                 <Link href={`/posts/${post.id}/edit`}>Editar</Link>
               </li>
             ))}
           </ul>
         </div>
       );
     }

   • resources/js/Pages/Posts/Create.jsx:

     jsx

     import React from 'react';
     import { useForm } from '@inertiajs/react';
     
     export default function Create() {
       const { data, setData, post, errors } = useForm({
         title: '', content: '', file: null,
       });
     
       const handleSubmit = (e) => {
         e.preventDefault();
         post('/posts');
       };
     
       return (
         <form onSubmit={handleSubmit}>
           <input type="text" value={data.title} onChange={e => setData('title', e.target.value)} placeholder="Título" />
           {errors.title && <div>{errors.title}</div>}
           <textarea value={data.content} onChange={e => setData('content', e.target.value)} placeholder="Contenido" />
           {errors.content && <div>{errors.content}</div>}
           <input type="file" onChange={e => setData('file', e.target.files[0])} />
           {errors.file && <div>{errors.file}</div>}
           <button type="submit">Crear</button>
         </form>
       );
     }

Ejecuta php artisan serve y npm run dev. ¡Tendrás un CRUD completo con navegación SPA!

Método 3: Usando Inertia.js para SPAs Sin API (Ejemplo Detallado de CRUD)

El Futuro de React y Laravel

Integrar React JS con Laravel abre puertas a aplicaciones web innovadoras y eficientes. Elige el método según tu proyecto: API para desacoplamiento, Vite para simplicidad o Inertia.js para SPAs fluidas. Con estos ejemplos detallados, estás listo para implementar en 2025.

1. Laravel como backend API + React como frontend

Seguirá siendo la integración más común.
Laravel se centra en:

• APIs rápidas (Laravel Octane)

• Autenticación moderna (Sanctum/Passport)

• Microservicios y colas

React se encarga de la UI interactiva (Next.js, RSC).

---

2. Crecimiento de Inertia.js

Inertia permite usar React sin una API tradicional, haciendo que Laravel actúe como backend + router.
El futuro apunta a:

• Menos complejidad

• Experiencia tipo SPA sin necesidad de gestionar un API REST

---

3. Laravel como “motor de datos” y React como “motor de interfaz”

Tendencia clara:

• Laravel maneja lógica, seguridad, base de datos

• React maneja la experiencia de usuario, SSR y performance

Especialmente con Next.js + Laravel API.

---

4. Integraciones más optimizadas

• Mejor soporte para SSR e hidración desde Laravel

• Autenticación más simple entre ambos

• Reutilización de validaciones, tipos y esquemas

---

En resumen

La integración React + Laravel seguirá fuerte, pero evolucionará hacia dos caminos:

1️⃣ Laravel como API + React (Next.js) como frontend completo
2️⃣ Laravel + React via Inertia para proyectos rápidos y sin tanta arquitectura

El Futuro de React y Laravel

---

Leido 2466 veces | 1 usuarios