⚛️ React Desde Cero - Guía Completa

React es una librería JavaScript desarrollada por Facebook para construir interfaces de usuario, especialmente aplicaciones de una sola página (SPA).

Características:

• Componentes reutilizables
• Virtual DOM para mejor rendimiento
• Flujo de datos unidireccional
• Gran ecosistema y comunidad

Vite (Recomendado):

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

Create React App:

npx create-react-app mi-app
cd mi-app
npm start

Estructura:

mi-app/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
└── package.json

Componente Funcional:

// App.jsx
function App() {
  return (
    <div>
      <h1>Hola Mundo</h1>
    </div>
  );
}

export default App;

Componente con返回值:

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

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

JSX:

// JSX es como HTML pero en JavaScript
const elemento = <h1>Hola</h1>;

// Con expresiones
const nombre = 'Juan';
const elemento = <h1>Hola {nombre}</h1>;

// Clases (className en React)
<div className="contenedor">...</div>

Props:

// Pasar props
<Usuario nombre="Juan" edad={30} />

// Recibir props
function Usuario(props) {
  return <h1>{props.nombre}</h1>;
}

// Destructuring
function Usuario({ nombre, edad }) {
  return <h1>{nombre} tiene {edad} años</h1>;
}

useState:

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>
  );
}

useEffect:

import { useState, useEffect } from 'react';

function Datos() {
  const [datos, setDatos] = useState([]);
  
  useEffect(() => {
    // Se ejecuta después del render
    fetch('https://api.ejemplo.com/datos')
      .then(res => res.json())
      .then(data => setDatos(data));
      
    // Cleanup
    return () => console.log('Cleanup');
  }, []); // [] = solo una vez
  
  return <div>{/* render */}</div>;
}

function Boton() {
  function handleClick() {
    alert('Click!');
  }
  
  return (
    <button onClick={handleClick}>
      Haz clic
    </button>
  );
}

// Con parámetros
<button onClick={() => eliminar(id)}>
  Eliminar
</button>

// Evento onChange
<input 
  onChange={(e) => console.log(e.target.value)}
/>

function Lista() {
  const items = ['Manzana', 'Banana', 'Naranja'];
  
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

// Con objetos
function Usuarios() {
  const usuarios = [
    { id: 1, nombre: 'Juan' },
    { id: 2, nombre: 'Maria' },
  ];
  
  return (
    <ul>
      {usuarios.map(user => (
        <li key={user.id}>{user.nombre}</li>
      ))}
    </ul>
  );
}

function Formulario() {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  
  function handleSubmit(e) {
    e.preventDefault();
    console.log({ nombre, email });
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Nombre"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

// 1. Crear Context
import { createContext, useContext, useState } from 'react';

const TemaContext = createContext();

export function TemaProvider({ children }) {
  const [tema, setTema] = useState('claro');
  
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      {children}
    </TemaContext.Provider>
  );
}

// 2. Usar Context
export function useTema() {
  return useContext(TemaContext);
}

// 3. Consumir
function Boton() {
  const { tema, setTema } = useTema();
  return <button onClick={() => setTema('oscuro')}>Cambiar</button>;
}

import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
}

function Contador() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

// npm install react-router-dom

// App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link>
        <Link to="/about">Acerca de</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

// Params
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h1>Usuario {id}</h1>;
}

import { useState, useEffect } from 'react';

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsuarios(data);
        setLoading(false);
      })
      .catch(err => console.error(err));
  }, []);
  
  if (loading) return <p>Cargando...</p>;
  
  return (
    <ul>
      {usuarios.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}