Aprende React JS Desde Cero

Aprender a desarrollar aplicaciones con React JS puede parecer abrumador al principio, pero estamos aquí para acompañarte en cada paso. Si eres una persona que viene de otros entornos de desarrollo o si estás dando tus primeros pasos en la programación frontend, esta guía te ayudará a entender desde cero cómo funciona React, para que puedas construir aplicaciones modernas, rápidas y escalables.

En los últimos años, React se ha consolidado como una de las librerías más utilizadas para crear interfaces de usuario. ¿Por qué? Porque es eficiente, flexible y permite desarrollar proyectos con una lógica clara y componentes reutilizables. En otras palabras, facilita la vida de los desarrolladores y mejora la experiencia del usuario final.

Nuestro objetivo con este artículo es que tú también puedas dominar esta herramienta. Te explicaremos desde qué es React, cómo se instala, cuáles son sus piezas clave, y cómo puedes empezar a desarrollar con confianza. Todo el contenido está organizado de forma progresiva y práctica, para que puedas ir aprendiendo sin quedarte atrás.

Así que si alguna vez te has preguntado "¿por dónde empiezo para aprender React?", este es el lugar correcto. A lo largo de esta guía, conocerás los conceptos fundamentales, entenderás cómo piensa React y practicarás con ejemplos que te prepararán para crear tus propias aplicaciones.

¿Qué es React JS?

React JS es una librería de JavaScript centrada en la construcción de interfaces de usuario. Fue diseñada con el objetivo de facilitar el desarrollo de aplicaciones web modernas, que requieren ser dinámicas, rápidas y con una excelente experiencia de usuario. En lugar de manipular directamente el DOM del navegador, React trabaja con un Virtual DOM, lo que permite actualizaciones más eficientes y precisas.

Una de las grandes ventajas de React es que está basada en una arquitectura de componentes reutilizables, lo que permite dividir una interfaz compleja en partes más pequeñas, independientes y reutilizables. Esta filosofía hace que el código sea más mantenible, escalable y legible.

A diferencia de otros enfoques más tradicionales, React introduce un paradigma declarativo, lo que significa que no decimos cómo hacer las cosas paso a paso, sino qué queremos que ocurra. Esto lo convierte en una excelente opción para proyectos de todos los tamaños. A continuación veremos las principales características:

• Virtual DOM: Permite actualizaciones rápidas y eficientes de la interfaz sin recargar toda la página.
• Componentes reutilizables: Cada parte de la interfaz puede construirse como una unidad independiente.
• JSX (JavaScript XML): Una extensión de JavaScript que permite escribir código HTML dentro de JavaScript.
• Unidireccionalidad de datos: El flujo de datos va en una única dirección, lo que facilita el seguimiento de cambios y la depuración.
• Compatible con otras librerías: React puede integrarse fácilmente con otras herramientas del ecosistema frontend.
• Actualizaciones rápidas: El desarrollo es más ágil gracias al sistema de hot reload y herramientas como Create React App.
• Comunidad sólida: Cuenta con una comunidad global activa, documentación oficial muy completa y múltiples recursos de aprendizaje.

Configuración del entorno de desarrollo

Antes de comenzar a programar en React, es imprescindible preparar un entorno de desarrollo adecuado. Este paso nos permitirá trabajar de forma organizada, eficiente y sin errores inesperados. Aquí te mostraremos cómo configurar tu equipo para empezar desde cero con React JS.

La ventaja de React es que su entorno base es bastante accesible, pero es fundamental que sigamos ciertos pasos con precisión. Nos apoyaremos en herramientas modernas que facilitan el proceso de desarrollo y evitan configuraciones manuales complejas.

Instalación de Node.js y npm

React no se ejecuta por sí solo en el navegador; requiere de una serie de herramientas que nos ayuden a compilar, empaquetar y ejecutar el código. La principal de estas herramientas es Node.js, que viene acompañada por npm (Node Package Manager), el gestor de paquetes que nos permitirá instalar dependencias y librerías adicionales.

