Blog

Tutorial de React: Guía para Principiantes

Audrey Lopez

Audrey Lopez

13 June 2025

Tutorial de React: Guía para Principiantes

¡Bienvenido, aspirante a desarrollador React! Has tomado una decisión fantástica. React es una potente y popular biblioteca de JavaScript para construir interfaces de usuario, y aprenderla es una forma segura de impulsar tus habilidades de desarrollo web. Esta guía completa, paso a paso, te llevará de cero a héroe, equipándote con el conocimiento práctico que necesitas para empezar a construir tus propias aplicaciones React en 2025. Nos centraremos en hacer, no solo en leer, ¡así que prepárate para escribir algo de código!

💡
¿Quieres una excelente herramienta de prueba de API que genere hermosa documentación de API?

¿Quieres una plataforma integrada y todo en uno para que tu equipo de desarrolladores trabaje junto con máxima productividad?

¡Apidog cumple todas tus demandas y reemplaza a Postman a un precio mucho más asequible!
button

Configuremos tu Entorno de Desarrollo React

Antes de que podamos empezar a construir interfaces de usuario increíbles, necesitamos configurar un lugar para trabajar. Piensa en esto como preparar tu taller antes de empezar un nuevo proyecto.

Instalando lo Esencial: Node.js y npm

Las aplicaciones React se construyen y gestionan usando Node.js y su gestor de paquetes, npm (Node Package Manager).

Para empezar, dirígete al sitio web oficial de Node.js y descarga la última versión de Soporte a Largo Plazo (LTS). El instalador es sencillo; solo sigue las instrucciones en pantalla. Una vez instalado, tendrás tanto Node.js como npm listos. Puedes verificar la instalación abriendo tu terminal o línea de comandos y escribiendo:Bash

node -v
npm -v

Estos comandos deberían imprimir las versiones de Node.js y npm que tienes instaladas, respectivamente.

Tu Primer Proyecto React con Vite

En el pasado, create-react-app era la herramienta de referencia para iniciar un nuevo proyecto React. Sin embargo, el panorama del desarrollo web moderno avanza rápido, y en 2025, Vite es la opción recomendada por su increíble velocidad y eficiencia.

Para crear un nuevo proyecto React con Vite, abre tu terminal y ejecuta el siguiente comando:Bash

npm create vite@latest my-first-react-app -- --template react

Analicemos este comando:

Una vez que el comando termine, tendrás un nuevo directorio con el nombre de tu proyecto. Navega a este directorio:Bash

cd my-first-react-app

Luego, necesitas instalar las dependencias del proyecto. Estos son los otros paquetes que tu aplicación React necesita para funcionar correctamente. Ejecuta este comando:Bash

npm install

Finalmente, para ver tu flamante aplicación React en acción, inicia el servidor de desarrollo:Bash

npm run dev

Tu terminal mostrará una URL local, generalmente http://localhost:5173. Abre esta URL en tu navegador web y verás la aplicación React predeterminada creada por Vite. ¡Felicidades, acabas de configurar tu primer proyecto React!

El Corazón de React: Componentes y JSX

Ahora que tienes una aplicación React en funcionamiento, profundicemos en los conceptos centrales que hacen que React sea tan poderoso: los componentes y JSX.

¿Qué son los Componentes?

En esencia, una aplicación React es una colección de piezas de interfaz de usuario reutilizables y autocontenidas llamadas componentes. Piensa en una página web como si estuviera construida con bloques de LEGO. Cada bloque es un componente, y puedes combinarlos para crear estructuras más complejas.

En tu proyecto my-first-react-app, abre la carpeta src y encontrarás un archivo llamado App.jsx. Este es el componente principal de tu aplicación. Simplifiquemos su contenido para entender lo básico:JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

En este código:

Entendiendo JSX: JavaScript XML

JSX es una extensión de sintaxis para JavaScript que te permite escribir código similar a HTML dentro1 de tus archivos JavaScript. No es realmente HTML, pero hace que escribir código de interfaz de usuario sea mucho más intuitivo y legible.

Detrás de escena, una herramienta llamada transpilador (en nuestro caso, impulsada por Vite) convierte este JSX en JavaScript regular que los navegadores pueden entender.

Modifiquemos nuestro App.jsx para ver el poder de JSX. Podemos incrustar expresiones de JavaScript directamente dentro de nuestro JSX usando llaves {}.JavaScript

// src/App.jsx

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
    </div>
  );
}

export default App;

Guarda el archivo y tu navegador se actualizará automáticamente para mostrar el nuevo contenido. Esta es una característica de Vite llamada Hot Module Replacement (HMR), y proporciona una fantástica experiencia de desarrollo.

Creando tu Primer Componente Personalizado

Creemos nuestro propio componente. En la carpeta src, crea un nuevo archivo llamado Greeting.jsx.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>This is a greeting from my custom component!</h2>
  );
}

export default Greeting;

Ahora, usemos este nuevo componente Greeting dentro de nuestro componente App.jsx.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Importa el componente Greeting

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
      <Greeting /> {/* Usa el componente Greeting */}
    </div>
  );
}

export default App;

Al importar y luego usar <Greeting /> como si fuera una etiqueta HTML regular, hemos compuesto nuestra interfaz de usuario a partir de múltiples componentes. Este es el bloque de construcción fundamental de las aplicaciones React.

Pasando Datos con Props

Nuestro componente Greeting es un poco estático. ¿Qué pasa si queremos saludar a diferentes personas? Aquí es donde entran las props (abreviatura de propiedades). Las props son la forma en que pasas datos de un componente padre a un componente hijo.

Haciendo Componentes Dinámicos con Props

Modifiquemos nuestro Greeting.jsx para que acepte una prop name.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Hello, {props.name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

Ahora, en App.jsx, podemos pasar una prop name a nuestros componentes Greeting.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Ahora verás tres saludos diferentes, cada uno con un nombre único. Las props nos permiten reutilizar componentes con datos diferentes, haciendo nuestra interfaz de usuario increíblemente flexible.

Una práctica común y moderna de JavaScript es desestructurar el objeto props directamente en la lista de parámetros de la función. Refactoricemos Greeting.jsx:JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Hello, {name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

Esto logra el mismo resultado pero con código más limpio y conciso.

Gestionando la Memoria del Componente con State

Aunque las props son geniales para pasar datos hacia abajo en el árbol de componentes, ¿qué sucede cuando un componente necesita recordar y gestionar sus propios datos? Aquí es donde entra en juego el estado (state). El estado son datos que se gestionan dentro de un componente. Cuando el estado de un componente cambia, React volverá a renderizar automáticamente ese componente para reflejar el nuevo estado.

Presentando el Hook useState

Para gestionar el estado en componentes funcionales, usamos una función especial de React llamada Hook. El Hook más fundamental es useState.

Construyamos un componente de contador simple para entender cómo funciona useState. Crea un nuevo archivo en tu carpeta src llamado Counter.jsx.JavaScript

// src/Counter.jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Analicemos esto:

  1. count: El valor actual del estado.
  2. setCount: Una función que podemos usar para actualizar el estado count.

Ahora, agreguemos este componente Counter a nuestro App.jsx:JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>My Awesome React App</h1>
      <Counter />
    </div>
  );
}

export default App;

Ahora deberías ver un contador en tu navegador. Cada vez que haces clic en el botón, el número aumenta. React está volviendo a renderizar el componente Counter cada vez que su estado cambia.

Respondiendo a Acciones del Usuario: Manejando Eventos

La interactividad es el corazón de las aplicaciones web modernas. React proporciona una forma simple y consistente de manejar eventos como clics, envíos de formularios y entrada de teclado.

Ya hemos visto un manejador de eventos básico en nuestro componente Counter con onClick. Exploremos esto más a fondo construyendo un formulario simple que tome la entrada del usuario.

Crea un nuevo archivo de componente llamado NameForm.jsx.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Evita el comportamiento predeterminado de envío del formulario
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default NameForm;

Analicemos este componente de formulario:

Agrega este NameForm a tu App.jsx para verlo en acción.

Mostrando Información: Renderizado Condicional y Listas

Las aplicaciones del mundo real a menudo necesitan mostrar u ocultar contenido basado en ciertas condiciones, y frecuentemente necesitan mostrar listas de datos.

Mostrando y Ocultando con Renderizado Condicional

Creemos un componente que muestre un mensaje diferente dependiendo de si un usuario ha iniciado sesión. Crea un archivo llamado LoginMessage.jsx.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  }
  return <h2>Please log in.</h2>;
}

export default LoginMessage;

También podemos usar el operador ternario para un renderizado condicional más conciso.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
    </div>
  );
}

export default LoginMessage;

Luego puedes usar este componente en App.jsx y pasar la prop isLoggedIn para ver los diferentes mensajes.

Mostrando Listas de Datos

