Abres cualquier oferta de front-end y ahí está: React. Antes de ponerte a memorizar sintaxis, vale la pena entender qué resuelve esta biblioteca y por qué se convirtió en un estándar.

Qué es React, después de todo

React es una biblioteca de JavaScript para construir interfaces. Eso es todo. No es un framework completo con reglas para cada aspecto: su foco está en la capa visual, la parte que el usuario ve y con la que interactúa.

La idea central es dividir la pantalla en piezas pequeñas y reutilizables, y dejar que React se encargue de actualizarla cuando cambian los datos. En lugar de manipular el DOM manualmente, describes cómo debe verse la interfaz y React se ocupa de reflejarlo.

Componentes: las piezas para construir

En React todo es un componente. Un botón, una tarjeta, un formulario o la página completa: cada uno es una función que devuelve una parte de la interfaz.

jsx function Saudacao() { return

Olá, mundo!

; }

Los componentes encajan unos dentro de otros, como piezas de Lego. Creas componentes pequeños y los combinas en componentes más grandes. Esto mantiene el código organizado y, sobre todo, reutilizable: escribes un Botao una vez y lo usas en diez lugares.

JSX: HTML dentro de JavaScript

Aquel <h1> en medio de JavaScript es JSX. Es una sintaxis que te permite escribir algo parecido a HTML directamente en el código.

jsx function Perfil() { const nome = "Ana"; return

Bem-vinda, {nome}!

; }

Las llaves {} son el puente: dentro de ellas colocas JavaScript de verdad —variables, operaciones y llamadas a funciones—. Parece HTML, pero es JavaScript, así que la lógica y el marcado viven juntos.

Props y state: datos que bajan y datos que cambian

Los componentes necesitan datos, y estos llegan por dos caminos.

Props son los datos que un componente recibe desde fuera, como los argumentos de una función. Quien usa el componente pasa los valores.

jsx function Saudacao(props) { return

Olá, {props.nome}!

; }

// uso: <Saudacao nome="Ana" />

Las props son de solo lectura: el componente no cambia lo que recibió.

State es el dato interno que cambia con el tiempo: un contador, un campo de formulario o un menú abierto o cerrado. Cuando cambia el state, React vuelve a renderizar el componente automáticamente.

jsx import { useState } from "react";

function Contador() { const [contagem, setContagem] = useState(0); return ( <button onClick={() => setContagem(contagem + 1)}> Cliquei {contagem} vezes </button> ); }

La regla mental es: las props bajan del padre al hijo y el state vive dentro del componente.

El modelo declarativo (y por qué facilita las cosas)

Aquí está la clave. En el enfoque antiguo (imperativo), dabas órdenes paso a paso: «toma este elemento, cambia el texto, oculta aquel otro». Es fácil que todo se desordene.

React es declarativo: describes cómo debe estar la pantalla para un estado determinado, y listo. ¿Cambió el state? No tienes que ir actualizando cada parte manualmente. React compara cómo estaba con cómo debe quedar y aplica solo la diferencia.

Es la diferencia entre decir «el botón muestra el conteo actual» y tener que recordar reescribir el texto del botón cada vez que cambia el número. Menos pasos manuales, menos bugs.

Ecosistema y cuándo usar React

React por sí solo es ligero, así que en la práctica suele ir acompañado de otras herramientas. Para empezar un proyecto hoy, Vite es una buena opción: con un comando tienes un entorno funcionando en segundos.

Ese useState que apareció es un hook: funciones especiales que dan superpoderes a los componentes, como guardar state o reaccionar a eventos. Hay varios (useEffect, useContext y otros), pero eso queda para después; por ahora, basta con saber que existen.

¿Y cuándo tiene sentido usar React? Cuando la interfaz tiene bastante interacción y un estado que cambia continuamente: dashboards, apps y pantallas que reaccionan al usuario todo el tiempo. Para una página estática sencilla, puede ser demasiado. Úsalo cuando la complejidad de la pantalla lo justifique.

Al final, React es eso: componentes que encajan, datos que fluyen y una pantalla que se actualiza sola. Empieza creando componentes pequeños, experimenta con props y state, y lo demás llegará con la práctica.