Para instalarlo correctamente:

1. Dirígete al sitio oficial de Node.js y descarga la versión recomendada para usuarios (LTS).
2. Ejecuta el instalador y sigue los pasos indicados.
3. Una vez instalado, abre la terminal y comprueba que todo está correcto con los comandos:

1node -v
2npm -v

Ambos comandos deberían mostrarte los números de versión instalados. Si todo va bien, ya tienes tu entorno base preparado para trabajar con React.

Creación de un nuevo proyecto con Create React App

La forma más rápida y profesional de comenzar con React es utilizando Create React App, una herramienta oficical que nos crea una estructura de proyecto lista para trabajar sin necesidad de configurar Webpack, Babel y otras dependencias complejas.

Para crear tu primer proyecto:

1npx create-react-app mi-primera-app

Este comando descargará y configurará todo lo necesario. A continuación:

1cd mi-primera-app
2npm start

Al ejecutar npm start, se abrirá automáticamente una pestaña en tu navegador con la aplicación en funcionamiento. A partir de ese punto, cualquier cambio que hagas en el código se verá reflejado de inmediato, gracias al sistema de auto-recarga en caliente.

Estructura de archivos en una aplicación React

Una vez generado el proyecto, encontrarás una estructura de carpetas con varios archivos. Conocer esta estructura es clave para poder moverte con soltura en tus futuros desarrollos.

La estructura básica será algo así:

1mi-primera-app/
2├── node_modules/
3├── public/
4│   └── index.html
5├── src/
6│   ├── App.css
7│   ├── App.js
8│   ├── App.test.js
9│   ├── index.css
10│   ├── index.js
11│   └── logo.svg
12├── package.json
13├── README.md

Explicamos brevemente los elementos principales:

• public/index.html: El único archivo HTML real en la app. Aquí se monta todo lo que React renderiza.
• src/: Contiene el código fuente de React. Aquí escribiremos nuestros componentes, estilos y lógica.
• App.js: Es el componente raíz del proyecto. Todo parte desde aquí.
• index.js: Es el punto de entrada que conecta React con el index.html.
• package.json: Incluye información sobre el proyecto y sus dependencias.

Esta estructura modular y bien organizada permite trabajar en proyectos pequeños y escalar sin complicaciones hacia aplicaciones mucho más grandes y complejas.

Beneficios de usar React.JS

React JS ofrece numerosas ventajas que lo convierten en una opción preferida para el desarrollo de aplicaciones web modernas. Uno de los principales beneficios es su rendimiento óptimo. Gracias al uso del Virtual DOM, React minimiza las operaciones costosas en el DOM real, lo que se traduce en una carga y actualización de la interfaz de usuario más rápidas.

Otra ventaja significativa de React es su modularidad. Al permitir a los desarrolladores crear componentes independientes que pueden reutilizarse en toda la aplicación, React facilita el mantenimiento y la escalabilidad de los proyectos. Esto no solo ahorra tiempo y recursos, sino que también mejora la coherencia del código y reduce la probabilidad de errores.

React también es altamente versátil, ya que puede ser utilizado tanto en el desarrollo de aplicaciones web como móviles (a través de React Native), lo que permite a los desarrolladores mantener una base de código uniforme para múltiples plataformas. Además, React se integra bien con otras bibliotecas y frameworks, lo que proporciona flexibilidad para adoptar las mejores prácticas y herramientas adicionales según sea necesario.

Comparado con otros frameworks populares como Angular y Vue, React tiene varias características distintivas. A diferencia de Angular, que es un framework completo, React es una biblioteca específicamente centrada en la vista, lo que le otorga una curva de aprendizaje más suave y una mayor flexibilidad para integrarse con diferentes arquitecturas sin imponer restricciones en la estructura del proyecto.

