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

mi-tienda-online/
├── src/
│   ├── components/     # Componentes reutilizables
│   ├── context/        # Contextos para estado global
│   ├── pages/          # Páginas principales
│   ├── services/       # Llamadas a APIs
│   ├── styles/         # Estilos CSS/SCSS
│   ├── utils/          # Funciones helper
│   └── App.js          # Componente raíz

npm install react-router-dom

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Cart from './pages/Cart';
import Checkout from './pages/Checkout';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/checkout" element={<Checkout />} />
      </Routes>
    </BrowserRouter>
  );
}

const products = [
  {
    id: 1,
    name: "Zapatillas Running Pro",
    price: 89.99,
    image: "https://ejemplo.com/zapatillas.jpg",
    category: "Calzado",
    stock: 15
  },
  // Más productos aquí...
];

export default products;

import { useState, useEffect } from 'react';
import ProductCard from './ProductCard';
import products from '../data/products';

function ProductList() {
  const [productos, setProductos] = useState([]);
  
  // Simulamos la carga asíncrona de datos
  useEffect(() => {
    // En un caso real, aquí harías fetch a tu API
    setProductos(products);
  }, []);
  
  return (
    <div className="product-list">
      <h2>Nuestros Productos</h2>
      <div className="grid">
        {productos.map(producto => (
          <ProductCard key={producto.id} producto={producto} />
        ))}
      </div>
    </div>
  );
}

function ProductCard({ producto }) {
  const { name, price, image } = producto;
  
  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p className="price">${price.toFixed(2)}</p>
      <button className="add-to-cart">
        Añadir al Carrito
      </button>
    </div>
  );
}

function ProductList() {
  const [productos, setProductos] = useState([]);
  const [filtro, setFiltro] = useState('');
  const [categoria, setCategoria] = useState('todas');
  
  const productosFiltrados = productos.filter(p => {
    const coincideTexto = p.name.toLowerCase().includes(filtro.toLowerCase());
    const coincideCategoria = categoria === 'todas' || p.category === categoria;
    return coincideTexto && coincideCategoria;
  });
  
  return (
    <div>
      <div className="filtros">
        <input
          type="text"
          placeholder="Buscar productos..."
          value={filtro}
          onChange={(e) => setFiltro(e.target.value)}
        />
        <select value={categoria} onChange={(e) => setCategoria(e.target.value)}>
          <option value="todas">Todas las categorías</option>
          <option value="Calzado">Calzado</option>
          <option value="Ropa">Ropa</option>
        </select>
      </div>
      {/* Renderizar productosFiltrados en lugar de productos */}
    </div>
  );
}

const [paginaActual, setPaginaActual] = useState(1);
const productosPorPagina = 9;

const indiceInicio = (paginaActual - 1) * productosPorPagina;
const indiceFin = indiceInicio + productosPorPagina;
const productosPagina = productosFiltrados.slice(indiceInicio, indiceFin);

// Renderizar productosPagina en lugar de todos

import { createContext, useState, useContext } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);
  
  const addToCart = (producto) => {
    setCart(currentCart => {
      const existe = currentCart.find(item => item.id === producto.id);
      if (existe) {
        return currentCart.map(item =>
          item.id === producto.id
            ? { ...item, cantidad: item.cantidad + 1 }
            : item
        );
      }
      return [...currentCart, { ...producto, cantidad: 1 }];
    });
  };
  
  const removeFromCart = (id) => {
    setCart(currentCart => currentCart.filter(item => item.id !== id));
  };
  
  const updateQuantity = (id, cantidad) => {
    if (cantidad < 1) {
      removeFromCart(id);
      return;
    }
    setCart(currentCart =>
      currentCart.map(item =>
        item.id === id ? { ...item, cantidad } : item
      )
    );
  };
  
  const total = cart.reduce((sum, item) => sum + (item.price * item.cantidad), 0);
  
  return (
    <CartContext.Provider value={{
      cart,
      addToCart,
      removeFromCart,
      updateQuantity,
      total,
      itemCount: cart.reduce((sum, item) => sum + item.cantidad, 0)
    }}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

import { useCart } from '../context/CartContext';
import { Link } from 'react-router-dom';

function CartWidget() {
  const { itemCount } = useCart();
  
  if (itemCount === 0) return null;
  
  return (
    <Link to="/cart" className="cart-widget">
      🛒
      <span className="cart-count">{itemCount}</span>
    </Link>
  );
}

import { useCart } from '../context/CartContext';
import { Link } from 'react-router-dom';

function Cart() {
  const { cart, removeFromCart, updateQuantity, total } = useCart();
  
  if (cart.length === 0) {
    return (
      <div className="cart-empty">
        <h2>Tu carrito está vacío</h2>
        <Link to="/">Volver a comprar</Link>
      </div>
    );
  }
  
  return (
    <div className="cart-page">
      <h2>Tu Carrito de Compras</h2>
      {cart.map(item => (
        <div key={item.id} className="cart-item">
          <img src={item.image} alt={item.name} />
          <div>
            <h3>{item.name}</h3>
            <p>${item.price.toFixed(2)} c/u</p>
            <div className="quantity-controls">
              <button onClick={() => updateQuantity(item.id, item.cantidad - 1)}>
                -
              </button>
              <span>{item.cantidad}</span>
              <button onClick={() => updateQuantity(item.id, item.cantidad + 1)}>
                +
              </button>
            </div>
            <button onClick={() => removeFromCart(item.id)} className="remove">
              Eliminar
            </button>
          </div>
          <p className="item-total">
            ${(item.price * item.cantidad).toFixed(2)}
          </p>
        </div>
      ))}
      <div className="cart-summary">
        <h3>Total: ${total.toFixed(2)}</h3>
        <Link to="/checkout" className="checkout-button">
          Proceder al Pago
        </Link>
      </div>
    </div>
  );
}

import { useState } from 'react';
import { useCart } from '../context/CartContext';

function Checkout() {
  const { cart, total } = useCart();
  const [formData, setFormData] = useState({
    nombre: '',
    email: '',
    direccion: '',
    ciudad: '',
    tarjeta: ''
  });
  
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    // Validación básica
    if (!formData.nombre || !formData.email) {
      alert('Por favor completa todos los campos');
      return;
    }
    
    // Aquí procesaríamos el pago
    console.log('Procesando pedido:', { formData, cart, total });
    alert('¡Pedido completado con éxito! (simulación)');
  };
  
  return (
    <div className="checkout-page">
      <h2>Finalizar Compra</h2>
      <div className="checkout-container">
        <form onSubmit={handleSubmit} className="checkout-form">
          <h3>Información de Envío</h3>
          <input
            name="nombre"
            placeholder="Nombre completo"
            value={formData.nombre}
            onChange={handleChange}
            required
          />
          <input
            name="email"
            type="email"
            placeholder="Email"
            value={formData.email}
            onChange={handleChange}
            required
          />
          {/* Más campos aquí */}
          
          <h3>Método de Pago</h3>
          <input
            name="tarjeta"
            placeholder="Número de tarjeta"
            value={formData.tarjeta}
            onChange={handleChange}
          />
          
          <button type="submit" className="submit-order">
            Pagar ${total.toFixed(2)}
          </button>
        </form>
        
        <div className="order-summary">
          <h3>Resumen del Pedido</h3>
          {cart.map(item => (
            <div key={item.id} className="order-item">
              <span>{item.name} x {item.cantidad}</span>
              <span>${(item.price * item.cantidad).toFixed(2)}</span>
            </div>
          ))}
          <div className="order-total">
            <strong>Total:</strong>
            <strong>${total.toFixed(2)}</strong>
          </div>
        </div>
      </div>
    </div>
  );
}

// src/context/AuthContext.js
import { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  
  const login = (email, password) => {
    // Simulación - en realidad validarías con backend
    if (email && password) {
      setUser({ email, name: 'Usuario Demo' });
      return true;
    }
    return false;
  };
  
  const logout = () => {
    setUser(null);
  };
  
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';

export async function createOrder(orderData) {
  const response = await fetch(`${API_URL}/orders`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(orderData)
  });
  
  if (!response.ok) {
    throw new Error('Error al crear el pedido');
  }
  
  return response.json();
}

export async function getProducts() {
  const response = await fetch(`${API_URL}/products`);
  return response.json();
}

npm install @stripe/stripe-js

import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('tu_llave_publica');

async function handleStripeCheckout() {
  const stripe = await stripePromise;
  
  const response = await fetch(`${API_URL}/create-checkout-session`, {
    method: 'POST',
    body: JSON.stringify({ cart, userInfo: formData })
  });
  
  const session = await response.json();
  
  const result = await stripe.redirectToCheckout({
    sessionId: session.id
  });
  
  if (result.error) {
    alert(result.error.message);
  }
}

// En tu .env.local (no subir a GitHub!)
REACT_APP_STRIPE_PUBLIC_KEY=pk_test_tu_llave
REACT_APP_API_URL=https://tu-backend.com/api

const stripeKey = process.env.REACT_APP_STRIPE_PUBLIC_KEY;

/* En tu App.css */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

npm install --save-dev @testing-library/react @testing-library/jest-dom

// src/components/ProductCard.test.js
import { render, screen } from '@testing-library/react';
import ProductCard from './ProductCard';

test('muestra el nombre y precio del producto', () => {
  const mockProduct = {
    id: 1,
    name: 'Producto Test',
    price: 29.99,
    image: 'test.jpg'
  };
  
  render(<ProductCard producto={mockProduct} />);
  
  expect(screen.getByText('Producto Test')).toBeInTheDocument();
  expect(screen.getByText('$29.99')).toBeInTheDocument();
});