Cómo empezar con React en 2025: Guía para principiantes (con ejemplos prácticos)

React sigue siendo uno de los frameworks más populares para el desarrollo web frontend en 2025. Su flexibilidad, comunidad activa y el ecosistema de herramientas lo convierten en una opción ideal tanto para principiantes como para desarrolladores experimentados.

En esta guía aprenderás cómo empezar a usar React de forma rápida, práctica y moderna.

¿Qué es React?

React es una biblioteca de JavaScript desarrollada por Meta (antes Facebook) que te permite construir interfaces de usuario basadas en componentes reutilizables. Se centra en la eficiencia y en la actualización rápida de la interfaz mediante un «DOM virtual».

Requisitos previos

Antes de empezar, deberías tener conocimientos básicos de:

• HTML y CSS
• Fundamentos de JavaScript (variables, funciones, arrays, objetos)

Instalación rápida de React con Vite

En 2025, Vite es una de las formas más rápidas y ligeras de iniciar un proyecto con React.

Paso 1: Instala Node.js

Asegúrate de tener instalada una versión reciente de Node.js (v18 o superior).

Puedes verificarlo ejecutando:

node -v

Si no lo tienes, descárgalo de nodejs.org.

Paso 2: Crea tu proyecto React

Usa el comando de Vite para crear el proyecto:

npm create vite@latest mi-app-react

Te pedirá elegir un framework: selecciona React.

Paso 3: Instala las dependencias

Dentro de la carpeta del proyecto:

cd mi-app-react
npm install

Paso 4: Levanta el servidor de desarrollo

Inicia el servidor local para ver tu aplicación:

npm run dev

Visita http://localhost:5173 en tu navegador. ¡Tu aplicación React está en marcha!

Conceptos básicos de React

1. Componentes

React basa su estructura en componentes. Cada componente es una función de JavaScript que devuelve código JSX (una combinación de HTML y JavaScript).

Ejemplo de un componente simple:

function Saludo() {
  return <h1>¡Hola, mundo!</h1>;
}

export default Saludo;

2. Props

Props son propiedades que puedes pasar a los componentes para hacerlos dinámicos.

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

// Uso del componente
<Saludo nombre="Juan" />

3. Estado (State)

Los componentes pueden tener un estado para manejar datos internos que cambian.

import { useState } from 'react';

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

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

export default Contador;

Buenas prácticas para empezar

• Divide tu interfaz en componentes pequeños y reutilizables.
• Usa el hook useState para gestionar estados locales.
• Aprende también useEffect para manejar efectos secundarios.
• Mantén tu código organizado en carpetas (components, hooks, pages, etc.).

Recursos adicionales

• Documentación oficial de React
• Documentación de Vite