En los artículos anteriores sobre React hablamos sobre los fundamentos de React y su arquitectura basada de componentes, además de cómo crear una aplicación para empezar usando Vite. En este tercer artículo de esta serie de React, vamos a profundizar más para establecer unas bases de conocimiento sólidas de las que partir para empezar a desarrollar.
Índice de contenidos
- Introducción a los módulos de JavaScript en React
- Por qué React se basa en componente y qué son
- Configuración de un nuevo proyecto en React
- JSX y los componentes de React: sintaxis y ventajas
- Creación y uso de tu primer componente
- Cómo React gestiona los componentes y el árbol de componentes
- Impulsa tu UI con el uso de valores dinámicos
- Casos de uso: atributos dinámicos para el HTML
Introducción a los módulos de JavaScript en React
Los módulos de JavaScript son piezas de código reutilizables que permiten organizar y encapsular funcionalidades, son un poco la pieza clave de la programación en componentes en la cual está basado el desarrollo de aplicaciones en React, de manera más detallada, se utilizan para:
- Modular el código: separar la lógica en archivos específicos, facilitando la mantenibilidad y escalabilidad de las aplicaciones.
- Reutilización: importar y exportar funciones, clases o variables entre diferentes archivos, haciendo posible la integración de librerías de terceros (como las dependencias instaladas con npm o yarn) y la creación de componentes independientes.
- Soporte de ES6: la sintaxis de ECMAScript 6 introduce import/export. React aprovecha estos módulos para crear aplicaciones robustas y fáciles de depurar.
En entornos de desarrollo actuales, herramientas como Vite se encargan de la gestión y empaquetado de estos módulos, lo que optimiza la carga de los recursos y mejora el rendimiento de la aplicación.
Por qué React se basa en componente y qué son
Componentes: La base del universo React
Los componentes son las piezas fundamentales en React. Estos se pueden considerar como bloques de construcción independientes con sus propias responsabilidades. Cada componente:
Renderiza parte de la interfaz: desde botones, formularios hasta contenedores o elementos más complejos.
Encapsula lógica y estado: permite manejar datos desde un alcance más reducido mediante el uso de state y props, facilitando así la reutilización y la separación de responsabilidades.
Reutilización y Composición: puedes componer interfaces complejas combinando componentes más simples, lo que reduce la duplicación de código y facilita futuros cambios.
Configuración de un nuevo proyecto en React
Herramientas y primeros pasos
Para comenzar a trabajar con React, una de la opciones que a mi más me gusta es Vite, que automatiza la configuración inicial del proyecto, en el post anterior explicábamos cómo crear un proyecto nuevo con Vite paso a paso
Para el desarrollo de aplicaciones más avanzadas, se podría considerar algo como Next.js, que permite renderizado del lado del servidor (SSR) y generación de sitios estáticos sin tener que montar tu propio servidor de Node con Express (u otro framework).
JSX y los componentes de React: sintaxis y ventajas
¿Qué es JSX?
Es una extensión de la sintaxis JavaScript creada para React. Está pensada para que tu herramienta de compilación la convierta en JavaScript normal. Cada elemento XML se convierte en una llamada a una función JavaScript normal. Por ejemplo este JSX:
import Button from ‘./button’
let button = <Button>Click me</Button>
render(button)
será convertido al siguiente JavaScript:
import Button from "./button";
let button = React.createElement(Button, null, "Haz click aquí");
render(button);
Lo cual nos da ciertas ventajas:
- Legibilidad: facilita comprender el código, por mostrar la lógica y la representación en un mismo archivo.
- Potencia y Flexibilidad: al poder escribir JavaScript dentro del HTML, permite escribir un código dinámico de manera más sencilla.
- Transformación Automática: herramientas como Babel o esbuild (utilizado por Vite) convierten el JSX en llamadas que React puede interpretar.
Cómo funciona en los componentes
Dentro de un componente, JSX se utiliza para describir qué debe renderizarse. Por ejemplo:
function Saludo({ nombre }) {
return <h1>Saludos, {nombre}!</h1>;
}
Esta sintaxis nos da, como decíamos antes, la posibilidad de intercalar variables dentro del texto escrito, haciéndolo mucho más flexible a la hora de crear componentes dinámicos.
Creación y uso de tu primer componente
Desarrollar un componente
En React, crear un componente no es más que definir una función que devuelva JSX. Ejemplo:
const MiPrimerComponente = () => {
return (
<div>
<h2>¡Hola, este es mi primer componente en React!</h2>
<p>Este es un ejemplo básico para entender cómo se estructura un componente.</p>
</div>
);
};
export default MiPrimerComponente;
Uso del componente
Para utilizar este componente en tu aplicación, simplemente impórtalo en el archivo donde lo necesites:
import MiPrimerComponente from './MiPrimerComponente';
function App()(
return (
<>
<MiPrimerComponente />
</>
);
);
Se puede ver lo sencillo que se vuelve crear componentes modulares con React.
Cómo React gestiona los componentes y el árbol de componentes
Estructura del Árbol de Componentes
React, al igual que muchas otras bibliotecas de UI, organiza la interfaz de usuario en una estructura jerárquica conocida como árbol de componentes.
Los árboles son un modelo común para representar relaciones entre elementos. Por ejemplo, los navegadores utilizan estructuras en forma de árbol para modelar el HTML en el DOM, donde cada nodo representa un elemento del documento.
En React, cada componente puede contener componentes hijos, que a su vez pueden tener sus propios hijos, formando un árbol de componentes. Esta estructura permite a React gestionar la interfaz de manera eficiente.
Cuando se produce un cambio en el estado de un componente, React genera una nueva versión del DOM Virtual. Luego, compara esta nueva versión con la anterior (proceso conocido como diffing) y calcula los cambios mínimos necesarios para actualizar el DOM real. Este enfoque mejora significativamente el rendimiento frente a manipulaciones directas del DOM.
Además, cada componente puede mantener su propio estado interno y comunicarse con otros componentes mediante props. Esta comunicación es unidireccional (de padre a hijo), pero también es posible propagar datos en sentido inverso con el uso de callbacks.