Para renderizar una lista de elementos, normalmente usarás el método de array map(). Creemos un componente para mostrar una lista de frutas. Crea un archivo llamado FruitList.jsx.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Aquí, estamos mapeando sobre el array fruits y para cada fruta, estamos retornando un elemento <li>.

Notarás la prop key={index}. Cuando renderizas una lista de elementos, React necesita una key única para cada elemento para actualizar la lista eficientemente cuando cambia. Usar el índice del array como clave es aceptable para listas simples y estáticas. Sin embargo, para listas dinámicas donde se pueden agregar, eliminar o reordenar elementos, es mejor usar un ID único de tus datos si está disponible.

Agregando Estilo a tu Aplicación

Una gran aplicación necesita verse bien. Hay varias formas de estilizar tus componentes React.

Hojas de Estilo CSS

La forma más sencilla es usar archivos CSS regulares. En la carpeta src, encontrarás un archivo App.css. Puedes agregar tus estilos allí.

Por ejemplo, para estilizar nuestro componente FruitList, podrías agregar esto a App.css:CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Luego, en tu FruitList.jsx, puedes usar estas clases CSS.JavaScript

// src/FruitList.jsx
import './App.css'; // Asegúrate de importar el archivo CSS

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Observa que usamos className en lugar de class en JSX, ya que class es una palabra clave reservada en JavaScript.

Módulos CSS

Para aplicaciones más grandes, los Módulos CSS ofrecen una forma de delimitar los estilos a un componente específico, evitando conflictos de estilo. Un archivo de Módulo CSS se nombra con una extensión .module.css.

Creemos FruitList.module.css:CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

Ahora, en FruitList.jsx, importas los estilos como un objeto:JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits (Styled with CSS Modules):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Vite generará automáticamente nombres de clase únicos, asegurando que los estilos en FruitList.module.css solo se apliquen al componente FruitList.

La mayoría de las aplicaciones web tienen múltiples páginas. Para manejar la navegación entre estas "páginas" en una aplicación de una sola página (SPA) como una construida con React, usamos una biblioteca llamada React Router.

Configurando React Router

Primero, necesitas instalar React Router:Bash

npm install react-router-dom

Creando tus Páginas

Creemos dos componentes de página simples: HomePage.jsx y AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page of our amazing app!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is all about our incredible application.</p>
    </div>
  );
}

export default AboutPage;

Configurando el Router

Ahora, configuraremos nuestras rutas en App.jsx.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Analicemos los nuevos componentes de React Router:

Ahora, cuando hagas clic en los enlaces "Home" y "About", el contenido cambiará sin una recarga completa de la página. ¡Has implementado con éxito el enrutamiento del lado del cliente!

Yendo Más Allá: El Hook useEffect

El Hook useState es para gestionar el estado que afecta directamente lo que se renderiza. Pero, ¿qué pasa con los efectos secundarios, como obtener datos de una API, configurar suscripciones o cambiar manualmente el DOM? Para esto, usamos el Hook useEffect.

El Hook useEffect se ejecuta después de cada renderizado por defecto. Veámoslo en acción creando un componente que obtiene datos de una API falsa.

Crea un nuevo archivo DataFetcher.jsx.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Esta función se llamará después de que el componente se renderice
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // ¡El array de dependencias vacío es importante!

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h3>Fetched Data:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

La clave para entender useEffect aquí es el segundo argumento: el array de dependencias.

Agrega DataFetcher a tu App.jsx para verlo obtener y mostrar datos cuando el componente se carga.

Conclusión y Próximos Pasos

¡Has avanzado mucho! Has aprendido a:

Este es un logro enorme, y ahora tienes una base sólida sobre la cual construir. El mundo de React es vasto y emocionante. Aquí tienes algunos temas que quizás quieras explorar a continuación:

Lo más importante que puedes hacer ahora es seguir construyendo. La práctica es clave. Intenta recrear un sitio web o aplicación simple que uses a diario. Desafíate con nuevas características. Cuanto más codifiques, más confianza y habilidad ganarás.

Bienvenido a la comunidad de React. ¡Feliz codificación!

💡
¿Quieres una excelente herramienta de prueba de API que genere hermosa documentación de API?

¿Quieres una plataforma integrada y todo en uno para que tu equipo de desarrolladores trabaje junto con máxima productividad?

¡Apidog cumple todas tus demandas y reemplaza a Postman a un precio mucho más asequible!
button

Practica el diseño de API en Apidog

Descubre una forma más fácil de construir y usar APIs

Registrarse gratisDescargar