Mostrar 5 tareas con Laravel + Inertia + React (sin guardar)

 

Mostrar 5 tareas con Laravel + Inertia + React (sin guardar)

En este tutorial crearemos un ejemplo muy pequeño que solo muestra una lista de 5 tareas (con id y nombre). No incluiremos formulario ni funcionalidad de guardado, para que entiendas claramente cómo se obtienen y envían los datos desde el controlador al componente React a través de Inertia.

Compararemos con el enfoque tradicional (Blade) para que veas la diferencia.

1. Estructura de archivos

text
routes/web.php                          → ruta
app/Http/Controllers/TareaController.php → controlador
resources/js/Pages/Tareas.jsx           → componente React

2. Crear el proyecto (si no lo tienes)

Si ya tienes un proyecto con Inertia + React, salta este paso. Si no:

bash
composer create-project laravel/laravel ejemplo-inertia
cd ejemplo-inertia
composer require inertiajs/inertia-laravel
php artisan inertia:middleware
npm install @inertiajs/react @inertiajs/inertia @vitejs/plugin-react react react-dom

Configura Vite y el archivo app.jsx como se indicó en el tutorial anterior (o usa la configuración por defecto de Laravel con Inertia).

3. Ruta (web.php)

php
<?php

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

Route::get('/tareas', [TareaController::class, 'index'])->name('tareas.index');

Solo necesitamos una ruta GET para mostrar la lista.

4. Controlador (TareaController.php)

php
<?php

namespace App\Http\Controllers;

use Inertia\Inertia;

class TareaController extends Controller
{
    public function index()
    {
        // Arreglo fijo de 5 tareas (simulando datos)
        $tareas = [
            ['id' => 1, 'nombre' => 'Aprender Laravel'],
            ['id' => 2, 'nombre' => 'Estudiar Inertia'],
            ['id' => 3, 'nombre' => 'Practicar React'],
            ['id' => 4, 'nombre' => 'Hacer un ejemplo'],
            ['id' => 5, 'nombre' => 'Compartir conocimiento'],
        ];

        // Renderizar el componente React 'Tareas' y pasarle las tareas como prop
        return Inertia::render('Tareas', [
            'tareas' => $tareas
        ]);
    }
}

Explicación:

  • El método index() crea un arreglo con 5 tareas (podrían venir de una base de datos).

  • Inertia::render('Tareas', ['tareas' => $tareas]) le dice a Inertia que cargue el componente Tareas.jsx y le pase la variable tareas como propiedad (prop).

5. Componente React (Tareas.jsx)

Crea resources/js/Pages/Tareas.jsx:

jsx
export default function Tareas({ tareas }) {
    return (
        <div style={{ maxWidth: '600px', margin: '40px auto', padding: '20px', fontFamily: 'sans-serif' }}>
            <h1>📋 Lista de Tareas</h1>

            {tareas.length === 0 ? (
                <p style={{ color: '#888' }}>No hay tareas.</p>
            ) : (
                <ul style={{ listStyle: 'none', padding: 0 }}>
                    {tareas.map(tarea => (
                        <li key={tarea.id} style={{ background: '#f0f0f0', margin: '5px 0', padding: '10px', borderRadius: '4px' }}>
                            <strong>ID:</strong> {tarea.id} - <strong>Nombre:</strong> {tarea.nombre}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}

Explicación:

  • El componente recibe tareas como prop (gracias a Inertia).

  • Simplemente itera sobre el arreglo y muestra cada tarea en una lista.

  • No hay formulario, ni botones, ni interacción.

6. Flujo de obtención de datos

  1. El usuario visita /tareas.

  2. Laravel enruta la petición al controlador TareaController@index.

  3. El controlador crea el arreglo $tareas y lo pasa a Inertia::render().

  4. Inertia serializa los datos y los envía al frontend junto con el nombre del componente.

  5. El frontend (React) renderiza el componente Tareas y le inyecta la prop tareas.

  6. El usuario ve la lista en pantalla.

No hay recarga de página (es un SPA, aunque la primera carga es completa).
No se usa AJAX manual; Inertia se encarga de la comunicación.

7. Comparativa con el enfoque tradicional (Blade)

Si usáramos Blade sin Inertia, haríamos lo siguiente:

Controlador (igual, pero devolviendo vista)

php
public function index()
{
    $tareas = [...]; // mismo arreglo
    return view('tareas.index', compact('tareas'));
}

Vista Blade (resources/views/tareas/index.blade.php)

blade
<!DOCTYPE html>
<html>
<head><title>Tareas</title></head>
<body>
    <h1>📋 Lista de Tareas</h1>
    <ul>
        @foreach($tareas as $tarea)
            <li>ID: {{ $tarea['id'] }} - Nombre: {{ $tarea['nombre'] }}</li>
        @endforeach
    </ul>
</body>
</html>

Diferencias clave

AspectoBlade (tradicional)Inertia + React
RenderizadoEl servidor genera HTML completo y lo envía.El servidor envía solo los datos (JSON) y el frontend renderiza el componente.
Actualización de datosPara cambiar la lista (ej. agregar), habría que recargar toda la página.Inertia permite actualizar solo los datos y re-renderizar el componente sin recarga total (si se implementa guardado).
Manejo de estadoEl estado vive en el servidor (sesión, BD) y se refleja al recargar.El estado puede mantenerse en el frontend y sincronizarse con el servidor mediante peticiones.
InteractividadPara acciones dinámicas (ej. filtros), se necesita JavaScript adicional o recargas.Inertia facilita la interacción sin recargas, usando componentes reactivos.

En este ejemplo solo mostramos datos, por lo que la diferencia no es tan evidente, pero sienta las bases para cuando agregues guardado o edición.

8. ¿Cómo se obtienen los datos en Inertia?

  • El controlador devuelve un array asociativo con las props que quieras pasar al componente.

  • Inertia convierte ese array en un objeto JSON y lo envía al cliente junto con el nombre del componente.

  • El cliente (React) recibe esas props y las usa para renderizar.

No necesitas crear una API REST; usas las rutas y controladores normales de Laravel, y Inertia se encarga del “puente”.

9. Prueba el ejemplo

  1. Ejecuta php artisan serve y npm run dev.

  2. Ve a http://localhost:8000/tareas.

  3. Verás la lista de 5 tareas.

¡Listo! Un ejemplo mínimo, sin guardado, que muestra cómo obtener y mostrar datos con Inertia + React.

Conclusión

Este ejemplo te muestra la base de Inertia: el controlador entrega datos, el componente los recibe y los pinta. La diferencia con Blade es que aquí tienes un frontend reactivo y la comunicación es más eficiente, aunque para solo mostrar datos la complejidad es similar. La verdadera potencia aparece cuando empiezas a agregar interacciones (guardar, editar, eliminar) sin recargar la página, manteniendo la lógica en Laravel.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tareas con Laravel + Inertia + Jetstream

  Tareas con Laravel + Inertia + Jetstream 📋 Descripción del Proyecto Aplicación ultra simple de tareas: ✅ Agregar una tarea ✅ Ver una tarea guardada ✅ Almacenar en arreglo (sesión) ❌ Sin listas largas, sin editar, sin eliminar 🚀 1. INSTALACIÓN (PASO A PASO) 1.1 Crear proyecto bash # Crear proyecto Laravel 10 (compatible con PHP 8.0+) composer create-project laravel/laravel:^10.0 tareas-app composer create-project laravel/laravel tareas-app cd tareas-app 1.2 Instalar Jetstream con Inertia bash # Instalar Jetstream composer require laravel/jetstream # Instalar Jetstream con Inertia (sin equipos) php artisan jetstream:install inertia 1.3 Instalar dependencias frontend bash # Instalar paquetes NPM npm install # Compilar assets npm run build 1.4 Configurar entorno bash # Crear archivo .env cp .env.example .env copy .env.example .env # Generar clave php artisan key:generate # Configurar base de datos SQLite touch database/database.sqlite type nul > databas...
Leer más

HACER CAMBIOS-AL EJEMPLO POR DEFECTO

  Una vez que has configurado tu proyecto con Laravel, Inertia y el Starter Kit elegido, el siguiente paso es entender cómo modificar la página de bienvenida por defecto y empezar a construir tu aplicación. En el ecosistema de Laravel con Inertia, la página de bienvenida ya no es una plantilla Blade tradicional, sino un componente de Vue o React que funciona como el punto de entrada de tu interfaz. Aquí tienes un tutorial paso a paso para hacer tus primeros cambios. 🚀 Entendiendo la Estructura del Proyecto Con el Starter Kit de Laravel (que incluye Vue/React e Inertia), la página de bienvenida que ves al acceder a la raíz de tu proyecto ya no está en resources/views/welcome.blade.php . En su lugar, es un componente de frontend gestionado por Inertia . El punto de entrada del frontend : El archivo resources/js/app.js (o app.ts si usas TypeScript) es donde se configura y arranca la aplicación Inertia . El componente principal : La página de inicio se encuentra en resources/js/Page...
Leer más

Laravel + Inertia - ejemplo

  Perfecto! Vamos a construir un ejemplo mínimo y funcional con Laravel + Inertia + Vue 3 . El ejemplo tendrá: Un input para escribir una tarea. Un botón para guardar esa tarea. La tarea se almacenará en sesión (para no complicar con base de datos) y se mostrará debajo. 1. Estructura de archivos que vamos a tocar text routes/web.php → ruta principal app/Http/Controllers/TareaController.php → controlador resources/js/Pages/Tarea.vue → componente Vue (la vista) 2. Ruta y Controlador routes/web.php php <?php use App \ Http \ Controllers \ TareaController ; use Illuminate \ Support \ Facades \ Route ; Route :: get ( '/tarea' , [ TareaController :: class , 'index' ] ) -> name ( 'tarea.index' ) ; Route :: post ( '/tarea' , [ TareaController :: class , 'store' ] ) -> name ( 'tarea.store' ) ; app/Http/Controllers/TareaController.php php <?php namespace App \ Http \ Controllers ; use Illuminate \ Http \ ...
Leer más