React, JSX y Tailwind CSS
Una introducción a las herramientas para construir interfaces de usuario modernas. Esta guía interactiva te ayudará a familiarizarte con los conceptos básicos.
1. ¿Qué es React?
React es una biblioteca de JavaScript para construir interfaces de usuario dividiéndolas en piezas reutilizables llamadas componentes.
Componentes
Son los bloques de construcción de tu aplicación. Un botón, un formulario, un encabezado... todo puede ser un componente. Son reutilizables y aislados.
Estado (State)
Es la información que un componente "recuerda". Cuando el estado cambia, React actualiza la interfaz automáticamente para reflejar ese cambio.
Propiedades (Props)
Son datos que pasas de un componente padre a un hijo para personalizarlo, como el texto de un botón o la URL de una imagen.
El Estado en Acción (Hooks)
El "Hook" `useState` nos permite añadir estado a nuestros componentes. Prueba a interactuar con este contador para ver cómo el estado cambia y la UI se actualiza al instante.
Has hecho clic:
0
veces
2. ¿Qué es JSX?
JSX es una extensión de JavaScript que nos permite escribir "código tipo HTML" en nuestros archivos de JavaScript, facilitando la creación de la estructura de los componentes.
Comparativa: JSX vs JavaScript Puro
// Con JSX (más fácil de leer)
const elemento = <h1 className="saludo">¡Hola, Mundo!</h1>;Incrustando JavaScript en JSX
Puedes insertar cualquier expresión de JavaScript dentro de JSX usando llaves `{}`. Esto te permite mostrar datos dinámicos.
const nombre = 'Mundo';
const elemento = <h1>¡Hola, {nombre}!</h1>;
const precio = 10;
const iva = 0.21;
const total = <p>Total: ${precio * (1 + iva)}</p>;
Resultado renderizado:
¡Hola, Mundo!
Total: $12.1
3. ¿Qué es Tailwind CSS?
Tailwind es un framework de CSS "utility-first" que te da clases de bajo nivel para construir diseños personalizados directamente en tu JSX.
Ejemplo Interactivo de Clases
Haz clic en cada clase de utilidad para ver qué hace.
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Diseño Responsivo Simplificado
Tailwind utiliza prefijos como `sm:`, `md:` y `lg:` para aplicar estilos en diferentes tamaños de pantalla (breakpoints). Redimensiona tu navegador para ver el cambio.
<div class="md:flex md:space-x-4">...</div>
// En pantallas medianas (`md`) y superiores, se convierte en un `flex container`.
4. Uniendo todo: Componente Interactivo
Mira cómo React, JSX y Tailwind trabajan juntos. Edita el texto en los campos para ver cómo el componente se actualiza en tiempo real.
Personaliza la Tarjeta
Ana García
Desarrolladora Frontend apasionada por crear experiencias de usuario intuitivas y dinámicas.
Próximos Pasos
Revisa esta guía y anota cualquier pregunta. En nuestra próxima clase, pondremos todo esto en práctica y construiremos nuestros primeros componentes.