En comparación con Vue, que también utiliza un enfoque basado en componentes, React tiene una comunidad más grande y un ecosistema más desarrollado, lo que se traduce en una mayor disponibilidad de recursos de aprendizaje, librerías y herramientas de desarrollo. Vue, por otro lado, es a menudo elogiado por su simplicidad y menor tamaño de sintaxis, lo que puede ser beneficioso para proyectos más pequeños o para equipos con menos experiencia en JavaScript.

Fundamentos de React

Una vez que tenemos nuestro entorno configurado, es momento de adentrarnos en el núcleo de React. Para construir aplicaciones robustas y eficientes, debemos entender bien sus conceptos fundamentales. React se basa en ideas como los componentes, el uso de JSX, el manejo de estado y props, y el control del ciclo de vida de cada elemento de la interfaz.

En esta sección aprenderemos cómo organizar nuestras aplicaciones desde la lógica de React, dominando la creación de componentes funcionales, la transmisión de datos entre ellos y cómo gestionar los cambios que ocurren durante el ciclo de vida de una aplicación.

COMPONENTES Y JSX

Los componentes son el corazón de React. Todo lo que vemos en una interfaz construida con esta librería está compuesto por componentes, ya sean grandes o pequeños. Podemos pensar en ellos como bloques de construcción: desde un botón hasta una página completa.

Hay dos tipos principales de componentes:

• Componentes de función (los más utilizados actualmente).
• Componentes de clase (cada vez menos comunes desde la aparición de los Hooks).

Este fragmento de código incluye algo que parece HTML, pero no lo es. Se llama JSX (JavaScript XML) y es una extensión de JavaScript que nos permite describir la estructura visual del componente de forma clara y expresiva.

Usar JSX es opcional, pero es altamente recomendable. Nos permite combinar lógica y presentación de manera fluida, reduciendo errores y mejorando la legibilidad del código.

PROPS Y ESTADO (STATE)

En React, la comunicación entre componenetes se realiza a través de las props (abreviatura de propiedades). Estos son datos que un componente padre le para a un componente hijo para que este actúe en consecuencia. Las props son inmutables, es decir, no deben modificarse dentro del componenete hijo.

Por otro lado, el estado (state) representa los datos internos de un componente. A diferencia de las props, el estado sí puede cambiar durante la vida útil del componente. Para trabajar con estado en componentes funcionales, usamos el hook useState.

Cada vez que cambiamos el valor del estado con setContador, el componente se renderiza de nuevo, reflejando el cambio en la interfaz.

CICLO DE VIDA DE LOS COMPONENTES

El ciclo de vida es el conjunto de fases por las que pasa un componente desde que se crea hasta que se elimina. Estas fases nos permiten ejecutar acciones en momentos clave del componente.

Las fases principales son:

1. Montaje: El componente se crea y se añade al DOM. 2. Actualización: El componente cambia porque se modificaron sus props o su estado.ç 3. Desmontaje: El componente se elimina del DOM.

En los componentes de clase, se usaban métodos como componentDidMount o componentWillUnmount. Pero hoy en día, con componentes funcionales, estas fases se controlan mediante el hook useEffect.

En este caso:

• El código se ejecuta una vez al montar el componente.
• El return dentro de useEffect se ejecuta cuando el componente se desmonta.

Con estos conceptos claros - componentes, JSX, props, estado y ciclo de vida- ya tenemos una base sólida para empezar a construir aplicaciones reales con React. En el siguiente bloque, profundizaremos en los Hooks, la herramienta moderna que potencia aún más el desarrollo con componentes funcionales.

Hooks en React

Con la evolución de React, se introdujo una funcionalidad que revolucionó la forma en que escribimos componentes: los Hooks. Antes de su llegada, muchas de las características avanzadas solo podían usarse en componentes de clase. Hoy, gracias a los Hooks, podemos escribir componentes funcionales que son más concisos, legibles y potentes.

Los Hooks permiten a los desarrolladores manejar el estado, los efectos secundarios, las referencias, el contexto y muchas otras necesidades sin escribir una sola clase. Son funciones especiales que siguen reglas específicas, y conocerlas bien es imprescindible para dominar React moderno.

