Empezar con React: guía básica para nuevos desarrolladores

React es una de las bibliotecas más populares de JavaScript para construir interfaces de usuario modernas. Si estás dando tus primeros pasos en el desarrollo frontend, iniciarte con React es una excelente decisión. En esta guía te explico qué es, cómo se instala, los conceptos fundamentales y cómo crear tu primera aplicación paso a paso. Además, te ofreceré consejos útiles para evitar errores comunes y lograr una curva de aprendizaje más llevadera.

¿Qué es React?

React es una biblioteca de JavaScript desarrollada por Facebook que permite construir interfaces de usuario de forma declarativa, eficiente y basada en componentes. Se utiliza principalmente para crear Single Page Applications (SPA) donde la experiencia del usuario es rápida, fluida y dinámica.

A diferencia de otros enfoques más tradicionales, React trabaja con un DOM virtual, lo que permite actualizar solo los elementos necesarios cuando cambia el estado de una aplicación, mejorando el rendimiento.

React se enfoca en el diseño de componentes reutilizables, facilitando el mantenimiento y escalado de aplicaciones. En otras palabras, puedes dividir tu interfaz en piezas pequeñas y manejables.

¿Por qué deberías aprender React?

• 📈 Alta demanda en el mercado laboral. Cada vez más empresas lo utilizan en sus desarrollos.
• 🧩 Componentes reutilizables que aceleran el desarrollo y reducen errores.
• 🌐 Ecosistema maduro con muchas herramientas y librerías compatibles.
• ⚛️ Compatible con React Native para crear apps móviles desde el mismo conocimiento.
• 🛠 Gran comunidad y abundantes recursos de aprendizaje en línea.

Además, muchos frameworks modernos como Next.js o Gatsby están construidos sobre React, por lo que dominarlo te abrirá aún más puertas.

Instalación para empezar con React paso a paso

La forma más sencilla de comenzar es usando Vite o Create React App. A continuación te muestro cómo hacerlo con Vite, por ser una alternativa más ligera y rápida para desarrollos modernos.

Requisitos previos

• Tener Node.js instalado
• Tener npm o yarn como gestor de paquetes

Crear un proyecto con Vite

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

También puedes usar npx create-react-app mi-app si prefieres el enfoque tradicional.

Una vez finalizado, abre http://localhost:5173 en tu navegador para ver tu nueva app en funcionamiento.

Si prefieres usar TypeScript desde el principio, puedes optar por la plantilla --template react-ts.

Entendiendo JSX y la estructura de una app

Cuando creas un proyecto con Vite o CRA, verás una estructura típica como esta:

• index.html: el archivo HTML base.
• main.jsx: punto de entrada que conecta React con el DOM.
• App.jsx: el componente raíz de la aplicación.

React utiliza JSX, una sintaxis que combina JavaScript con HTML. Esto te permite escribir componentes de forma declarativa y más legible, lo que resulta especialmente útil en proyectos complejos.

Es importante destacar que, aunque parece HTML, JSX se transforma en llamadas a funciones de JavaScript durante la compilación.

Primer componente funcional

Los componentes son el núcleo de React. Aquí tienes un ejemplo básico de uno funcional:

function Saludo(props) {
  return <h1>Hola, {props.nombre} 👋</h1>;
}

export default Saludo;

Puedes usarlo dentro de App.jsx así:

<Saludo nombre="Enrique" />

Los props son valores que se pasan de un componente padre a uno hijo, permitiendo personalizar su contenido sin duplicar código. Además, facilitan la reutilización de componentes.

Uso del estado con useState

Para manejar datos dinámicos, se utiliza el estado. React ofrece un hook llamado useState que permite almacenar y actualizar información dentro del componente.

import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Has hecho clic {contador} veces</p>
      <button onClick={() => setContador(contador + 1)}>Aumentar</button>
    </div>
  );
}

Cada vez que el estado cambia, React vuelve a renderizar el componente, asegurando que la interfaz esté siempre actualizada. Este patrón es esencial para manejar formularios, contadores, toggles y más.

