React

img

React es una de las bibliotecas más populares para construir interfaces de usuario dinámicas y reactivas. Fue desarrollada por Facebook (Meta) y actualmente es mantenida por la comunidad y la empresa. Su principal objetivo es facilitar la creación de interfaces escalables, reutilizables y fáciles de mantener.

¿Qué es React?

React es una biblioteca de JavaScript enfocada exclusivamente en la capa de la vista (UI) de una aplicación.
A diferencia de frameworks completos como Angular o Vue, React no impone una estructura estricta, permitiendo mayor flexibilidad para integrar librerías externas según las necesidades del proyecto.

Diferencias clave frente a otros:

2. ¿Para qué se usa?

React se utiliza para crear interfaces interactivas y dinámicas en aplicaciones web y móviles.

Contextos ideales:

3. ¿Qué puedo construir con React?

Con React puedes desarrollar prácticamente cualquier tipo de aplicación visual:

4. ¿Cuándo es más conveniente usarlo?

React es recomendable cuando:

⚠️ Si tu proyecto es muy simple, como una página estática con HTML y CSS, puede que React sea excesivo y un framework más ligero sea suficiente.

Buenas prácticas recomendadas

Para mantener un código limpio y escalable en React, se recomienda:

src/
├── components/
├── pages/
├── hooks/
├── context/
├── utils/
└── App.jsx

Resumen rápido

✅ Fortalezas principales:

⚠️ Debilidades principales:

🛠️ Cuándo usarlo:

🚫 Cuándo evitarlo:

Temas

Conceptos relacionados

Antes de trabajar con React, es fundamental comprender algunos conceptos que forman la base de su funcionamiento y del desarrollo moderno en JavaScript.

JavaScript ES6

Nuevas características como let, const, funciones flecha, destructuring y spread/rest operators.

HTML5 y CSS3

Estructura y estilos básicos para la interfaz de usuario.

JSX

Sintaxis similar a HTML usada dentro de React para definir componentes.

DOM y Virtual DOM

El DOM representa la estructura HTML, mientras que el Virtual DOM optimiza actualizaciones en React.

Componentes

Bloques reutilizables que representan partes de la interfaz.

Props

Datos que se pasan a los componentes como parámetros.

State

Estado interno de un componente que puede cambiar con el tiempo.

Hooks

Funciones especiales (useState, useEffect, etc.) para manejar estado y ciclos de vida.

Context API

Mecanismo para compartir datos entre componentes sin "prop drilling".

Single Page Application (SPA

Aplicaciones que cargan una sola página y actualizan dinámicamente la UI sin recargar.

Node.js

Entorno de ejecución necesario para correr React y gestionar dependencias.

npm/yarn/pnpm

Gestores de paquetes para instalar librerías y dependencias.

Babel

Compilador que transforma JSX y código moderno a una versión compatible con navegadores.

Webpack / Vite

Empaquetadores y servidores de desarrollo para optimizar el proyecto.

REST API / GraphQL

Métodos para consumir datos externos dentro de una aplicación React.

💡 Consejo: Tener bases sólidas en JavaScript moderno es esencial antes de aprender React.

🔼 temas

Herramientas recomendadas

React por sí solo no incluye todo lo necesario para un proyecto completo. Estas herramientas complementan su desarrollo y ayudan a cubrir necesidades como estado global, enrutamiento, pruebas y optimización.

Entorno y gestor de paquetes

Empaquetador / Dev Server

Enrutamiento

Estado global

Estilos

Testing

Consumo de APIs

Despliegue

Herramientas de desarrollo

Documentación

Resumen visual

herramienta descripción
React Construcción de interfaces reactivas.
Vite Desarrollo rápido y empaquetado.
React Router Navegación y rutas.
Redux/Zustand Manejo de estado global.
Tailwind CSS Estilización eficiente.
Jest + RTL Pruebas unitarias y de integración.
Vercel/Netlify Despliegue en la nube.

🚀 Con estas herramientas y conceptos, podrás crear aplicaciones React escalables, rápidas y listas para producción.

🔼 temas

Flujo básico de un proyecto React

1. Inicializar proyecto:

npm create vite@latest my-app
cd my-app
npm install
npm run dev

2. Estructura recomendada:

src/
├── components/    # Componentes reutilizables
├── pages/         # Vistas o páginas
├── hooks/         # Custom Hooks
├── context/       # Context API y estados globales
├── utils/         # Funciones auxiliares
├── assets/        # Imágenes y recursos estáticos
└── App.jsx        # Punto principal de la aplicación

3. Componente básico:

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

export default Saludo;

4. Uso en la app:

import Saludo from './components/Saludo';

function App() {
  return (
    <div>
      <Saludo nombre="Fernando" />
    </div>
  );
}

export default App;

🔼 temas

Snippets rápidos

Estos fragmentos son patrones comunes que usarás frecuentemente en React.

1. Componente funcional básico

function Saludo() {
  return <h1>¡Hola React! 👋</h1>;
}

export default Saludo;

2. Componente con Props

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

export default Saludo;

// Uso:
<Saludo nombre="Fernando" />;

3. Hook useState - Manejo de estado

import { useState } from "react";

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

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

4. Hook useEffect - Ciclo de vida

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Componente montado");
  }, []);

  return <h1>Hola Mundo</h1>;
}

5. Evento en JSX

function Boton() {
  const handleClick = () => alert("¡Clic!");

  return <button onClick={handleClick}>Presióname</button>;
}

6. Listado con .map()

const frutas = ["🍎", "🍌", "🍊"];

function ListaFrutas() {
  return (
    <ul>
      {frutas.map((fruta, index) => (
        <li key={index}>{fruta}</li>
      ))}
    </ul>
  );
}

7. Renderizado condicional

function Mensaje({ logueado }) {
  return <div>{logueado ? <p>Bienvenido 🎉</p> : <p>Inicia sesión 🔑</p>}</div>;
}

8. Uso básico de Context API

import { createContext, useContext } from "react";

const TemaContext = createContext("light");

function Boton() {
  const tema = useContext(TemaContext);
  return <button>{tema === "light" ? "☀️ Claro" : "🌙 Oscuro"}</button>;
}

function App() {
  return (
    <TemaContext.Provider value="dark">
      <Boton />
    </TemaContext.Provider>
  );
}

9. Fetch de datos con useEffect

import { useState, useEffect } from "react";

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsuarios(data));
  }, []);

  return (
    <ul>
      {usuarios.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

10. React Router básico

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> | <Link to="/about">Acerca</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h1>Página de inicio</h1>} />
        <Route path="/about" element={<h1>Acerca de</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

🔼 temas

Comandos

Referencia rápida de comandos

# Crear proyecto con Vite
npm create vite@latest my-app

# Instalar dependencias
npm install

# Ejecutar proyecto en modo desarrollo
npm run dev

# Generar versión de producción
npm run build

# Instalar React Router
npm install react-router-dom

# Instalar Redux Toolkit
npm install @reduxjs/toolkit react-redux

# Instalar Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Inicialización y ejecución

# Crear nuevo proyecto con Vite
npm create vite@latest my-app

# Entrar al proyecto
cd my-app

# Instalar dependencias
npm install

# Ejecutar servidor de desarrollo
npm run dev

# Crear versión de producción
npm run build

Instalación de librerías comunes

# React Router (rutas)
npm install react-router-dom

# Redux Toolkit (estado global)
npm install @reduxjs/toolkit react-redux

# Tailwind CSS (estilos)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Axios (consumo de APIs)
npm install axios

JSX básico

// Variables dentro de JSX
<h1>Hola {nombre} 👋</h1>;

// Atributos dinámicos
<img src={imagen} alt="Logo" />;

// Estilos inline
<p style={ color: "red", fontSize: "18px" }>Texto en rojo</p>;

Comandos Git para React

# Inicializar repositorio
git init

# Agregar archivos al staging area
git add .

# Confirmar cambios
git commit -m "feat: inicialización proyecto React"

# Subir a GitHub
git remote add origin <URL_REPOSITORIO>
git push -u origin main

🔼 temas

Conceptos Claves

🟢 Básico

1. Diferencia entre un componente de clase y un componente funcional

Componente de clase:

class MiComponente extends React.Component {
  render() {
    return <h1>Hola desde clase</h1>;
  }
}

Componente funcional:

function MiComponente() {
  return <h1>Hola desde funcional</h1>;
}

2. Virtual DOM y cómo mejora el rendimiento

El Virtual DOM es una copia ligera en memoria del DOM real.

Cuando ocurre un cambio en la UI:

  1. React actualiza el Virtual DOM.
  2. Compara el Virtual DOM actual con el anterior (diffing).
  3. Solo actualiza en el DOM real los elementos que cambiaron.

Beneficio: mejora el rendimiento porque evita renderizar todo el árbol de componentes.

3. Props en React: propósito e inmutabilidad

⚠️ Inmutabilidad:

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

4. Función del método render() en un componente de clase

El método render():

class App extends React.Component {
  render() {
    return <h1>Hola Mundo</h1>;
  }
}

5. State en React: cuándo y cómo usarlo

El state:

Uso típico:

import { useState } from "react";

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

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

🟡 Intermedio

6. Ciclo de vida de un componente

En componentes de clase, hay tres fases principales:

7. Hooks y ejemplos de uso

Los Hooks permiten usar características avanzadas en componentes funcionales.

8. Cómo funciona useEffect y su arreglo de dependencias

⚠️ Problemas si está mal definido:

9. Context API y uso en escenarios reales

El Context API permite compartir datos globales sin pasar props manualmente por cada nivel.

Escenarios típicos:

const TemaContext = React.createContext("light");

function App() {
  return (
    <TemaContext.Provider value="dark">
      <MiComponente />
    </TemaContext.Provider>
  );
}

10. useReducer vs useState

Ejemplo de useReducer:

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

🔴 Avanzado

11. Key en listas y su importancia

{
  items.map((item) => <li key={item.id}>{item.nombre}</li>);
}

12. Error Boundaries

Útil para:

13. Higher-Order Components (HOCs)

Ventajas:

Desventajas:

Actualmente, los Hooks suelen reemplazarlos por su simplicidad.

14. Fragments en React

return (
  <>
    <h1>Título</h1>
    <p>Descripción</p>
  </>
);

15. Estrategias de optimización de rendimiento

  1. React.memo:
    Memoriza componentes para evitar renderizados innecesarios.

  2. useCallback y useMemo:

    • useCallback → Memoriza funciones.
    • useMemo → Memoriza cálculos costosos.

  3. Code splitting:
    Carga diferida de componentes con React.lazy.

🔼 temas