Ciclo de Vida y Renderizado
Cada componente posee un ciclo de vida propio (por ejemplo, montaje, actualización y desmontaje). React proporciona métodos (en componentes de clase) o los hooks (en componentes funcionales) como useEffect
para controlar estas fases, que permiten ejecutar el código en los momentos específicos del ciclo de vida y optimizar el rendimiento.
Impulsa tu UI con el uso de valores dinámicos
Reactividad y estados
El uso de valores dinámicos es uno de los conceptos centrales en React. La «reactividad» es la capacidad que tiene una interfaz para responder automáticamente a los cambios en los datos. Es decir, cuando los valores cambian (ya sea por acciones del usuario, respuestas de una API o cualquier otro evento) la interfaz se actualiza de forma automática sin necesidad de recargar la página. Esto se logra principalmente gracias el state y las props, y de esta forma puedes:
- Gestionar datos en tiempo real: actualizar la UI en función de las interacciones del usuario.
- Crear interfaces responsive: cambiar contenido y aplicar estilos dinámicamente según los datos.
- Renderizado condicional: decidir sobre qué mostrar en pantalla en función del estado de la aplicación o los datos que recibe.
Ejemplo de actualización dinámica
Esto sería un ejemplo con un incrementador básico, o contador, que cuenta los clicks sobre el botón:
See the Pen React Dynamic Update by David Boo (@David-Boo) on CodePen.
Este ejemplo muestra como con la actualización del estado React actualiza la interfaz de manera automática.
Casos de uso: atributos dinámicos para el HTML
Uso de props para configuración dinámica
En React, los atributos HTML se pueden definir de forma dinámica a través de las props. Esto permite que los valores se establezcan o cambien en función del estado de la aplicación o de datos externos. Por ejemplo, este componente de un botón:
const BotonPersonalizado = ({ color, texto }) => {
return <button style={{ backgroundColor: color }}>{texto}</button>;
};
Aquí, el color y el texto del botón se definen a través de los valores que llegan en las props que le pasa el componente padre, permitiendo reutilización y personalización del componente.
Aplicando condiciones y estilos
Además de atributos, React hace que la asignación dinámica de clases y estilos mediante condicionales y expresiones sea sencilla:
import classNames from 'classnames';
const Alerta = ({ tipo, mensaje }) => {
const clases = classNames('alerta', {
'alerta-exito': tipo === 'exito',
'alerta-error': tipo === 'error'
});
return <div className={clases}>{mensaje}</div>;
};
una vez aplicadas las clases, cada una puede tener sus estilos CSS diferentes, permitiéndote así dar distintos estilos a mismos componentes en distintos casos.
Como hemos visto, React no es solo una librería para construir interfaces, sino una forma de pensar el desarrollo web basada en la composición, la reutilización y la adaptación. Comprender cómo funcionan los módulos, los componentes, el JSX y el flujo de datos te permitirá construir interfaces más robustas, mantenibles y escalables. Estos fundamentos son el punto de partida ideal para empezar a desarrollar con confianza en React. En artículos anteriores hemos explorado otros temas que puedes consultar aquí:
ReactJS: Conceptos de JavaScript a repasar antes de empezar con React
¿Qué es React? Descubre sus características, ventajas y cómo empezar a usarlo
Deja una respuesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *