reactInertia

Crear un Proyecto Simple en Laravel 11 con Inertia y React

Laravel 11 es compatible con Inertia.js y React , lo que permite construir aplicaciones modernas con un backend en Laravel y un frontend en React sin necesidad de una API separada.

Instalar Laravel 11

Ejecuta el siguiente comando para crear un nuevo proyecto en Laravel 11:

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

🔹 Esto creará una nueva aplicación Laravel llamada laravel-inertia-react.

Ahora entra en el proyecto:

cd laravel-inertia-react

Instalar Inertia.js y React

Ejecuta estos comandos para instalar Inertia.js y React :

composer require inertiajs/inertia-laravel

Luego instala los paquetes de frontend:

npm install @inertiajs/react react react-dom

Configurar Vite para React

Ejecuta:

npm install

Y edita vite.config.js, asegurándote de que usa React:

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(),
    ],
});

Configurar Inertia.js en Laravel

En app/Http/Kernel.php, agrega el middleware de Inertia :

protected $middlewareAliases = [
    'inertia' => \Inertia\Middleware::class,
];

🔹 Esto asegurará que Laravel puede manejar las solicitudes de Inertia.

Crear un Controlador para Inertia

Ejecuta el siguiente comando para crear un controlador llamado HomeController:

php artisan make:controller HomeController

Ahora edita app/Http/Controllers/HomeController.php y agrega este código:

namespace App\Http\Controllers;

use Inertia\Inertia;
use Inertia\Response;

class HomeController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Home', [
            'message' => '¡Bienvenido a Laravel 11 con Inertia y React!'
        ]);
    }
}

🔹 Este controlador renderiza la vista Home de Inertia y envía un mensaje.

Crear una Ruta para la Página Principal

En routes/web.php, define la ruta para la página de inicio con Inertia:

use App\Http\Controllers\HomeController;
use Illuminate\Support\Facades\Route;

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

Crear la Vista con React

Ahora, dentro de resources/js/Pages/, crea un archivo llamado Home.jsx:

import React from 'react';
import { Head } from '@inertiajs/react';

export default function Home({ message }) {
    return (
        <div>
            <Head title="Inicio" />
            <h1>{message}</h1>
            <p>Laravel 11 con Inertia y React funcionando correctamente.</p>
        </div>
    );
}

🔹 Esta es una simple página que muestra un mensaje recibido desde el backend.

Crear el Archivo `app.jsx`

En resources/js/, crea o edita app.jsx para inicializar Inertia:

import { createInertiaApp } from '@inertiajs/react';
import React from 'react';
import { createRoot } from 'react-dom/client';

createInertiaApp({
    resolve: name => import(`./Pages/${name}.jsx`),
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />);
    },
});

🔹 Esto le indica a Inertia que use React como framework de frontend.

Compilar y Ejecutar la Aplicación

Ejecuta estos comandos para iniciar el servidor de Laravel y Vite :

php artisan serve

npm run dev

🔹 Abre tu navegador en http://127.0.0.1:8000 y verás la página funcionando con React.

Pasos:

Instalar Laravel 11 → composer create-project laravel/laravel laravel-inertia-react
Instalar Inertia.js y React → composer require inertiajs/inertia-laravel && npm install @inertiajs/react react react-dom
Configurar Vite en vite.config.js
Agregar middleware de Inertia en app/Http/Kernel.php
Crear un controlador con Inertia (HomeController.php)
Definir una ruta en routes/web.php
Crear una vista Home.jsx en React
Configurar app.jsx para Inertia y React
Ejecutar php artisan serve y npm run dev