Un Hook es una función que comienza con la palabra use y que React expone para permitir el acceso a características del ciclo de vida y otras funcionalidades desde los componentes funcionales.

Algunas reglas clave que debemos respetar:

• Los Hooks solo pueden usarse dentro de componentes funcionales o de otros Hooks personalizados.
• Siempre deben estar en el nivel superior del componente, nunca dentro de condicionales, bucles o funciones anidadas.
• No deben llamarse de forma dinámica.

Los más utilizados y que veremos aquí son:

• useState para manejar el estado local.
• useEffect para efectos secundarios como llamadas a APIs, suscripciones o actualizaciones del DOM.

Hay muchos otros como useContext, useRef, useReducer, useMemo, pero es mejor empezar por los más esenciales.

useState: MANEJO DEL ESTADO EN COMPONENTES FUNCIONALES

El Hook useState es el más utilizado. Nos permite declarar y actualizar valores dentro de nuestros componentes sin necesidad de usar clases.

Ejemplo básico:

1import { useState } from 'react';
2
3function Contador() {
4  const [contador, setContador] = useState(0);
5
6  return (
7    <div>
8      <p>Contador: {contador}</p>
9      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
10    </div>
11  );
12}

En este ejemplo:

• contador es la variable de estado actual.
• setContador es la función que usamos para actualizar ese valor.
• useState(0) indica que el valor inicial será 0.

Cada vez que llamamos a setContador, React vuelve a renderizar el componente con el nuevo valor. Esto es lo que permite que la interfaz reaccione automáticamente a los cambios en los datos.

useEffect: EFECTOS SECUNDARIOS EN COMPONENTES

El Hook useEffect nos permite ejecutar efectos secundarios en nuestros componentes, es decir, operaciones que no forman parte del renderizado puro, como:

• Llamadas a APIs externas.
• Subscripciones a eventos.
• Modificaciones del DOM.
• Limpiezas antes de desmontar el componente.

Ejemplo simple:

1import { useEffect, useState } from 'react';
2
3function Reloj() {
4  const [hora, setHora] = useState(new Date());
5
6  useEffect(() => {
7    const intervalo = setInterval(() => {
8      setHora(new Date());
9    }, 1000);
10
11    // Limpieza del intervalo al desmontar el componente
12    return () => clearInterval(intervalo);
13  }, []);
14
15  return <p>Hora actual: {hora.toLocaleTimeString()}</p>;
16}

En este caso:

• El efecto se ejecuta una vez, al montar el componente, gracias al array vacío [] como segundo argumento.
• Se establece un intervalo que actualiza la hora cada segundo.
• En el return se incluye la función de limpieza para evitar fugas de memoria cuando el componente se desmonte.
• Con useState y useEffect ya podemos manejar datos dinámicos y responder a aventos externos dentro de nuestros componentes. Estos dos Hooks son la base del desarrollo moderno en React, y dominarlos nos permite empezar a construir aplicaciones funcionales y reactivas de inmediato.

Manejo de eventos en React

Uno de los pilares de cualquier aplicación interactiva es la capacidad de responder a acciones del usuario: clics, escritura en formularios, desplazamientos, envío de datos, etc. React nos ofrece un sistema muy intuitivo para gestionar estos eventos de forma clara, segura y compatible con todo tipo de navegadores modernos.

A diferencia del modelo tradicional de JavaScript, donde se usan funciones como addEventListener, React utiliza una sintaxis declarativa basada en atributos similares a HTML, pero escritos en camelCase. Esto significa que los eventos como onclick o onchange se transforman en onClick y onChange dentro del mundo de React. Ejemplo básico:

1function Boton() {
2  const manejarClick = () => {
3    alert("¡Has hecho clic!");
4  };
5
6  return <button onClick={manejarClick}>Haz clic aquí</button>;
7}

En este ejemplo:

• Se declara una función manejarClick que se ejecuta cuando el botón recibe un clic.
• El atributo onClick se encarga de vincular el evento con la función.
• Todo sucede de manera limpia, sin necesidad de acceder directamente al DOM.

EVENTOS MÁS COMUNES

A continuación, presentamos algunos de los eventos más utilizados en desarrollo con React:

• onClick: para clics en botones, enlaces u otro elementos.
• onChange: para detectar cambios en inputs, selectores y áreas de texto.
• onSubmit: pra gestionar el envío de formularios.
• onMouseEnter y onMouseLeave: para interacciones con el cursor.
• onKeyDown y onKeyUp: para capturar pulsaciones de teclas.

Todos estos eventos nos permiten construir interfaces dinámicas, accesibles y orientadas al usuario.

PASO DE ARGUMENTOS A EVENTOS

En muchas ocasiones, necesitaremos que la función manejadora reciba datos personalizados. En esos casos, usamos funciones flecha:

1function ListaDeTareas({ tareas }) {
2  const eliminarTarea = (id) => {
3    console.log(`Eliminar tarea con ID: ${id}`);
4  };
5
6  return (
7    <ul>
8      {tareas.map((tarea) => (
9        <li key={tarea.id}>
10          {tarea.texto}
11          <button onClick={() => eliminarTarea(tarea.id)}>Eliminar</button>
12        </li>
13      ))}
14    </ul>
15  );
16}

Gracias a esta técnica, podemos pasar parámetros sin que la función se ejecute al renderizar el componente.

PREVENCIÓN DEL COMPORTAMIENTO POR DEFECTO

En eventos como formularios, es habitual querer evitar que la página se recargue. Para ello usamos el método preventDefault():

1function Formulario() {
2  const manejarEnvio = (e) => {
3    e.preventDefault();
4    console.log("Formulario enviado");
5  };
6
7  return (
8    <form onSubmit={manejarEnvio}>
9      <input type="text" placeholder="Tu nombre" />
10      <button type="submit">Enviar</button>
11    </form>
12  );
13}

Este enfoque nos da el control total sobre el comportamiento de la aplicación sin depender del navegador.

En resumen, React nos proporciona un sistema de eventos consistente, expresivo y muy similar al HTML tradicional, pero con todas las ventajas del desarrollo moderno. Al aprender a manejar eventos con soltura, podemos responder a cualquier interacción del usuario y construir experiencias interactivas de alto nivel.

Renderizado condicional y listas

En el desarrollo de interfaces con React, es muy común querer mostrar u ocultar contenido en función de ciertas condiciones, o renderizar elementos dinámicamente a partir de listas de datos. React nos ofrece herramientas claras y potentes para gestionar ambas necesidades de forma elegante y eficiente.

RENDERIZADO CONDICIONAL

El renderizado condicional nos permite decidir qué componentes o elementos deben mostrarse en pantalla según determinadas condiciones. Es una funcionalidad fundamental para construir aplicaciones dinámicas que respondan al estado o las acciones del usuario.

React permite implementar esta lógica utilizando expresiones JavaScript dentro del JSX, lo cual nos da gran flexibilidad.

Ejemplo con una condición simple:

1function MensajeBienvenida({ logueado }) {
2  return (
3    <div>
4      {logueado ? <p>Bienvenido de nuevo</p> : <p>Por favor, inicia sesión</p>}
5    </div>
6  );
7}

También podemos utilizar condicionales más complejas con operadores lógicos:

1{usuario && <h2>Hola, {usuario.nombre}</h2>}

En este caso, si usuario tiene valor, se muestra el saludo. Si no, React no renderiza nada.

Para estructuras más elaboradas, podemos usar funciones auxiliares o incluso if...else fuera del JSX.

RENDERIZADO DE LISTAS Y USO DE KEYS

Otra situación muy habitual es tener que mostrar múltiples elementos basados en un array de datos. Por ejemplo, una lista de productos, tareas, usuarios, etc. React nos permite recorrer estos arrays usando map() y renderizar componentes para cada elemento.

