Link al curso de React: REACT DESDE CERO por Sergie Code
Este tutorial te guiará paso a paso para crear un carrito de compras en React utilizando las siguientes tecnologías y estructuras:
- Proyecto creado con Vite
- Archivo principal:
CarritoApp.jsx - 2 páginas:
CarritoPage.jsxyComprasPage.jsx - 2 contextos y proveedores:
ProductContext.jsxyCarritoContext.jsx - 2 componentes especializados:
Card.jsxyNavBar.jsx
Antes de comenzar, asegúrate de tener instalado Node.js en tu máquina. Puedes verificar esto ejecutando el siguiente comando en tu terminal:
node --version
Si Node.js no está instalado, puedes descargarlo e instalarlo desde el sitio oficial de Node.js.
-
Crea una nueva carpeta para tu proyecto y ábrela en tu editor de código preferido.
-
Abre una terminal en la carpeta del proyecto y ejecuta el siguiente comando para crear un nuevo proyecto de React con Vite:
npx create-vite@latest carrito-de-compras-react
-
Selecciona la opción "react-ts" cuando se te solicite elegir una plantilla. Esto creará una estructura de proyecto preconfigurada con React y TypeScript.
-
Una vez que se complete la creación del proyecto, accede a la carpeta utilizando el siguiente comando:
cd carrito-de-compras-react
- Ahora instala las dependencias del proyecto ejecutando el siguiente comando:
npm install
En este paso, crearemos los componentes principales de nuestro carrito de compras.
-
Crea un nuevo archivo llamado
CarritoApp.jsxen la carpetasrc. Este archivo será el punto de entrada de nuestra aplicación y contendrá el enrutamiento entre las páginas. -
Dentro de
CarritoApp.jsx, importa React y las dependencias necesarias:
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import CarritoPage from './CarritoPage';
import ComprasPage from './ComprasPage';
- Crea el componente
CarritoAppy define las rutas para las páginasCarritoPageyComprasPage:
function CarritoApp() {
return (
<Router>
<Switch>
<Route exact path="/" component={CarritoPage} />
<Route path="/compras" component={ComprasPage} />
</Switch>
</Router>
);
}
export default CarritoApp;
- Crea dos archivos nuevos llamados
CarritoPage.jsxyComprasPage.jsxen la carpetasrc. Estos archivos representarán las páginas principales de nuestro carrito de compras.
En este paso, configuraremos los contextos y proveedores para gestionar el estado de nuestros productos y del carrito de compras.
-
Crea un nuevo archivo llamado
ProductContext.jsxen la carpetasrc. Este archivo contendrá el contexto y el proveedor para los productos. -
Dentro de
ProductContext.jsx, importa React y crea el contextoProductContext:
import React, { createContext, useState } from 'react';
const ProductContext = createContext();
export default ProductContext;
- Crea el componente
ProductProviderque servirá como proveedor para los productos:
export function ProductProvider({ children }) {
const [products, setProducts] = useState([]);
// Lógica para obtener y actualizar los productos
return (
<ProductContext.Provider value={{ products, setProducts }}>
{children}
</ProductContext.Provider>
);
}
-
Crea un nuevo archivo llamado
CarritoContext.jsxen la carpetasrc. Este archivo contendrá el contexto y el proveedor para el carrito de compras. -
Dentro de
CarritoContext.jsx, importa React y crea el contextoCarritoContext:
import React, { createContext, useState } from 'react';
const CarritoContext = createContext();
export default CarritoContext;
- Crea el componente
CarritoProviderque servirá como proveedor para el carrito de compras:
export function CarritoProvider({ children }) {
const [carrito, setCarrito] = useState([]);
// Lógica para agregar, eliminar y actualizar el carrito de compras
return (
<CarritoContext.Provider value={{ carrito, setCarrito }}>
{children}
</CarritoContext.Provider>
);
}
En este paso, crearemos los componentes especializados Card y NavBar para mostrar los productos y la navegación del carrito de compras.
-
Crea un nuevo archivo llamado
Card.jsxen la carpetasrc/components. Este archivo contendrá el componenteCardque mostrará un producto. -
Dentro de
Card.jsx, importa React y las dependencias necesarias:
import React from 'react';
function Card() {
// Lógica para mostrar el producto
return (
<div>
{/* Contenido de la tarjeta del producto */}
</div>
);
}
export default Card;
-
Crea un nuevo archivo llamado
NavBar.jsxen la carpetasrc/components. Este archivo contendrá el componenteNavBarque mostrará la barra de navegación del carrito de compras. -
Dentro de
NavBar.jsx, importa React y las dependencias necesarias:
import React from 'react';
function NavBar() {
// Lógica para mostrar la barra de navegación
return (
<nav>
{/* Contenido de la barra de navegación */}
</nav>
);
}
export default NavBar;
¡Felicidades! Has completado la configuración inicial y la creación de los componentes principales para tu carrito de compras en React. En los siguientes pasos, puedes continuar implementando la lógica y el estilo de tu aplicación según tus necesidades.
Recuerda que este tutorial es solo una guía básica y puedes personalizar y mejorar tu carrito de compras agregando funcionalidades adicionales y estilos avanzados.