jueves, 13 de febrero de 2025

Top 5 de la semana

Artículos relacionados

Cómo crear una web con Laravel e Inertia.js: Guía para principiantes

Laravel e Inertia.js son dos herramientas poderosas que, combinadas, te permiten desarrollar aplicaciones web modernas de una forma sencilla y eficiente. En este artículo, aprenderás a crear una web con Laravel e Inertia.js paso a paso, incluso si eres un principiante.

¿Qué es Laravel?

Laravel es un framework de PHP muy popular que se utiliza para desarrollar aplicaciones web robustas y seguras. Es conocido por su facilidad de uso, una curva de aprendizaje amigable, y una amplia variedad de herramientas y bibliotecas que simplifican el desarrollo.

¿Qué es Inertia.js?

Inertia.js es una tecnología que conecta Laravel (backend) con un frontend basado en frameworks JavaScript modernos como React o Vue.js, sin la necesidad de crear una API completa. Es ideal si prefieres trabajar con un solo stack y te permite desarrollar Single Page Applications (SPA) de manera muy sencilla.

Preparativos: Instalación y Configuración

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

  • PHP (>= 8.0)
  • Composer (para gestionar las dependencias de PHP)
  • Node.js y npm (para manejar las dependencias de JavaScript)
  • Un entorno local de desarrollo como XAMPP o Laravel Sail.
Paso 1: Crear un Proyecto de Laravel

Primero, debes crear un proyecto nuevo de Laravel. Abre tu terminal y ejecuta el siguiente comando:

composer create-project --prefer-dist laravel/laravel nombre-del-proyecto

Entra en la carpeta del proyecto recién creado:

cd nombre-del-proyecto
Paso 2: Instalar Inertia.js y React

Vamos a instalar Inertia.js y React para comenzar a trabajar. Primero, instalemos Inertia.js en Laravel:

composer require inertiajs/inertia-laravel

Después, instala React y la biblioteca de Inertia.js para el frontend:

npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom

Finalmente, instala Laravel Breeze, que proporciona una configuración de autenticación básica:

composer require laravel/breeze --dev
php artisan breeze:install react
npm install && npm run dev

Laravel Breeze configura autenticación básica (registro, login, etc.) usando Inertia.js y React, lo cual es perfecto para principiantes.

Paso 3: Configurar Middleware y Rutas

Para que Laravel funcione correctamente con Inertia.js, debes agregar el middleware de Inertia. Asegúrate de que el middleware HandleInertiaRequests esté registrado en el archivo Kernel.php:

// app/Http/Kernel.php

protected $middlewareGroups = [
    'web' => [
        // Otros middlewares
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],
];

Luego, crea una ruta para mostrar la página principal de tu aplicación:

// routes/web.php

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'message' => '¡Bienvenido a tu primera web con Laravel e Inertia.js!',
    ]);
});

En este ejemplo, estamos devolviendo una vista llamada Welcome usando Inertia.js.

Paso 4: Crear Componentes de React

Vamos a crear un componente simple en React para mostrar un mensaje. Dirígete a la carpeta resources/js/Pages y crea un archivo llamado Welcome.jsx:

// resources/js/Pages/Welcome.jsx
import React from 'react';

const Welcome = ({ message }) => {
    return (
        <div>
            <h1>{message}</h1>
            <p>¡Este es tu primer proyecto con Laravel e Inertia.js!</p>
        </div>
    );
};

export default Welcome;
Paso 5: Compilar los Archivos

Para ver los cambios, debes compilar tus archivos de JavaScript con Laravel Mix. Ejecuta el siguiente comando:

npm run dev

Laravel Mix compilará todos los archivos JS y CSS para que puedas ver los cambios en tu navegador.

Paso 6: Iniciar el Servidor

Finalmente, inicia el servidor de desarrollo de Laravel:

php artisan serve

Visita http://localhost:8000 en tu navegador y deberías ver el mensaje que configuraste en tu componente Welcome.

Resumen Final

Con Laravel e Inertia.js, puedes crear aplicaciones web modernas de manera más rápida y sin tener que preocuparte demasiado por las complejidades de una API REST completa. Laravel proporciona la lógica del backend, mientras que Inertia.js y React se encargan de la experiencia del usuario, brindándote lo mejor de ambos mundos.

Si eres principiante, esta combinación te permitirá entrar al desarrollo de aplicaciones modernas de forma gradual, sin sentirte abrumado por las tecnologías. ¡Sigue explorando y experimentando para mejorar tu habilidad como desarrollador!

Jordi Morillo
Jordi Morillohttps://www.programador-web.com
Soy un programador PHP Senior con más de 20 años de experiencia en desarrollo web y administración de sistemas Linux, especializado en Symfony y metodologías ágiles como Scrum. He trabajado con tecnologías como MySQL, MongoDB y WordPress, y siempre busco nuevas oportunidades para seguir aprendiendo y aplicando mis conocimientos.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí

Artículos populares