Qué es React y tu primer componente

⏱ 40 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Explicar qué problema resuelve React y qué significa «declarativo».
Escribir y reutilizar un componente.
Aplicar las tres reglas básicas de un componente.
Saber cómo se crea y ejecuta un proyecto real con Vite.

1.El problema que resuelve React

Una página web de verdad cambia todo el tiempo: aparece un mensaje, se suma un producto al carrito, se abre un menú, se filtra una lista. Con JavaScript puro, tú tienes que dar cada orden al navegador: «busca este elemento, cambia su texto, añade esta clase, quita aquel nodo». A medida que la página crece, esas órdenes se enredan y la pantalla deja de coincidir con los datos.

React propone otra forma de pensar: en lugar de dar órdenes, describes cómo debe verse la pantalla para unos datos concretos, y React se encarga de actualizar el navegador cuando los datos cambian.

Aspecto	JavaScript puro (imperativo)	React (declarativo)
Tú escribes	«Busca el botón, cambia su texto, súmale 1…»	«Si el contador vale 3, el botón dice Pulsado 3»
Quién toca el DOM	Tú, a mano, en cada cambio	React, de forma automática
Riesgo	Que la pantalla y los datos se desincronicen	Mucho menor: la pantalla se calcula desde los datos

📌 Nota · ¿Qué es React exactamente?

React es una biblioteca de JavaScript creada por Meta para construir interfaces de usuario. No es un lenguaje nuevo ni un programa aparte: es JavaScript con ideas y herramientas extra. Por eso este curso asume que ya conoces JavaScript (variables, funciones, arrays, objetos y eventos).

⚠️ Importante · Requisitos

Si aún dudas con funciones flecha, map, filter o desestructuración, repasa antes el curso de JavaScript. React se aprende mucho más rápido cuando esas piezas ya son familiares.

2.La idea central: componentes

Una interfaz se puede dividir en piezas independientes y reutilizables: una barra de navegación, una tarjeta, un botón, un formulario. En React cada pieza es un componente, y un componente es, sencillamente, una función de JavaScript que devuelve lo que se debe ver.

function

Saludonombre (¡con mayúscula!)

() { return

<h1>Hola, React</h1>lo que se ve

; }

⚛️ Tu primer componente

Código (edítalo y pulsa Ejecutar)

function App() {
  return <h1>Hola, React 👋</h1>;
}

Resultado

Consola

Lo que parece HTML dentro de la función se llama JSX: una sintaxis que permite escribir etiquetas dentro de JavaScript. Verás que se parece muchísimo a HTML, con algunas diferencias que estudiarás a fondo en la lección 2.

💡 Consejo · Edita y observa

Cambia el texto del <h1> en el editor y pulsa Ejecutar (o Ctrl + Enter). Prueba también a olvidar el cierre de una etiqueta: la consola te dirá qué ocurrió. Equivocarse aquí no cuesta nada.

3.Reutilizar: escribir una vez, usar muchas

La gran ventaja de un componente es que lo defines una vez y lo usas todas las veces que necesites, escribiéndolo como si fuera una etiqueta HTML propia: <Tarjeta />.

⚛️ Un componente, tres usos

Código (edítalo y pulsa Ejecutar)

function Tarjeta() {
  return (
    <article className="tarjeta">
      <h2>Componente</h2>
      <p>Una pieza reutilizable de la interfaz.</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <h1>Mis tarjetas</h1>
      <Tarjeta />
      <Tarjeta />
      <Tarjeta />
    </main>
  );
}

Resultado

Consola

Si mañana quieres cambiar el diseño de todas las tarjetas, editas un solo lugar. Y en la lección 3 aprenderás a que cada tarjeta muestre datos distintos con las props.

Define el componente: una función con nombre en mayúscula.
Devuelve JSX con lo que quieres mostrar.
Úsalo como una etiqueta: <Tarjeta />. Puedes anidarlo dentro de otros componentes.

4.Cómo llega React a la pantalla

Tus componentes viven en JavaScript, pero el navegador solo entiende HTML. React hace de puente: toma un punto de montaje (un <div id="root"> vacío en el HTML) y dibuja allí el árbol de componentes.

main.jsx · el punto de entrada

import { createRoot } from "react-dom/client";
import App from "./App.jsx";

// 1. Busca el <div id="root"> de index.html
// 2. Crea una «raíz» de React allí
// 3. Dibuja el componente App dentro
createRoot(document.getElementById("root")).render(<App />);

index.htmltiene <div id="root">

→carga

main.jsxcrea la raíz

→dibuja

<App />tu árbol de componentes

📌 Nota · En este curso no verás main.jsx

Los editores de las lecciones ya montan tu componente App automáticamente. Escribe tu App (y los demás componentes) y verás el resultado. También puedes dejar los import al inicio, como en un proyecto real: aquí se ignoran porque React ya está cargado.

5.Las tres reglas de un componente

