1. Introducción

 

 1: Introducción al Curso de Laravel con Inertia.js y React

Duración estimada: 20 minutos

1.1 ¿De qué trata este curso?

¡Bienvenido al emocionante mundo del desarrollo web moderno! En este curso vamos a explorar un stack tecnológico que está revolucionando la forma en que construimos aplicaciones web: Laravel + Inertia.js + React.

¿Qué es el stack que vamos a aprender?

  • Laravel: El framework PHP más popular y completo del mercado

  • Inertia.js: Un puente que conecta tu backend con tu frontend sin necesidad de crear APIs

  • React: La librería de JavaScript más utilizada para construir interfaces de usuario

💡 Ventaja clave: No necesitarás crear APIs para conectar tu frontend con el backend. Todo funciona de manera nativa y mucho más rápida.

1.2 ¿Por qué este stack es diferente?

Tradicionalmente, cuando construimos una aplicación con Laravel y React, necesitamos:

  1. Crear un backend con Laravel que expone APIs (REST o GraphQL)

  2. Desarrollar un frontend separado con React que consume esas APIs

  3. Manejar autenticación mediante JWT o tokens

  4. Gestionar CORS, headers y múltiples configuraciones

Con Inertia.js, todo cambia:

  • ✅ Sin APIs: La comunicación es directa entre el servidor y el cliente

  • ✅ Rendimiento superior: Menos peticiones y carga más rápida

  • ✅ Experiencia SPA: Navegación fluida sin recargar la página

  • ✅ Mantienes el control: Todo el backend sigue siendo Laravel puro

1.3 Lo que aprenderás en este curso

🔹 Primera Parte: Desarrollo Full Stack (Laravel + Inertia + React)

  • Fundamentos del framework:

    • Creación de rutas, controladores y vistas

    • Manejo de formularios con validación

    • Subida de archivos al servidor (incluyendo AWS S3)

  • Componentes y navegación:

    • Creación de componentes de página y layout

    • Menús de navegación

    • Lazy Load para carga asíncrona

  • Seguridad y base de datos:

    • Sistema de login y protección de rutas

    • ORM Eloquent con PostgreSQL

    • Variables de entorno y GitHub Secrets

  • Despliegue:

    • Uso de LocalStack para emular AWS localmente

    • Pipeline CI/CD con GitHub Actions

    • Despliegue en AWS con Docker

🔹 Segunda Parte: Integración con Inteligencia Artificial

Vamos a desmitificar la creencia de que la IA solo se puede desarrollar con Python. Aprenderás a integrar:

  • OpenAI:

    • Uso de la API nativa para generar texto

    • Integración con el paquete oficial de Laravel

    • Generación de imágenes con DALL-E

  • DeepSeek:

    • Construcción de chatbots funcionales

  • Gemini (Google):

    • Integración y comparativa de rendimiento

1.4 Requisitos previos

Para aprovechar al máximo este curso, necesitas tener conocimientos básicos en:

TecnologíaNivel requerido
PHPBásico - Intermedio
LaravelBásico (opcional, pero recomendado)
JavaScriptBásico - Intermedio
ReactBásico (aprenderemos lo necesario)
SQLBásico

Herramientas que necesitarás:

bash
# Requisitos técnicos
- PHP 8.1 o superior
- Composer
- Node.js 16+ y NPM
- PostgreSQL o MySQL
- Docker (para LocalStack)
- Cuenta en AWS (para el despliegue)
- Cuenta en OpenAI/Gemini (para la sección de IA)
- Git y GitHub

1.5 Estructura del curso

El curso está diseñado con 16 ejemplos prácticos que construirás paso a paso:

  1. Configuración inicial del proyecto

  2. Rutas y controladores básicos

  3. Componentes de React con Inertia

  4. Layouts y navegación

  5. Formularios y validación

  6. Subida de archivos y S3

  7. Autenticación y seguridad

  8. Base de datos con Eloquent y PostgreSQL

  9. LocalStack para servicios AWS

  10. Despliegue con CI/CD

  11. Integración con OpenAI (API nativa)

  12. Integración con OpenAI (paquete oficial)

  13. Generación de imágenes con DALL-E

  14. Chatbot con DeepSeek

  15. Chatbot con Gemini

  16. Evaluación de rendimiento y comparativa

1.6 Ejemplo práctico: ¿Qué construirás?

Para que te hagas una idea del resultado final, aquí tienes un pequeño adelanto:

javascript
// Un componente React renderizado a través de Inertia.js
// Todo el backend está en Laravel

import { Head, Link } from '@inertiajs/react';

export default function Dashboard({ user, posts }) {
    return (
        <>
            <Head title="Dashboard" />
            <div className="p-6">
                <h1>Bienvenido, {user.name}</h1>
                <p>Tienes {posts.length} publicaciones</p>
                
                <Link href="/posts/create" className="btn-primary">
                    Crear nueva publicación
                </Link>
            </div>
        </>
    );
}

1.7 Sobre el instructor

César Cancino Zapata
Desde Viña del Mar, Chile

Con amplia experiencia en el desarrollo web y apasionado por las nuevas tecnologías, César te guiará a través de este stack moderno con un enfoque práctico y aplicable al mundo laboral.

1.8 Próximos pasos

¡Manos a la obra! En el siguiente tutorial:

  • Configuraremos nuestro entorno de desarrollo

  • Instalaremos Laravel, Inertia.js y React

  • Crearemos nuestro primer proyecto funcional

📝 Ejercicio de la clase

Para practicar lo aprendido:

  1. Investiga qué es el patrón MVC y cómo lo implementa Laravel

  2. Revisa la documentación oficial de Inertia.js

  3. Prepara tu entorno de desarrollo con los requisitos mencionados

📚 Recursos adicionales

¡Excelente! Has completado la introducción. Continúa al Tutorial 2 para comenzar con la configuración del proyecto

Comentarios

Publicar un comentario