Introducción a React

React es una biblioteca de JavaScript para construir interfaces: botones, formularios, menús o pantallas completas. Una interfaz se divide en componentes, piezas que puedes reutilizar. Piensa en una página como una caja de piezas: una cabecera, una lista y varias tarjetas.

Describir lo que quieres mostrar #

Con React describes cómo debe verse la pantalla para unos datos. A esto lo llamamos programación declarativa. Cuando cambian los datos mediante el estado, React vuelve a calcular la interfaz y aplica al DOM los cambios necesarios. El DOM es la representación de la página que utiliza el navegador.

Renderizar significa que React llama a tus componentes para calcular qué mostrar. No significa borrar y reconstruir toda la página.

Tu primer componente #

1function Saludo() {
2  const nombre = 'Ana';
3  return <h1>Hola, {nombre}</h1>;
4}
5
6export default function App() {
7  return (
8    <main>
9      <Saludo />
10      <p>Estoy aprendiendo React.</p>
11    </main>
12  );
13}

La sintaxis parecida a HTML se llama JSX. Las llaves permiten insertar expresiones de JavaScript, como una variable o una suma. En un proyecto con TypeScript, los archivos que contienen JSX terminan en .tsx.

Los componentes empiezan con mayúscula: <Saludo /> representa una función propia; <main> representa una etiqueta del navegador. Las etiquetas se cierran, incluso las vacías: <input />.

Un componente devuelve una sola raíz. Si necesitas agrupar varias etiquetas sin añadir un elemento al DOM, utiliza un fragmento: <>...</>.

Prueba tú #

Cambia el nombre por el tuyo y añade otra etiqueta <Saludo />. Verás dos saludos creados con la misma definición.

Qué debes recordar #

React se ocupa de la interfaz. Las rutas y otras necesidades pueden resolverse con bibliotecas adicionales. Para seguir este curso conviene conocer funciones, arrays, objetos y una base de TypeScript. Los ejemplos se practicarán en una aplicación React con Vite.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.