Ejemplo básico:

1function ListaDeTareas({ tareas }) {
2  return (
3    <ul>
4      {tareas.map((tarea) => (
5        <li key={tarea.id}>{tarea.texto}</li>
6      ))}
7    </ul>
8  );
9}

La clave aquí es el uso del atributo key. Este atributo es obligatorio cuando renderizamos listas, ya que le indica a React qué elementos han cambiado, se han agregado o eliminado. Una key debe ser:

• Única dentro de la lista.
• Estable, es decir, que no cambie entre renderizados.
• Preferiblemente derivada de un id o identificador persistente.

Nunca se recomienda usar el índice del array como key, salvo que estés completamente seguro de que el orden de los elementos no cambiará jamás.

Saber aplicar correctamente el renderizado condicional y de listas en React es fundamental para crear interfaces flexibles, reactivas y adaptadas a los datos y acciones del usuario. Estos patrones aparecen en prácticamente todas las aplicaciones profesionales, por lo que es crucialdominarlos desde el principio.

Estilización de componentes

Una parte esencial de cualquier interfaz moderna es su aspecto visual. En React, tenemos múltiples formas de aplicar estilos a nuestros componentes, desde las más tradicionales hasta enfoques modernos y dinámicos. Aprender a estilizar correctamente una aplicación React nos permite crear experiencias atractivas, coherentes y adaptables.

A diferencia de otras tecnologías, React no impone un único sistema de estilos. Podemos combinar distintas estrategias según el tamaño del proyecto, el equipo o las preferencias personales. Aquí exploraremos las más comunes y efectivas.

CSS en React: estilos en línea y hojas de estilo

La forma más básica y directa de aplicar estilos en React es utilizando hojas de estilo tradicionales (CSS) o estilos en línea.

1. HOJAS DE ESTILO (CSS)

Podemos seguir utilizando archivos .css como lo haríamos en cualquier proyecto web:

1import './App.css';
2
3function Cabecera() {
4  return <h1 className="titulo-principal">Bienvenido</h1>;
5}

En este caso, App.css contiene las clases que se aplican mediante className (en lugar de class, como en HTML). React no interpreta directamente el atributo class, ya que se trata de una palabra reservada en JavaScript.

2. ESTÍLOS EN LÍNEA

También es posible aplicar estilos directamente dentro del componente usando objetos de JavaScript:

1function Alerta() {
2  const estilo = {
3    backgroundColor: "red",
4    color: "white",
5    padding: "10px"
6  };
7
8  return <div style={estilo}>Error: algo ha fallado</div>;
9}

Aunque los estilos en línea pueden ser útilos en casos puntuales, no se recomienda usarlos para todo el proyecto debido a su limitada capacidad para manejar pseudoclases, media queries o reutilización de estilos.

Styled-components y otras librerías de estilización

Una de las formas más modernas y populares de aplicar estilos en React es a través de librerías como styled-components, que permite escribir CSS dentro del propio archivo JavaScript. Esta técnica se conoce como CSS-in-JS.

Esjemplo con styled-components:

1import styled from 'styled-components';
2
3const Boton = styled.button`
4  background-color: #007bff;
5  color: white;
6  padding: 10px 20px;
7  border: none;
8  border-radius: 5px;
9
10  &:hover {
11    background-color: #0056b3;
12  }
13`;
14
15function App() {
16  return <Boton>Haz clic aquí</Boton>;
17}

Ventajas de usar styled-components:

• Los estilos están asociados al componente, lo que mejora la mantenibilidad.
• Soporta temas, variables y herencia.
• Permite usar lógica JS dentro de los estilos (props, condiciones, etc.)
• Evita conflictos de nombres gracias a la generación automática de clases únicas.

Otras alternaticas populares incluyen Emotion, Stitches y JSS, cada una con sus particularidades. Todas ellas están diseñadas para trabajar bien con React y facilitar la creación de interfaces complejas, personalizables y con un estilo coherente.