Regla	Ejemplo correcto	Si no la cumples
Nombre con mayúscula inicial	`function Tarjeta()`	React piensa que `<tarjeta />` es una etiqueta HTML y no encuentra tu componente
Devuelve un solo elemento raíz	`<main> … </main>` o `<> … </>`	Error: «Adjacent JSX elements must be wrapped…»
Es una función pura al dibujar	Mismo dato → misma pantalla	Resultados impredecibles: nunca cambies variables externas mientras dibujas

⚛️ Rompe y arregla

Código (edítalo y pulsa Ejecutar)

function App() {
  // Esto falla: dos elementos hermanos sin un contenedor.
  // Envuélvelos en <main>…</main> o en <>…</> para arreglarlo.
  return (
    <h1>Título</h1>
    <p>Un párrafo suelto</p>
  );
}

Resultado

Consola

💡 Consejo · El fragmento <>…</>

Cuando necesitas varios elementos hermanos pero no quieres un <div> extra en el HTML final, envuélvelos en un fragmento: <> … </>. No deja rastro en la página.

6.React en un proyecto real: Vite

Los editores de este curso son ideales para aprender, pero un proyecto real vive en tu computadora. La herramienta más usada hoy para crearlo es Vite (guía oficial de instalación y uso): prepara el proyecto, compila el JSX y actualiza el navegador al instante cada vez que guardas.

Terminal · crear un proyecto

npm create vite@latest mi-app -- --template react
cd mi-app
npm install
npm run dev

Vite te dará una dirección local (normalmente http://localhost:5173). Necesitas tener Node.js (versión LTS) instalado; si no sabes cómo, sigue la lección de Node del curso. En la lección 11 recorrerás el proyecto completo y cómo publicarlo.

📌 Nota · Versiones de React

Los editores de este curso cargan React 18.3.1 en el navegador (React 19 ya no se distribuye como archivo suelto). Un proyecto nuevo con Vite instala React 19. Todo lo que ves aquí funciona igual en ambas; lo nuevo de la 19 es opcional para empezar: ref como prop normal (sin forwardRef), <Contexto> como proveedor directo, acciones de formulario con useActionState y el compilador de React, que reduce la necesidad de useMemo y useCallback a mano. Cuando salgas del editor, consulta react.dev.

Archivo o carpeta	Para qué sirve
`index.html`	La única página HTML. Contiene el `<div id="root">`.
`src/main.jsx`	El punto de entrada: monta `<App />` en el `#root`.
`src/App.jsx`	Tu componente principal. Aquí empiezas a escribir.
`package.json`	La lista de dependencias y de comandos (`dev`, `build`…).
`node_modules/`	Las bibliotecas descargadas. No se sube a Git.

7.Errores frecuentes

Nombre de componente en minúscula: function tarjeta() y <tarjeta /> no funcionan como esperas.
Dos elementos raíz sin contenedor: envuélvelos en un <div>, un <main> o un fragmento.
Olvidar el return o dejar el JSX en la línea siguiente sin paréntesis: return + salto de línea devuelve undefined. Usa return ( … );.
Escribir <Tarjeta> sin cerrar: los componentes sin contenido se cierran solos: <Tarjeta />.
Llamar al componente como función: escribe <Tarjeta />, no Tarjeta().
Definir componentes dentro de otros componentes: se vuelven a crear en cada dibujo y pierden su estado. Defínelos siempre fuera.

📒 Apuntes para llevar

React es una biblioteca de JavaScript para construir interfaces; describes qué debe verse y React actualiza el DOM.
Una interfaz se divide en componentes: funciones que devuelven JSX.
El nombre de un componente empieza con mayúscula y se usa como etiqueta: <Tarjeta />.
Un componente debe devolver un solo elemento raíz (usa <>…</> si no quieres un contenedor).
Un componente se define una vez y se reutiliza cuantas veces haga falta.
createRoot(...).render(<App />) monta tu aplicación en el <div id="root">.
En la práctica se usa Vite (npm create vite@latest) para crear y ejecutar proyectos.

8.Glosario

Término	Significado
React	Biblioteca de JavaScript para construir interfaces de usuario.
Componente	Función que devuelve JSX y representa una pieza reutilizable de la interfaz.
JSX	Sintaxis que permite escribir etiquetas parecidas a HTML dentro de JavaScript.
Declarativo	Estilo en el que describes el resultado deseado y no los pasos para lograrlo.
Fragmento	Contenedor invisible `<>…</>` que agrupa elementos sin añadir nodos al HTML.
Raíz (root)	Punto del HTML donde React dibuja la aplicación.
Vite	Herramienta que crea, compila y sirve proyectos de React durante el desarrollo.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué es un componente de React?

¿Cuál es un nombre válido para usar el componente como etiqueta?

¿Por qué falla return <h1>A</h1><p>B</p>;?

Un componente devuelve un solo elemento raíz: envuélvelos en un <div> o en un fragmento.

¿Qué significa que React sea «declarativo»?

¿Qué herramienta se usa hoy para crear un proyecto de React?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio