React JS Cheat sheet

Aprender React JS es uno de los primeros pasos para convertirte en desarrollador frontend moderno. En esta guía básica encontrarás explicaciones simples, ejemplos prácticos y los fundamentos esenciales para que empieces a crear tus propias aplicaciones web con React.

1. ¿Qué es React JS?

React JS es una librería de JavaScript enfocada en construir interfaces de usuario dinámicas y escalables.

Características principales:

• Basada en componentes reutilizables.
• Usa un DOM virtual para actualizar solo lo necesario y mejorar el rendimiento.
• Divide la interfaz en piezas independientes con su propio estado y lógica.

???? Lo importante: React = componentes + estado + rendimiento optimizado.

---

2. Componentes en React

Un componente es una función que retorna JSX:

function Saludo() {
  return <h1>Hola mundo ????</h1>;
}

Se usan como etiquetas HTML personalizadas:

<Saludo />

Tipos de componentes:

• Funcionales (modernos, con hooks).
• De clase (en desuso, reemplazados por hooks).

3. JSX (JavaScript XML)

JSX combina HTML y JavaScript para escribir interfaces de forma declarativa.

Ejemplo:

function App() {
  const name = "Alex";
  return <h1>Hola {name}</h1>;
}

???? Reglas principales:

• Cada componente debe tener un único elemento padre.
• Las variables JS se insertan con { }.
• Los atributos usan camelCase (className, onClick).

4. Props en React

Los props son los parámetros de un componente:

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

<Saludo nombre="Alex" />

???? Los props son inmutables dentro del componente.

5. Estado con useState

Cada componente puede manejar su propio estado interno.

import { useState } from "react";

function Contador() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}

???? Cuando cambia el estado, React vuelve a renderizar automáticamente.

---

6. Ciclo de vida con useEffect

El hook useEffect maneja efectos secundarios como fetch de datos, timers o listeners:

import { useEffect } from "react";

useEffect(() => {
  console.log("Se ejecuta al montar");
}, []);

---

7. Eventos en React

<button onClick={() => alert("Click!")}>Presionar</button>

???? Los eventos se manejan con funciones pasadas como props.

---

8. Renderizado condicional

{isLoggedIn ? <p>Bienvenido</p> : <p>Inicia sesión</p>}

---

9. Listas y keys en React

const items = ["A", "B", "C"];

<ul>
  {items.map((item, i) => (
    <li key={i}>{item}</li>
  ))}
</ul>

???? Usa siempre key única para mejorar el rendimiento.

---

10. Context API (estado global)

Permite compartir datos sin props en cadena:

import { createContext, useContext } from "react";

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: "Alex" }}>
      <Perfil />
    </UserContext.Provider>
  );
}

function Perfil() {
  const { name } = useContext(UserContext);
  return <p>Usuario: {name}</p>;
}

---

11. Ruteo con react-router-dom

Maneja múltiples páginas dentro de tu app:

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/perfil" element={<Perfil />} />
  </Routes>
</BrowserRouter>

---

12. Hooks más usados en React

• useState → estado interno.
• useEffect → efectos secundarios.
• useContext → consumir un contexto.
• useReducer → manejo avanzado de estado.
• useMemo / useCallback → optimización de renders.

---

13. Estructura típica de un proyecto React

src/
 ├─ components/   # componentes reutilizables
 ├─ pages/        # páginas completas
 ├─ contexts/     # contextos globales
 ├─ hooks/        # custom hooks
 ├─ utils/        # funciones helper
 ├─ App.jsx       # raíz
 └─ index.jsx     # entrada principal

---

14. Pasos para aprender React JS

1. Aprende JSX.
2. Domina componentes + props.
3. Usa estado con useState.
4. Maneja efectos con useEffect.
5. Controla eventos, condicionales y listas.
6. Escala con Context API.
7. Implementa ruteo con react-router-dom.
8. Pasa a hooks avanzados y patrones de arquitectura.

---

???? Resumen final

React JS = componentes + estado + efectos.

Una vez entiendas los básicos (JSX, props, useState, useEffect), podrás construir cualquier aplicación frontend moderna.

Enlaces útiles

React Reference Overview – React

React Router Official Documentation