Frameworks Modernos
React, componentes, estado, Tailwind CSS y los fundamentos de Laravel: rutas, controladores y vistas.
0 / 8 lecciones completadas (0%)
React básico
Lección 02Componentes
Lección 03Estado
Lección 04Tailwind CSS
Lección 05Laravel básico
Lección 06Rutas
Lección 07Controladores
Lección 08Vistas
React básico
React es una librería de JavaScript para construir interfaces mediante componentes reutilizables. En lugar de escribir HTML fijo, se describe cómo debe verse la interfaz según los datos, y React se encarga de actualizar la pantalla cuando esos datos cambian.
function Saludo() {
return <h1>¡Hola desde React!</h1>;
}
export default Saludo;¿Cuál es la idea central de React?
Componentes
Un componente es una pieza independiente y reutilizable de interfaz, como una tarjeta de producto o un botón. Los componentes pueden recibir datos de entrada llamados «props» y componerse unos dentro de otros para construir interfaces complejas.
function TarjetaAlumno({ nombre, modulo }) {
return (
<div className="tarjeta">
<h3>{nombre}</h3>
<p>Modulo actual: {modulo}</p>
</div>
);
}
// Uso: <TarjetaAlumno nombre="Jorge" modulo={8} />¿Qué son las «props» de un componente en React?
Estado
El «estado» (state) es información que un componente puede cambiar con el tiempo, como un contador o el texto de un formulario. Cuando el estado cambia, React vuelve a dibujar automáticamente la parte de la interfaz afectada.
import { useState } from "react";
function Contador() {
const [cuenta, setCuenta] = useState(0);
return (
<div>
<p>Has hecho clic {cuenta} veces</p>
<button onClick={() => setCuenta(cuenta + 1)}>Sumar</button>
</div>
);
}¿Qué ocurre en React cuando cambia el estado de un componente mediante su función «set»?
Tailwind CSS
Tailwind es una librería de CSS que ofrece clases pequeñas y muy específicas (como p-4, text-center o bg-blue-500) que se combinan directamente en el HTML, evitando escribir CSS personalizado para cada elemento.
<button class="bg-cyan-500 text-white font-bold py-2 px-4 rounded hover:bg-cyan-600">
Enviar
</button>¿Cuál es la característica principal del enfoque de Tailwind CSS?
Laravel básico
Laravel es un framework de PHP que organiza un proyecto siguiendo el patrón MVC (Modelo-Vista-Controlador), aportando herramientas ya construidas para rutas, bases de datos, formularios y seguridad, en lugar de programar todo desde cero.
// routes/web.php
Route::get('/', function () {
return view('inicio');
});
// El framework se encarga de: enrutado, plantillas, seguridad basica
// y conexion a base de datos mediante su propio sistema (Eloquent).¿Qué patrón de organización sigue Laravel?
Rutas
Una ruta define qué código se ejecuta cuando alguien visita una URL concreta. En Laravel, las rutas se centralizan en archivos como routes/web.php, lo que facilita ver de un vistazo todas las páginas que tiene la aplicación.
Route::get('/alumnos', [AlumnoController::class, 'index']);
Route::get('/alumnos/{id}', [AlumnoController::class, 'ver']);
Route::post('/alumnos', [AlumnoController::class, 'crear']);¿Qué representa {id} en la ruta /alumnos/{id}?
Controladores
Un controlador contiene la lógica que responde a una petición: qué datos buscar, qué comprobaciones hacer, y qué vista mostrar como resultado. Mantiene esa lógica separada de las rutas y de las plantillas visuales.
class AlumnoController extends Controller
{
public function index()
{
$alumnos = Alumno::all(); // obtiene todos los alumnos
return view('alumnos.listado', ['alumnos' => $alumnos]);
}
}¿Cuál es la responsabilidad principal de un controlador en el patrón MVC?
Vistas
Una vista es la plantilla que define cómo se ve la página final. En Laravel se usan archivos Blade (.blade.php) que mezclan HTML normal con pequeñas instrucciones especiales para mostrar datos dinámicos o repetir bloques.
{{-- resources/views/alumnos/listado.blade.php --}}
<h1>Lista de alumnos</h1>
<ul>
@foreach ($alumnos as $alumno)
<li>{{ $alumno->nombre }} - Modulo {{ $alumno->modulo_actual }}</li>
@endforeach
</ul>¿Qué hace la instrucción @foreach en una vista Blade?