Dominar las diferentes formas de estilizar componentes en React es clave para crear aplicaciones atractivas y profesionales. Ya sea con CSS tradicional o mediante herramientas modernas como styled-components, lo importante es mantener el código organizado, coherente y fácil de mantener a largo plazo.

Enrutamiento en React con React Router

Cuando construimos una aplicación web, es muy común querer navegar entre diferentes pantallas o secciones sin recargar la página. En una SPA (Single Page Application), esta navegación se gestiona de forma interna, y React no incluye esta funcionalidad por defecto.

Para cubrir esta necesidad, usamos una herramienta ampliamente adoptada en el ecosistema: React Router, una librería que nos permite implementar un sistema de rutas dinámico, profesional y fácil de mantener.

Gracias a React Router, podemos definir URLs personalizadas, renderizar componentes específicos según la ruta, usar parámetros dinámicos y crear estructuras anidadas con gran flexibilidad.

CONFIGURACIÓN BÁSICA DE REACT ROUTER

Lo primero que necesitamos es instalar la librería. En la terminal, ejecutamos:

1npm install react-router-dom

Una vez instalada, podemos configurar nuestro enrutamiento básico. Supongamos que tenemos una aplicación con tres páginas: Inicio, Sobre Nosotros y Contacto.

1import { BrowserRouter, Routes, Route } from 'react-router-dom';
2import Inicio from './Inicio';
3import Sobre from './Sobre';
4import Contacto from './Contacto';
5
6function App() {
7  return (
8    <BrowserRouter>
9      <Routes>
10        <Route path="/" element={<Inicio />} />
11        <Route path="/sobre" element={<Sobre />} />
12        <Route path="/contacto" element={<Contacto />} />
13      </Routes>
14    </BrowserRouter>
15  );
16}

En este ejemplo:

• BrowserRouter envuelve toda la aplicación y gestiona la historia de navegación.
• Routes agrupa todas las rutas posibles.
• Cada Route indica qué componente se mostrará cuando la URL coincida con la ruta especificada.

Además, para crear los enlaces entre páginas usamos el componente Link:

1import { Link } from 'react-router-dom';
2
3<Link to="/contacto">Ir a Contacto</Link>

Este genera una navegación fluida sin recargar la página, manteniendo la experiencia SPA intacta.

RUTAS ANIDADAS Y PARÁMETROS EN LAS RUTAS

React Router también nos permite crear estructuras de navegación más complejas, como rutas anidadas o rutas con parámetros dinámicos. Esto es especialmente útil para secciones con subniveles o detalles por ID.

1. RUTAS ANIDADAS

Supongamos que tenemos una sección de usuario con varias subsecciones (perfil, configuración, historial). Podemos anidar rutas así:

1<Route path="/usuario" element={<Usuario />}>
2  <Route path="perfil" element={<Perfil />} />
3  <Route path="configuracion" element={<Configuracion />} />
4</Route>

Dentro del componente Usuario, debemos usar el componente <Outlet /> para que se renderice la ruta anidada:

1import { Outlet } from 'react-router-dom';
2
3function Usuario() {
4  return (
5    <div>
6      <h2>Zona de Usuario</h2>
7      <Outlet />
8    </div>
9  );
10}

2. PARÁMETROS EN LAS RUTAS

También podemos definir rutas con valores dinámicos, por ejemplo, para mostrar detalles de un producto o un usuario específico:

1<Route path="/producto/:id" element={<Producto />} />

En este caso, :id es un parámetro que podemos capturar dentro del componente Producto:

1import { useParams } from 'react-router-dom';
2
3function Producto() {
4  const { id } = useParams();
5  return <p>Mostrando el producto con ID: {id}</p>;
6}

El uso de React Router nos permite transformar una simple SPA en una aplicación rica en contenido, bien estructurada y con navegación fluida. Dominar su configuración básica y avanzada es indispensable para cualquier desarrollador que quiera construir proyectos profesionales con React.

Gestión de estado global

A medida que una aplicación React crece, también lo hace la complejidad para compartir datos entre componentes. Aunque el estado local (useState) es ideal para manejar valores en componentes individuales, no siempre es suficiente para coordinar información que debe ser accesible desde distintas partes de la aplicación.

Es ahí donde entra en juego la gestión de estado global. Esta técnica permite centralizar ciertos datos, como el usuario autenticado, el carrito de compras o la configuración general de la aplicación, de manera que todos los componentes puedan acceder a ellos sin tener que pasarlos manualmente a través de múltiples niveles.

En React, existen varias formas de gestionar este estado global. Las más populares y recomendadas son Context API (incluida en React de forma nativa) y Redux, una librería externa muy potente y ampliamente adoptada en grandes proyectos.

CONTEXT API

La Context API es una solución nativa de React para compartir datos entre componentes sin necesidad de prop drilling (pasar props manualmente desde el componente superior hasta el inferior). Es ideal para gestionar datos globales simples como temas, idioma o sesión del usuario.Cómo se usa:

1. Crear un contexto

1import { createContext } from 'react';
2
3const TemaContexto = createContext();

2. Crear un proveedor que envíe los datos

1function TemaProvider({ children }) {
2  const tema = 'oscuro';
3
4  return (
5    <TemaContexto.Provider value={tema}>
6      {children}
7    </TemaContexto.Provider>
8  );
9}

3. Consumir el contexto desde cualquier componente

1import { useContext } from 'react';
2
3function Encabezado() {
4  const tema = useContext(TemaContexto);
5  return <h1 className={tema}>Mi aplicación</h1>;
6}

Con este patrón, cualquier componente dentro del proveedor puede acceder al valor sin necesidad de recibirlo como prop.

INTRODUCCIÓN A REDUX

Cuando la lógica del estado se vuelve más compleja -por ejemplo, con múltiples tipos de datos, acciones asíncronas o reglas de negocio-, conviene optar por una solución más robusta. Aquí es donde entra Redux, una librería especializada en la gestión centralizada de estado:

• Store única: Todo el estado global se guarda en un único objeto.
• Acciones: Son objetos que describen lo que ocurrió (no lo que debe pasar).
• Reducers: Son funciones puras que modifican el estado en función de las acciones.

Ejemplo muy básico de flujo Redux:

1. Acción

1{ type: 'INCREMENTAR' }

2. Reducer

1function contador(state = 0, action) {
2  switch (action.type) {
3    case 'INCREMENTAR':
4      return state + 1;
5    default:
6      return state;
7  }
8}

3. Store

1import { createStore } from 'redux';
2const store = createStore(contador);

4. Usar en React

Con Redux Toolkit y React Redux, podemos integrar todo fácilmente:

1npm install @reduxjs/toolkit react-redux

Esto nos permite crear slices, dispatchers y conectores para trabajar con Redux de forma moderna y optimizada.

Tanto Context API como Redux son herramientas potentes que nos permiten escalar nuestras aplicaciones de forma presencial. La elección depende del tamaño del proyecto y de la naturaleza de los datos. Para proyectos medianos, Context suele ser suficiente. Pata aplicaciones grandes, Redux aporta estructura, control y robustez.

Conviértete en un Experto en React JS

Ahora que ya conoces los fundamentos de React JS, estás preparado para dar el siguiente paso y profundizar en el desarrollo de aplicaciones modernas, escalables y de alto rendimiento. Dominar React es una de las habilidades más demandadas en el mercado actual, y cuanto antes comiences a practicar de forma guiada, antes verás resultados reales.

Si quieres aprender de manera estructurada, con ejemplos prácticos, proyectos reales y el acompañamiento de expertos, te invitamos a inscribirte en nuestro curso de React JS para empresas. Diseñado para llevarte desde los conceptos básicos hasta el desarrollo avanzado, nuestro curso te proporcionará las herramientas necesarias para destacar como desarrollador frontend.