Comprendiendo el ciclo de vida con useEffect

Uno de los hooks más importantes es useEffect. Nos permite ejecutar código en diferentes momentos del ciclo de vida de un componente, como cuando se monta, se actualiza o se desmonta.

Por ejemplo:

useEffect(() => {
  console.log('El componente se montó');
}, []);

Esto equivale al componentDidMount en clases. Puedes usarlo también para suscribirte a eventos, hacer peticiones HTTP o limpiar efectos secundarios.

Un uso habitual de useEffect es la llamada a APIs para cargar datos:

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

Eventos personalizados en componentes React

Los eventos en React son muy similares a los de JavaScript, pero su sintaxis es ligeramente distinta:

<button onClick={miFuncion}>Haz clic</button>

React utiliza camelCase para los nombres de los eventos y acepta funciones como manejadores. Puedes utilizar eventos para manejar formularios, teclas, scrolls, etc., con mayor control y claridad.

Además, puedes pasar argumentos a los manejadores de eventos de forma muy sencilla:

<button onClick={() => miFuncion('Hola')}>Saludar</button>

Hooks más usados al empezar con React

Además de useState y useEffect, React ofrece otros hooks que facilitan tareas comunes:

• useRef: acceder a elementos del DOM sin provocar renders.
• useContext: compartir datos globales sin pasar props manualmente.
• useReducer: gestionar estados más complejos como alternativa a useState.

Estos hooks permiten gestionar mejor la lógica de tu aplicación sin necesidad de depender de librerías externas desde el principio.

Estilizando componentes de forma eficiente

Puedes aplicar estilos en React de varias maneras, lo que te permite adaptarte a distintas necesidades de diseño:

• Archivos CSS tradicionales.
• Módulos CSS (.module.css) que evitan conflictos entre clases.
• Librerías modernas como Tailwind CSS, Styled Components o Emotion para estilos dinámicos.

import styles from './App.module.css';

<p className={styles.parrafo}>Texto con estilo</p>

Gracias a esta flexibilidad, puedes elegir la metodología que mejor se adapte a tu proyecto. Además, React permite el uso de condiciones para cambiar estilos dinámicamente según el estado del componente.

Consejos y buenas prácticas

• Divide tu aplicación en componentes pequeños y reutilizables.
• Evita duplicar lógica. Usa funciones auxiliares o custom hooks.
• Utiliza tipado con TypeScript para prevenir errores.
• Mantén el código limpio y comenta solo lo necesario.
• Usa herramientas como ESLint o Prettier para mantener la calidad del código.
• Documenta tus componentes si vas a compartirlos o trabajas en equipo.

Estas prácticas te permitirán construir proyectos más sostenibles y fáciles de mantener con el paso del tiempo.

Qué aprender a continuación tras empezar con React

Después de iniciarte con React, puedes avanzar hacia temas más complejos como:

• Routing con React Router para gestionar rutas y navegación.
• Manejo global del estado con Redux o Context API.
• Integración con APIs externas mediante fetch o Axios.
• Deploy de aplicaciones con plataformas como Vercel o Netlify.
• Testing de componentes con Jest o React Testing Library.
• Animaciones con Framer Motion para mejorar la experiencia visual.
• Patrones de diseño como presentational vs container components o render props.

Además, practicar con pequeños proyectos como una lista de tareas, un buscador de películas o una app de notas puede ser una excelente forma de reforzar lo aprendido.

Conclusión

Aprender React es el primer paso para dominar uno de los pilares del desarrollo frontend moderno. A medida que explores sus componentes, hooks y buenas prácticas, ganarás confianza y podrás construir aplicaciones cada vez más potentes y estructuradas.

Recuerda que el aprendizaje es progresivo, por eso es importante avanzar paso a paso. Con tiempo, constancia y práctica, React puede convertirse en una de tus herramientas favoritas.

Visita mi sección de Programación si quieres seguir aprendiendo sobre React, JavaScript u otros frameworks relacionados. ¡Nos leemos en el blog!