├── clase02 ├── template │ ├── src │ │ ├── App.jsx │ │ └── main.jsx │ ├── .prettierrc │ ├── style.css │ ├── .gitignore │ ├── vite.config.js │ ├── .eslintrc.json │ ├── index.html │ └── package.json ├── HolaMundo │ ├── vite.config.js │ ├── src │ │ ├── main.jsx │ │ ├── App.css │ │ └── App.jsx │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js ├── FirstProject │ ├── vite.config.js │ ├── src │ │ ├── main.jsx │ │ ├── App.css │ │ └── App.jsx │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js └── ecomerce │ ├── vite.config.js │ ├── src │ ├── main.jsx │ ├── App.css │ └── App.jsx │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js ├── README.md ├── clase04 ├── ecomerce │ ├── src │ │ ├── components │ │ │ ├── Footer.jsx │ │ │ ├── Main.jsx │ │ │ ├── Title.jsx │ │ │ ├── Header.jsx │ │ │ └── NavBar.jsx │ │ └── main.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js └── web │ └── .vscode │ └── settings.json ├── clase06 ├── repaso │ ├── src │ │ ├── components │ │ │ ├── NavBar │ │ │ │ ├── NavBar.css │ │ │ │ └── NavBar.jsx │ │ │ ├── CartWidget │ │ │ │ ├── CartWidget.css │ │ │ │ └── CartWidget.jsx │ │ │ └── ItemListContainer │ │ │ │ ├── ItemListContainer.css │ │ │ │ └── ItemListContainer.jsx │ │ ├── main.jsx │ │ └── App.css │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js └── ecomerce │ ├── src │ ├── components │ │ ├── NavBar │ │ │ └── NavBar.css │ │ ├── CartWidget │ │ │ ├── CartWidget.css │ │ │ └── CartWidget.jsx │ │ ├── ItemListContainer │ │ │ ├── ItemListContainer.css │ │ │ └── ItemListContainer.jsx │ │ ├── Item │ │ │ └── Item.jsx │ │ └── ItemList │ │ │ └── ItemList.jsx │ ├── main.jsx │ ├── App.jsx │ └── App.css │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase09 └── ecomerce │ ├── src │ ├── components │ │ ├── ItemDetail.jsx │ │ ├── ItemDetailContainer.jsx │ │ ├── ItemList.jsx │ │ ├── Item.jsx │ │ ├── CardWidget.jsx │ │ └── ItemListContainer.jsx │ ├── pages │ │ ├── About.jsx │ │ ├── Home.jsx │ │ ├── errors.jsx │ │ └── Contacto.jsx │ ├── main.jsx │ ├── App.jsx │ └── App copy.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase12 └── ecomerce │ ├── public │ └── images │ │ └── notebook10.jpg │ ├── src │ ├── components │ │ ├── Item │ │ │ ├── Item.css │ │ │ └── Item.jsx │ │ ├── ItemDetailContainer │ │ │ ├── ItemDetailContainer.css │ │ │ └── ItemDetailContainer.jsx │ │ ├── ItemList │ │ │ ├── ItemList.jsx │ │ │ └── ItemList.css │ │ ├── CardWidget │ │ │ ├── CardWidget.css │ │ │ └── CardWidget.jsx │ │ └── ItemCount │ │ │ └── ItemCount.jsx │ ├── context │ │ ├── MessageContext.jsx │ │ └── ThemeContext.jsx │ ├── hooks │ │ └── useCart.js │ ├── main.jsx │ ├── services │ │ └── firebase │ │ │ └── index.js │ └── App.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase13 └── ecomerce │ ├── public │ └── images │ │ └── notebook10.jpg │ ├── src │ ├── components │ │ ├── Cart │ │ │ ├── Cart.css │ │ │ └── Cart.jsx │ │ ├── Item │ │ │ ├── Item.css │ │ │ └── Item.jsx │ │ ├── CartItem │ │ │ ├── CartItem.css │ │ │ └── CartItem.jsx │ │ ├── Checkout │ │ │ └── Checkout.css │ │ ├── ItemDetailContainer │ │ │ ├── ItemDetailContainer.css │ │ │ └── ItemDetailContainer.jsx │ │ ├── ItemList │ │ │ ├── ItemList.jsx │ │ │ └── ItemList.css │ │ ├── CardWidget │ │ │ ├── CardWidget.css │ │ │ └── CardWidget.jsx │ │ └── ItemCount │ │ │ └── ItemCount.jsx │ ├── hooks │ │ ├── useCart.js │ │ └── useNotification.js │ ├── main.jsx │ └── services │ │ └── firebase │ │ └── index.js │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase14 └── ecomerce │ ├── public │ └── images │ │ └── notebook10.jpg │ ├── src │ ├── components │ │ ├── Cart │ │ │ ├── Cart.css │ │ │ └── Cart.jsx │ │ ├── Item │ │ │ ├── Item.css │ │ │ └── Item.jsx │ │ ├── Checkout │ │ │ └── Checkout.css │ │ ├── ItemDetailContainer │ │ │ ├── ItemDetailContainer.css │ │ │ └── ItemDetailContainer.jsx │ │ ├── SubirProdutos │ │ │ └── SubirProductos.jsx │ │ ├── ItemList │ │ │ ├── ItemList.jsx │ │ │ └── ItemList.css │ │ ├── CardWidget │ │ │ ├── CardWidget.css │ │ │ └── CardWidget.jsx │ │ ├── ItemCount │ │ │ └── ItemCount.jsx │ │ └── CartItem │ │ │ ├── CartItem.jsx │ │ │ └── CartItem.css │ ├── hooks │ │ ├── useCart.js │ │ ├── useNotification.js │ │ └── useAsync.js │ ├── adapters │ │ └── ProductAdapter.js │ ├── main.jsx │ └── services │ │ └── firebase │ │ └── index.js │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase15 └── ecomerce │ ├── public │ └── images │ │ └── notebook10.jpg │ ├── src │ ├── components │ │ ├── Cart │ │ │ ├── Cart.css │ │ │ └── Cart.jsx │ │ ├── Item │ │ │ ├── Item.css │ │ │ └── Item.jsx │ │ ├── Checkout │ │ │ └── Checkout.css │ │ ├── ItemDetailContainer │ │ │ ├── ItemDetailContainer.css │ │ │ └── ItemDetailContainer.jsx │ │ ├── ItemList │ │ │ ├── ItemList.jsx │ │ │ └── ItemList.css │ │ ├── CardWidget │ │ │ ├── CardWidget.css │ │ │ └── CardWidget.jsx │ │ ├── ItemCount │ │ │ └── ItemCount.jsx │ │ └── CartItem │ │ │ ├── CartItem.jsx │ │ │ └── CartItem.css │ ├── hooks │ │ ├── useCart.js │ │ ├── useNotification.js │ │ ├── useCounter.js │ │ └── useAsync.js │ ├── adapters │ │ └── ProductAdapter.js │ ├── main.jsx │ └── services │ │ └── firebase │ │ └── index.js │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── affterclass03 └── ecomerce │ ├── public │ └── images │ │ └── notebook10.jpg │ ├── src │ ├── components │ │ ├── Cart │ │ │ ├── Cart.css │ │ │ └── Cart.jsx │ │ ├── Item │ │ │ ├── Item.css │ │ │ └── Item.jsx │ │ ├── Checkout │ │ │ ├── Checkout.css │ │ │ └── Checkout.jsx │ │ ├── ItemDetailContainer │ │ │ └── ItemDetailContainer.css │ │ ├── ItemList │ │ │ ├── ItemList.jsx │ │ │ └── ItemList.css │ │ ├── CardWidget │ │ │ ├── CardWidget.css │ │ │ └── CardWidget.jsx │ │ └── ItemCount │ │ │ └── ItemCount.jsx │ ├── hooks │ │ ├── useCart.js │ │ └── useNotification.js │ ├── main.jsx │ └── services │ │ └── firebase │ │ └── index.js │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase01 ├── style.css ├── index.html └── App.js ├── clase07 └── ecomerce │ ├── src │ ├── components │ │ ├── NavBar │ │ │ └── NavBar.css │ │ ├── CartWidget │ │ │ ├── CartWidget.css │ │ │ └── CartWidget.jsx │ │ ├── ItemListContainer │ │ │ ├── ItemListContainer.css │ │ │ └── ItemListContainer.jsx │ │ ├── Item │ │ │ └── Item.jsx │ │ └── ItemList │ │ │ └── ItemList.jsx │ ├── main.jsx │ ├── App.jsx │ └── App.css │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── affterclass01 └── ecomerce │ ├── src │ ├── components │ │ ├── NavBar │ │ │ └── NavBar.css │ │ ├── CartWidget │ │ │ ├── CardWidget.css │ │ │ └── CardWidget.jsx │ │ └── ItemListContainer │ │ │ ├── ItemListContainer.css │ │ │ └── ItemListContainer.jsx │ ├── main.jsx │ └── App.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── affterclass02 └── ecomerce │ ├── src │ ├── components │ │ ├── ItemListContainer │ │ │ └── ItemListContainer.css │ │ ├── ItemList │ │ │ └── ItemList.jsx │ │ └── Item │ │ │ └── Item.jsx │ ├── index.css │ ├── App.jsx │ ├── main.jsx │ └── hooks │ │ └── useMercadoLibre.jsx │ ├── postcss.config.js │ ├── notas.txt │ ├── vite.config.js │ ├── tailwind.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js ├── clase10 └── ecomerce │ ├── src │ ├── pages │ │ ├── About.jsx │ │ ├── Home.jsx │ │ ├── errors.jsx │ │ ├── Contacto.jsx │ │ └── Ejemplo.jsx │ ├── main.jsx │ ├── components │ │ ├── ItemList.jsx │ │ ├── Item.jsx │ │ ├── ItemDetailContainer.jsx │ │ ├── ItemCount.jsx │ │ ├── CardWidget.jsx │ │ ├── ItemListContainer.jsx │ │ └── ItemDetail.jsx │ └── App copy.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase11 └── ecomerce │ ├── src │ ├── pages │ │ ├── About.jsx │ │ ├── Home.jsx │ │ ├── errors.jsx │ │ ├── Contacto.jsx │ │ └── Ejemplo.jsx │ ├── hooks │ │ ├── useCart.js │ │ └── useNumber.jsx │ ├── components │ │ ├── ItemList.jsx │ │ ├── Item.jsx │ │ ├── ItemDetailContainer.jsx │ │ ├── ItemCount.jsx │ │ ├── CardWidget.jsx │ │ └── ItemListContainer.jsx │ ├── main.jsx │ ├── AppPropsDrilling.jsx │ ├── AppUseContextHook.jsx │ └── App.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase08 └── ecomerce │ ├── src │ ├── App.jsx │ ├── Meli.jsx │ ├── Children.jsx │ ├── HighOrderComponent.jsx │ ├── components │ │ ├── Card.jsx │ │ ├── Toogle.jsx │ │ ├── HomePage.jsx │ │ ├── ListProducts.jsx │ │ ├── WithLoading.jsx │ │ ├── ProductDetail.jsx │ │ ├── ProductPage.jsx │ │ └── ProductList.jsx │ ├── RenderProps.jsx │ ├── main.jsx │ ├── CustomHook.jsx │ └── hooks │ │ └── useProductoFilter.js │ ├── vite.config.js │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ └── eslint.config.js ├── clase03 └── ecomerce │ ├── vite.config.js │ ├── src │ ├── main.jsx │ └── App.jsx │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js ├── clase05 └── ecomerce │ ├── vite.config.js │ ├── src │ ├── components │ │ ├── Card │ │ │ └── Card.jsx │ │ ├── Item │ │ │ └── Item.jsx │ │ └── ItemListContainer │ │ │ └── ItemListContainer.jsx │ ├── App.jsx │ ├── main.jsx │ └── App.css │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js └── .gitignore /clase02/template/src/App.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Comision-63375 2 | -------------------------------------------------------------------------------- /clase02/template/src/main.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase02/template/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /clase04/ecomerce/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase04/ecomerce/src/components/Main.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase06/repaso/src/components/NavBar/NavBar.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/components/ItemDetail.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase12/ecomerce/public/images/notebook10.jpg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/Item/Item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/context/MessageContext.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/context/ThemeContext.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase13/ecomerce/public/images/notebook10.jpg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/Cart/Cart.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/Item/Item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase14/ecomerce/public/images/notebook10.jpg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/Cart/Cart.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/Item/Item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase15/ecomerce/public/images/notebook10.jpg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/Cart/Cart.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/Item/Item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/public/images/notebook10.jpg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/Cart/Cart.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/Item/Item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase01/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/NavBar/NavBar.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/NavBar/NavBar.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/CartItem/CartItem.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/Checkout/Checkout.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/Checkout/Checkout.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/Checkout/Checkout.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/components/NavBar/NavBar.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/CartWidget/CartWidget.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase06/repaso/src/components/CartWidget/CartWidget.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/CartWidget/CartWidget.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/components/CartWidget/CardWidget.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/Checkout/Checkout.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase02/template/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/ItemListContainer/ItemListContainer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase06/repaso/src/components/ItemListContainer/ItemListContainer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/ItemListContainer/ItemListContainer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/components/ItemListContainer/ItemListContainer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/components/ItemListContainer/ItemListContainer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clase04/web/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /clase02/template/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | .env 4 | .DS_Store 5 | coverage/ 6 | .vscode/ 7 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/Checkout/Checkout.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default function Checkout() { 4 | return
Checkout
; 5 | } 6 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function About() { 4 | return ( 5 |
About
6 | ) 7 | } 8 | 9 | export default About 10 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Home() { 4 | return ( 5 |
Home
6 | ) 7 | } 8 | 9 | export default Home 10 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function About() { 4 | return ( 5 |
About
6 | ) 7 | } 8 | 9 | export default About 10 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Home() { 4 | return ( 5 |
Home
6 | ) 7 | } 8 | 9 | export default Home 10 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function About() { 4 | return ( 5 |
About
6 | ) 7 | } 8 | 9 | export default About 10 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Home() { 4 | return ( 5 |
Home
6 | ) 7 | } 8 | 9 | export default Home 10 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/CartItem/CartItem.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default function CartItem() { 4 | return ( 5 |
CartItem
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/pages/errors.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function errors() { 4 | return ( 5 |
errors
6 | ) 7 | } 8 | 9 | export default errors 10 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/pages/errors.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function errors() { 4 | return ( 5 |
errors
6 | ) 7 | } 8 | 9 | export default errors 10 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/pages/errors.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function errors() { 4 | return ( 5 |
errors
6 | ) 7 | } 8 | 9 | export default errors 10 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | function App() { 2 | return ( 3 | <> 4 |

hello world

5 | 6 | ); 7 | } 8 | 9 | export default App 10 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/pages/Contacto.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Contacto() { 4 | return ( 5 |
Contacto
6 | ) 7 | } 8 | 9 | export default Contacto 10 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/pages/Contacto.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Contacto() { 4 | return ( 5 |
Contacto
6 | ) 7 | } 8 | 9 | export default Contacto 10 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/pages/Contacto.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Contacto() { 4 | return ( 5 |
Contacto
6 | ) 7 | } 8 | 9 | export default Contacto 10 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/Meli.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Meli = () => { 4 | return ( 5 |
Meli
6 | ) 7 | } 8 | 9 | export default Meli 10 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/notas.txt: -------------------------------------------------------------------------------- 1 | Consumir la API de Meli 2 | Desde un CustomHook 3 | Patron contenedor ItemListContaner, ItemList, Item 4 | Vamos a arrancar desde App llamando al ItemListContainer 5 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/hooks/useCart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { CartContext } from "../context/CartContext" 3 | 4 | export const useCart = () => { 5 | return useContext(CartContext) 6 | } 7 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/hooks/useCart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { CartContext } from "../context/CartContext" 3 | 4 | export const useCart = () => { 5 | return useContext(CartContext) 6 | } 7 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/hooks/useCart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { CartContext } from "../context/CartContext" 3 | 4 | export const useCart = () => { 5 | return useContext(CartContext) 6 | } 7 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/hooks/useCart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { CartContext } from "../context/CartContext" 3 | 4 | export const useCart = () => { 5 | return useContext(CartContext) 6 | } 7 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/hooks/useCart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { CartContext } from "../context/CartContext" 3 | 4 | export const useCart = () => { 5 | return useContext(CartContext) 6 | } 7 | -------------------------------------------------------------------------------- /clase02/HolaMundo/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/hooks/useCart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { CartContext } from "../context/CartContext" 3 | 4 | export const useCart = () => { 5 | return useContext(CartContext) 6 | } 7 | -------------------------------------------------------------------------------- /clase02/FirstProject/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase02/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase03/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase04/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase05/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase06/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase06/repaso/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase07/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase08/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/components/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function ItemDetailContainer() { 4 | return ( 5 |
ItemDetailContainer
6 | ) 7 | } 8 | 9 | export default ItemDetailContainer 10 | -------------------------------------------------------------------------------- /clase09/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase10/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase11/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase12/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase13/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase14/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase15/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /clase02/template/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react-swc"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /clase06/repaso/src/components/ItemListContainer/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function ItemListContainer(props) { 4 | return ( 5 |

{props.greeting}

6 | ) 7 | } 8 | 9 | export default ItemListContainer 10 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/components/ItemListContainer/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function ItemListContainer() { 4 | return ( 5 |
ItemListContainer
6 | ) 7 | } 8 | 9 | export default ItemListContainer 10 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/hooks/useNumber.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import NumberContext from "../context/NumberContext"; 3 | function useNumber() { 4 | return useContext(NumberContext); 5 | } 6 | 7 | export default useNumber; 8 | -------------------------------------------------------------------------------- /clase04/ecomerce/src/components/Title.jsx: -------------------------------------------------------------------------------- 1 | function Title({titulo}) { 2 | //console.log(props) 3 | //const { titulo } = props 4 | return ( 5 | <> 6 |

{titulo}

7 | 8 | ); 9 | } 10 | 11 | export default Title; 12 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Item({product}) { 4 | return ( 5 |
6 |

{product.name}

7 |

{product.price}

8 |
9 | ) 10 | } 11 | 12 | export default Item 13 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Item({product}) { 4 | return ( 5 |
6 |

{product.title}

7 |

{product.price}

8 |
9 | ) 10 | } 11 | 12 | export default Item 13 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/Children.jsx: -------------------------------------------------------------------------------- 1 | import ProductPage from "./components/ProductPage" 2 | 3 | 4 | function Children() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default Children 13 | -------------------------------------------------------------------------------- /clase05/ecomerce/src/components/Card/Card.jsx: -------------------------------------------------------------------------------- 1 | 2 | const Card = ({children}) => { 3 | //console.log(props.children) 4 | return ( 5 |
6 | {children} 7 |
8 | ); 9 | } 10 | 11 | export default Card 12 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/hooks/useNotification.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { NotificationContext } from "../context/NotificationContext"; 3 | 4 | export const useNotifacation = () => { 5 | return useContext(NotificationContext); 6 | }; 7 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/hooks/useNotification.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { NotificationContext } from "../context/NotificationContext"; 3 | 4 | export const useNotifacation = () => { 5 | return useContext(NotificationContext); 6 | }; 7 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/hooks/useNotification.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { NotificationContext } from "../context/NotificationContext"; 3 | 4 | export const useNotifacation = () => { 5 | return useContext(NotificationContext); 6 | }; 7 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/hooks/useNotification.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { NotificationContext } from "../context/NotificationContext"; 3 | 4 | export const useNotifacation = () => { 5 | return useContext(NotificationContext); 6 | }; 7 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import ItemListContainer from "./components/ItemListContainer/ItemListContainer"; 2 | 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.css: -------------------------------------------------------------------------------- 1 | .ItemDetailContainer { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-direction: column; 6 | min-height: 80vh; 7 | padding: 10px; 8 | } 9 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.css: -------------------------------------------------------------------------------- 1 | .ItemDetailContainer { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-direction: column; 6 | min-height: 80vh; 7 | padding: 10px; 8 | } 9 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.css: -------------------------------------------------------------------------------- 1 | .ItemDetailContainer { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-direction: column; 6 | min-height: 80vh; 7 | padding: 10px; 8 | } 9 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.css: -------------------------------------------------------------------------------- 1 | .ItemDetailContainer { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-direction: column; 6 | min-height: 80vh; 7 | padding: 10px; 8 | } 9 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.css: -------------------------------------------------------------------------------- 1 | .ItemDetailContainer { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-direction: column; 6 | min-height: 80vh; 7 | padding: 10px; 8 | } 9 | -------------------------------------------------------------------------------- /clase06/repaso/src/main.jsx: -------------------------------------------------------------------------------- 1 | //import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | //import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /clase05/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import ItemListContainer from './components/ItemListContainer/ItemListContainer' 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | ) 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | //import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | //import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | //import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | //import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /clase03/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/SubirProdutos/SubirProductos.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { subirProductos } from '../../asyncMock' 3 | 4 | const SubirProductos = () => { 5 | subirProductos(); 6 | return ( 7 |
subidos
8 | ) 9 | } 10 | 11 | export default SubirProductos; 12 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | 7 | createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | 7 | createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/HighOrderComponent.jsx: -------------------------------------------------------------------------------- 1 | import HomePage from "./components/HomePage" 2 | 3 | 4 | function HighOrderComponent() { 5 | return ( 6 |
7 |

Ejemplo de HOC

8 | 9 |
10 | ) 11 | } 12 | 13 | export default HighOrderComponent 14 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Card({children}) { 4 | //console.log(props) 5 | return ( 6 |
7 | {children} 8 |
9 | ) 10 | } 11 | 12 | export default Card 13 | -------------------------------------------------------------------------------- /clase02/FirstProject/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /clase02/HolaMundo/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /clase02/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /clase05/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/RenderProps.jsx: -------------------------------------------------------------------------------- 1 | import ProductDetail from "./components/ProductDetail" 2 | 3 | 4 | const RenderProps = () => { 5 | return ( 6 |
7 |

Render Props

8 | 9 |
10 | ) 11 | } 12 | 13 | export default RenderProps 14 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/Toogle.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | const Toggle = ({ children }) => { 3 | const [isOpen, setIsOpen] = useState(false); 4 | 5 | const toggle = () => setIsOpen(!isOpen); 6 | 7 | return children({ isOpen, toggle }); 8 | }; 9 | 10 | export default Toggle; 11 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/components/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "./Item" 2 | 3 | function ItemList({products}) { 4 | return ( 5 |
6 | {products.map( product => )} 7 |
8 | ) 9 | } 10 | 11 | export default ItemList 12 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "./Item" 2 | 3 | function ItemList({products}) { 4 | return ( 5 |
6 | {products.map( product => )} 7 |
8 | ) 9 | } 10 | 11 | export default ItemList 12 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/components/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "./Item" 2 | 3 | function ItemList({products}) { 4 | return ( 5 |
6 | {products.map( product => )} 7 |
8 | ) 9 | } 10 | 11 | export default ItemList 12 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import ItemListContainer from "./components/ItemListContainer/ItemListContainer" 2 | import NavBar from "./components/NavBar/NavBar" 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import ProductListWithLoading from "./ListProducts"; 2 | const HomePage = () => { 3 | const products = [ 4 | { id: 1, name: "Producto 1" }, 5 | { id: 2, name: "Producto 2" }, 6 | ]; 7 | return ; 8 | }; 9 | 10 | export default HomePage; 11 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Item from '../Item/Item' 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map((product)=>{ 8 | return 9 | })} 10 |
11 | ) 12 | } 13 | 14 | export default ItemList 15 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Item from '../Item/Item' 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map((product)=>{ 8 | return 9 | })} 10 |
11 | ) 12 | } 13 | 14 | export default ItemList 15 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "../Item/Item" 2 | import "./ItemList.css"; 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map( product => )} 8 |
9 | ) 10 | } 11 | 12 | export default ItemList 13 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "../Item/Item" 2 | import "./ItemList.css"; 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map( product => )} 8 |
9 | ) 10 | } 11 | 12 | export default ItemList 13 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "../Item/Item" 2 | import "./ItemList.css"; 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map( product => )} 8 |
9 | ) 10 | } 11 | 12 | export default ItemList 13 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "../Item/Item" 2 | import "./ItemList.css"; 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map( product => )} 8 |
9 | ) 10 | } 11 | 12 | export default ItemList 13 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "../Item/Item" 2 | import "./ItemList.css"; 3 | 4 | function ItemList({products}) { 5 | return ( 6 |
7 | {products.map( product => )} 8 |
9 | ) 10 | } 11 | 12 | export default ItemList 13 | -------------------------------------------------------------------------------- /clase04/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | //import App from './AppBootstrap.jsx' 5 | //import App from './AppMaterialize.jsx' 6 | 7 | createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /clase02/template/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "prettier"], 3 | "plugins": [], 4 | "parserOptions": { 5 | "ecmaVersion": 2022, 6 | "sourceType": "module", 7 | "ecmaFeatures": { 8 | "jsx": true 9 | } 10 | }, 11 | "env": { 12 | "es6": true, 13 | "browser": true, 14 | "node": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import ItemListContainer from "./components/ItemListContainer/ItemListContainer" 3 | import NavBar from "./components/NavBar/NavBar" 4 | 5 | 6 | function App() { 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import ItemListContainer from "./components/ItemListContainer/ItemListContainer" 3 | import NavBar from "./components/NavBar/NavBar" 4 | 5 | 6 | function App() { 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /clase06/repaso/src/components/NavBar/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import CartWidget from "../CartWidget/CartWidget" 2 | 3 | 4 | function NavBar() { 5 | return ( 6 | <> 7 |
    8 |
  • Home
    • 9 |
  • Productos
    • 10 |
  • 11 | 12 |
    • 13 |
14 | 15 | ); 16 | } 17 | 18 | export default NavBar 19 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/ListProducts.jsx: -------------------------------------------------------------------------------- 1 | import withLoading from "./WithLoading"; 2 | const ListProduct = ({ products }) => ( 3 |
    4 | {products.map((product) => ( 5 |
  • {product.name}
    • 6 | ))} 7 |
8 | ); 9 | 10 | const ProductListWithLoading = withLoading(ListProduct); 11 | 12 | export default ProductListWithLoading; 13 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/ItemList/ItemList.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | align-content: stretch; 7 | align-items: flex-start; 8 | margin: 0 auto; 9 | padding: 4em 1em; 10 | max-width: 1200px; 11 | text-align: center; 12 | overflow: hidden; 13 | user-select: none; 14 | } 15 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/ItemList/ItemList.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | align-content: stretch; 7 | align-items: flex-start; 8 | margin: 0 auto; 9 | padding: 4em 1em; 10 | max-width: 1200px; 11 | text-align: center; 12 | overflow: hidden; 13 | user-select: none; 14 | } 15 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/ItemList/ItemList.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | align-content: stretch; 7 | align-items: flex-start; 8 | margin: 0 auto; 9 | padding: 4em 1em; 10 | max-width: 1200px; 11 | text-align: center; 12 | overflow: hidden; 13 | user-select: none; 14 | } 15 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/ItemList/ItemList.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | align-content: stretch; 7 | align-items: flex-start; 8 | margin: 0 auto; 9 | padding: 4em 1em; 10 | max-width: 1200px; 11 | text-align: center; 12 | overflow: hidden; 13 | user-select: none; 14 | } 15 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/ItemList/ItemList.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | align-content: stretch; 7 | align-items: flex-start; 8 | margin: 0 auto; 9 | padding: 4em 1em; 10 | max-width: 1200px; 11 | text-align: center; 12 | overflow: hidden; 13 | user-select: none; 14 | } 15 | -------------------------------------------------------------------------------- /clase02/HolaMundo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase02/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase03/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase04/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase04/ecomerce/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import Title from "./Title"; 2 | import NavBar from "./NavBar"; 3 | function Header() { 4 | return ( 5 |
6 | 7 | <NavBar /> 8 | </header> 9 | ); 10 | } 11 | 12 | export default Header; 13 | -------------------------------------------------------------------------------- /clase05/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase06/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase06/repaso/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase07/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase08/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase09/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase10/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase11/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase12/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase13/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase02/FirstProject/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /clase14/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env 26 | -------------------------------------------------------------------------------- /clase15/ecomerce/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env 26 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/adapters/ProductAdapter.js: -------------------------------------------------------------------------------- 1 | export const createProductAdapterFromFirebase = (doc) => { 2 | const data = doc.data() 3 | 4 | return { 5 | id: doc.id, 6 | name: data.name, 7 | category: data.category, 8 | img: data.img, 9 | price: data.price, 10 | stock: data.stock, 11 | description: data.description 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/adapters/ProductAdapter.js: -------------------------------------------------------------------------------- 1 | export const createProductAdapterFromFirebase = (doc) => { 2 | const data = doc.data() 3 | 4 | return { 5 | id: doc.id, 6 | name: data.name, 7 | category: data.category, 8 | img: data.img, 9 | price: data.price, 10 | stock: data.stock, 11 | description: data.description 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /clase02/FirstProject/index.html: -------------------------------------------------------------------------------- 1 | <!doctype html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8" /> 5 | <link rel="icon" type="image/svg+xml" href="/vite.svg" /> 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 | <title>Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /clase02/HolaMundo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /clase02/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /clase03/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /clase05/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/components/ItemList/ItemList.jsx: -------------------------------------------------------------------------------- 1 | import Item from "../Item/Item" 2 | 3 | 4 | function ItemList({products}) { 5 | console.log(products) 6 | return ( 7 |
8 | {products.map((item) => ( 9 | 10 | ))} 11 |
12 | ); 13 | } 14 | 15 | export default ItemList 16 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | export default function Cart() { 3 | return ( 4 |
5 |

Productos del carrito

6 |
    7 |
  • producto 1
    • 8 |
  • producto 2
    • 9 |
  • producto 5
    • 10 |
  • producto 20
    • 11 |
12 | 13 | Finalizar compra 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | //import AppPropsDrilling from './AppPropsDrilling.jsx' 7 | 8 | //import AppUseContextSimple from './AppUseContextSimple.jsx' 9 | //import AppUseContextHook from './AppUseContextHook.jsx' 10 | 11 | createRoot(document.getElementById('root')).render( 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | //import AppPropsDrilling from './AppPropsDrilling.jsx' 7 | 8 | //import AppUseContextSimple from './AppUseContextSimple.jsx' 9 | //import AppUseContextHook from './AppUseContextHook.jsx' 10 | 11 | createRoot(document.getElementById('root')).render( 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | //import AppPropsDrilling from './AppPropsDrilling.jsx' 7 | 8 | //import AppUseContextSimple from './AppUseContextSimple.jsx' 9 | //import AppUseContextHook from './AppUseContextHook.jsx' 10 | 11 | createRoot(document.getElementById('root')).render( 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | //import AppPropsDrilling from './AppPropsDrilling.jsx' 7 | 8 | //import AppUseContextSimple from './AppUseContextSimple.jsx' 9 | //import AppUseContextHook from './AppUseContextHook.jsx' 10 | 11 | createRoot(document.getElementById('root')).render( 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | //import AppPropsDrilling from './AppPropsDrilling.jsx' 7 | 8 | //import AppUseContextSimple from './AppUseContextSimple.jsx' 9 | //import AppUseContextHook from './AppUseContextHook.jsx' 10 | 11 | createRoot(document.getElementById('root')).render( 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { StrictMode } from 'react' 3 | 4 | 5 | import App from './App.jsx' 6 | //import AppPropsDrilling from './AppPropsDrilling.jsx' 7 | 8 | //import AppUseContextSimple from './AppUseContextSimple.jsx' 9 | //import AppUseContextHook from './AppUseContextHook.jsx' 10 | 11 | createRoot(document.getElementById('root')).render( 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /clase06/repaso/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase02/FirstProject/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase02/HolaMundo/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase02/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase03/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase04/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase05/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase06/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase07/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase08/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase09/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase10/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase11/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase12/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase13/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase14/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase15/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/main.jsx: -------------------------------------------------------------------------------- 1 | //import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import { StrictMode } from 'react' 4 | //import RenderProps from './RenderProps' 5 | //import HighOrderComponent from './HighOrderComponent' 6 | //import CustomHooks from './CustomHook.jsx' 7 | //import Children from './Children.jsx' 8 | import App from './App.jsx' 9 | 10 | createRoot(document.getElementById('root')).render( 11 | 12 | 13 | 14 | 15 | ) 16 | -------------------------------------------------------------------------------- /clase05/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | import Card from "../Card/Card" 3 | 4 | export const Item = ({nombre}) => { 5 | const [cantidad, setCantidad] = useState(0); 6 | 7 | const agregarAlCarrito = () => { 8 | setCantidad(cantidad + 1); 9 | }; 10 | 11 | return ( 12 | <> 13 | 14 |

{nombre}

15 | 16 |

{cantidad}

17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/WithLoading.jsx: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from "react"; 2 | 3 | const withLoading = (WrappedComponent) => { 4 | 5 | return function WithLoadingComponent(props) { 6 | const [loading, setLoading] = useState(true); 7 | 8 | useEffect(() => { 9 | setTimeout(() => setLoading(false), 2000); 10 | }, []); 11 | 12 | if (loading) return

Cargando productos...

; 13 | return ; 14 | }; 15 | }; 16 | 17 | export default withLoading; 18 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase04/ecomerce/src/components/NavBar.jsx: -------------------------------------------------------------------------------- 1 | function NavBar() { 2 | return ( 3 | 20 | ); 21 | } 22 | export default NavBar 23 | -------------------------------------------------------------------------------- /clase06/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase06/repaso/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase07/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase08/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase09/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase10/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase11/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase12/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase13/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase14/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase15/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi super tienda 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/components/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/hooks/useCounter.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function useCounter(initialState=0) { 4 | const [valor, setValor] = useState(initialState) 5 | const increment = () => { 6 | setValor(valor + 1) 7 | } 8 | const decrement = () => { 9 | setValor(valor - 1) 10 | } 11 | const reset = () => { 12 | setValor(initialState) 13 | } 14 | 15 | return { 16 | increment, 17 | decrement, 18 | reset, 19 | valor 20 | 21 | } 22 | } 23 | 24 | export default useCounter; 25 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/components/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/ProductDetail.jsx: -------------------------------------------------------------------------------- 1 | import Toggle from "./Toogle"; 2 | 3 | const ProductDetail = () => ( 4 | 5 | {({ isOpen, toggle }) => ( 6 |
7 | 10 | {isOpen && ( 11 |
12 |

Este es el detalle del producto.

13 |

Este es el detalle del producto.

14 |
15 | )} 16 |
17 | )} 18 | 19 | ); 20 | 21 | export default ProductDetail; 22 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/CardWidget/CardWidget.css: -------------------------------------------------------------------------------- 1 | .CartWidget { 2 | width: auto; 3 | padding: 12px; 4 | font-size: 8px; 5 | background: #d68fff; 6 | border-radius: 8px; 7 | flex: none; 8 | display: flex; 9 | order: 1; 10 | align-self: center; 11 | flex-grow: 0; 12 | justify-content: center; 13 | align-items: center; 14 | text-decoration: none; 15 | border: none; 16 | border-style: none; 17 | cursor: pointer; 18 | outline: inherit; 19 | font-size: medium; 20 | } 21 | 22 | .CartImg { 23 | margin-right: 10px; 24 | } 25 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/CardWidget/CardWidget.css: -------------------------------------------------------------------------------- 1 | .CartWidget { 2 | width: auto; 3 | padding: 12px; 4 | font-size: 8px; 5 | background: #d68fff; 6 | border-radius: 8px; 7 | flex: none; 8 | display: flex; 9 | order: 1; 10 | align-self: center; 11 | flex-grow: 0; 12 | justify-content: center; 13 | align-items: center; 14 | text-decoration: none; 15 | border: none; 16 | border-style: none; 17 | cursor: pointer; 18 | outline: inherit; 19 | font-size: medium; 20 | } 21 | 22 | .CartImg { 23 | margin-right: 10px; 24 | } 25 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/CardWidget/CardWidget.css: -------------------------------------------------------------------------------- 1 | .CartWidget { 2 | width: auto; 3 | padding: 12px; 4 | font-size: 8px; 5 | background: #d68fff; 6 | border-radius: 8px; 7 | flex: none; 8 | display: flex; 9 | order: 1; 10 | align-self: center; 11 | flex-grow: 0; 12 | justify-content: center; 13 | align-items: center; 14 | text-decoration: none; 15 | border: none; 16 | border-style: none; 17 | cursor: pointer; 18 | outline: inherit; 19 | font-size: medium; 20 | } 21 | 22 | .CartImg { 23 | margin-right: 10px; 24 | } 25 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/CardWidget/CardWidget.css: -------------------------------------------------------------------------------- 1 | .CartWidget { 2 | width: auto; 3 | padding: 12px; 4 | font-size: 8px; 5 | background: #d68fff; 6 | border-radius: 8px; 7 | flex: none; 8 | display: flex; 9 | order: 1; 10 | align-self: center; 11 | flex-grow: 0; 12 | justify-content: center; 13 | align-items: center; 14 | text-decoration: none; 15 | border: none; 16 | border-style: none; 17 | cursor: pointer; 18 | outline: inherit; 19 | font-size: medium; 20 | } 21 | 22 | .CartImg { 23 | margin-right: 10px; 24 | } 25 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/CardWidget/CardWidget.css: -------------------------------------------------------------------------------- 1 | .CartWidget { 2 | width: auto; 3 | padding: 12px; 4 | font-size: 8px; 5 | background: #d68fff; 6 | border-radius: 8px; 7 | flex: none; 8 | display: flex; 9 | order: 1; 10 | align-self: center; 11 | flex-grow: 0; 12 | justify-content: center; 13 | align-items: center; 14 | text-decoration: none; 15 | border: none; 16 | border-style: none; 17 | cursor: pointer; 18 | outline: inherit; 19 | font-size: medium; 20 | } 21 | 22 | .CartImg { 23 | margin-right: 10px; 24 | } 25 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | 4 | function Item({product}) { 5 | return ( 6 |
7 | 8 |
9 |

{product.name}

10 |

{product.price}

11 |

{product.description}

12 | Ver detalle 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Item 19 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/ProductPage.jsx: -------------------------------------------------------------------------------- 1 | import Card from "./Card" 2 | 3 | 4 | function ProductPage() { 5 | return ( 6 | <> 7 | 8 |

Producto Destacado

9 |

Este es un producto muy solicitado

10 | 11 | 12 | 17 | 18 | 19 | 20 | ); 21 | } 22 | 23 | export default ProductPage 24 | -------------------------------------------------------------------------------- /clase05/ecomerce/src/components/ItemListContainer/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | import { Item } from "../Item/Item"; 2 | 3 | import { useState } from "react"; 4 | 5 | 6 | const ItemListContainer = () => { 7 | const [productos, setProductos] = useState([ 8 | "Camiseta", 9 | "Short", 10 | "Zapatos", 11 | "Medias", 12 | "Buzos", 13 | ]); 14 | 15 | return ( 16 |
17 |

Lista de Productos

18 |
    19 | {productos.map((item) => )} 20 |
21 |
22 | ); 23 | } 24 | 25 | export default ItemListContainer 26 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import NavBar from "./components/NavBar"; 2 | import {BrowserRouter, Routes, Route} from 'react-router-dom' 3 | import ItemListContainer from "./components/ItemListContainer"; 4 | 5 | function App() { 6 | 7 | return ( 8 | 9 | 10 | 11 | } 14 | /> 15 | } /> 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default App 23 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/CustomHook.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import {getProducts} from "./asyncMock" 3 | import ProductList from "./components/ProductList" 4 | 5 | const CustomHook = () => { 6 | const [productos, setProductos] = useState([]) 7 | 8 | useEffect(() => { 9 | getProducts().then((data) => { 10 | setProductos(data) 11 | }) 12 | },[]) 13 | 14 | 15 | 16 | return ( 17 | <> 18 |

ejemplo de e-comerce

19 | 20 | 21 | ); 22 | } 23 | 24 | export default CustomHook 25 | -------------------------------------------------------------------------------- /clase01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Titulo

14 |
15 | 16 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/AppPropsDrilling.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export default function AppPropsDrilling() { 4 | const [numero, setNumero] = useState(10) 5 | //const numero = 10; 6 | 7 | return ( 8 | 9 | ) 10 | } 11 | 12 | function ComponentA({numero}) { 13 | return ( 14 | 15 | ) 16 | } 17 | 18 | function ComponentB({numero}) { 19 | return ( 20 | 21 | ) 22 | } 23 | 24 | function ComponentC({numero}) { 25 | return ( 26 |
27 |

{numero}

28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /clase02/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Titulo

14 |
15 | 16 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/components/ProductList.jsx: -------------------------------------------------------------------------------- 1 | 2 | import useProductFilter from "../hooks/useProductoFilter" 3 | 4 | 5 | const ProductList = ({initialProducts}) => { 6 | const {filter, setFilter, products} = useProductFilter(initialProducts) 7 | return ( 8 |
9 | setFilter(e.target.value)} 13 | placeholder="filtrar..." 14 | /> 15 |
    16 | {products.map((item)=>( 17 |
  • {item.name}
    • 18 | ))} 19 |
20 | 21 |
22 | ) 23 | } 24 | export default ProductList 25 | -------------------------------------------------------------------------------- /clase03/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | // Esta parte del codigo se utiliza para importar librerias 2 | 3 | // Lo que esta antes de la funcion (Javascript) 4 | //import { Fragment } from "react"; 5 | //import React from 'react'; 6 | 7 | function App() { 8 | // Lo que esta antes del return (Javascript) 9 | // codigo javascript programatico sin restricciones 10 | let alumnos = ['Mario', 'Diego', 'Eduardo', 'Jose', 'Javier']; 11 | 12 | 13 | return ( 14 | <> 15 |

Alumnos

16 |
    17 | {alumnos.map((alumno, index) => ( 18 |
  • {alumno}
    • 19 | ))} 20 |
21 | 22 | ); 23 | 24 | } 25 | 26 | export default App 27 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react" 2 | import { useParams } from "react-router-dom" 3 | import {getProductByID} from '../asyncMock.js' 4 | import ItemDetail from "./ItemDetail.jsx" 5 | function ItemDetailContainer() { 6 | const [product, setProduct] = useState({}) 7 | const {productId} = useParams(); 8 | 9 | useEffect(()=>{ 10 | getProductByID(productId) 11 | .then((res) =>{ 12 | //console.log(res); 13 | setProduct(res) 14 | }) 15 | }, [productId]) 16 | 17 | console.log(productId) 18 | return ( 19 | <> 20 | 21 | 22 | ); 23 | } 24 | 25 | export default ItemDetailContainer 26 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/components/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react" 2 | import { useParams } from "react-router-dom" 3 | import {getProductByID} from '../asyncMock.js' 4 | import ItemDetail from "./ItemDetail.jsx" 5 | function ItemDetailContainer() { 6 | const [product, setProduct] = useState({}) 7 | const {productId} = useParams(); 8 | 9 | useEffect(()=>{ 10 | getProductByID(productId) 11 | .then((res) =>{ 12 | //console.log(res); 13 | setProduct(res) 14 | }) 15 | }, [productId]) 16 | 17 | console.log(productId) 18 | return ( 19 | <> 20 | 21 | 22 | ); 23 | } 24 | 25 | export default ItemDetailContainer 26 | -------------------------------------------------------------------------------- /clase06/repaso/src/components/CartWidget/CartWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function CartWidget() { 4 | return ( 5 | 6 | 14 | 15 | 16 | {5} 17 | 18 | ); 19 | } 20 | 21 | export default CartWidget 22 | -------------------------------------------------------------------------------- /clase04/ecomerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Ecomerce 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/CartWidget/CartWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function CartWidget() { 4 | return ( 5 | 6 | 14 | 15 | 16 | {5} 17 | 18 | ); 19 | } 20 | 21 | export default CartWidget 22 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/CartWidget/CartWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function CartWidget() { 4 | return ( 5 | 6 | 14 | 15 | 16 | {5} 17 | 18 | ); 19 | } 20 | 21 | export default CartWidget 22 | -------------------------------------------------------------------------------- /clase01/App.js: -------------------------------------------------------------------------------- 1 | //alert("desde main") 2 | //let root = document.querySelector('#root'); 3 | 4 | //root.innerHTML = `

titulo javascript

` 5 | 6 | /* 7 | let h2 = document.createElement('h2'); 8 | h2.innerHTML = 'Hola mundo'; 9 | root.appendChild(h2); 10 | */ 11 | 12 | /* 13 | function App() { 14 | return React.createElement('h2', {}, 'Hola mundo'); 15 | } 16 | */ 17 | 18 | /* 19 | const App = function(){ 20 | return React.createElement("h2", {}, "Hola mundo"); 21 | } 22 | */ 23 | 24 | const App = () => { 25 | return React.createElement("h2", {}, "Hola mundo"); 26 | } 27 | 28 | const container = document.getElementById('root'); 29 | const root = ReactDOM.createRoot(container); 30 | root.render(React.createElement(App)) 31 | -------------------------------------------------------------------------------- /clase08/ecomerce/src/hooks/useProductoFilter.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react" 2 | 3 | function useProductFilter(initialProducts) { 4 | const [products, setProducts] = useState(initialProducts) 5 | const [filter, setFilter] = useState('') 6 | 7 | useEffect(() => { 8 | if(filter) { 9 | setProducts(initialProducts.filter((product)=> 10 | product.name.toLowerCase().includes(filter.toLowerCase()) 11 | )); 12 | }else { 13 | setProducts(initialProducts) 14 | } 15 | 16 | }, [filter, initialProducts]) 17 | return { 18 | filter, 19 | setFilter, 20 | products 21 | } 22 | } 23 | 24 | export default useProductFilter; 25 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | 3 | function ItemCount({initialValue=1, stock, onAdd}) { 4 | const [count, setCount] = useState(initialValue) 5 | const decrement = () => { 6 | if(count>1){ 7 | setCount(count - 1) 8 | } 9 | } 10 | const increment = () => { 11 | if(count < stock){ 12 | setCount(count + 1); 13 | } 14 | }; 15 | 16 | return ( 17 | <> 18 |

{count}

19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default ItemCount 27 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/components/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | 3 | function ItemCount({initialValue=1, stock, onAdd}) { 4 | const [count, setCount] = useState(initialValue) 5 | const decrement = () => { 6 | if(count>1){ 7 | setCount(count - 1) 8 | } 9 | } 10 | const increment = () => { 11 | if(count < stock){ 12 | setCount(count + 1); 13 | } 14 | }; 15 | 16 | return ( 17 | <> 18 |

{count}

19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default ItemCount 27 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/components/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function CardWidget({ cartCount }) { 4 | return ( 5 | 6 | 14 | 15 | 16 | {cartCount} 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget; 22 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function CardWidget({ cartCount }) { 4 | return ( 5 | 6 | 14 | 15 | 16 | {cartCount} 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget; 22 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/pages/Ejemplo.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react" 2 | 3 | function Ejemplo() { 4 | const buttonRef = useRef() 5 | 6 | useEffect(() => { 7 | const boton = buttonRef.current 8 | const handleClick = (e) => console.log(e) 9 | boton.addEventListener('click', handleClick) 10 | 11 | return () => { 12 | boton.removeEventListener('click', handleClick) 13 | } 14 | }, []) 15 | 16 | const manejoClick = (e) => { 17 | console.log(e) 18 | } 19 | 20 | return ( 21 |
22 | 23 | 24 |
25 | ); 26 | } 27 | 28 | export default Ejemplo 29 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/components/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function CardWidget({ cartCount }) { 4 | return ( 5 | 6 | 14 | 15 | 16 | {cartCount} 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget; 22 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/pages/Ejemplo.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react" 2 | 3 | function Ejemplo() { 4 | const buttonRef = useRef() 5 | 6 | useEffect(() => { 7 | const boton = buttonRef.current 8 | const handleClick = (e) => console.log(e) 9 | boton.addEventListener('click', handleClick) 10 | 11 | return () => { 12 | boton.removeEventListener('click', handleClick) 13 | } 14 | }, []) 15 | 16 | const manejoClick = (e) => { 17 | console.log(e) 18 | } 19 | 20 | return ( 21 |
22 | 23 | 24 |
25 | ); 26 | } 27 | 28 | export default Ejemplo 29 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/ItemCount/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | 3 | function ItemCount({initialValue=1, stock, onAdd}) { 4 | const [count, setCount] = useState(initialValue) 5 | const decrement = () => { 6 | if(count>1){ 7 | setCount(count - 1) 8 | } 9 | } 10 | const increment = () => { 11 | if(count < stock){ 12 | setCount(count + 1); 13 | } 14 | }; 15 | 16 | return ( 17 | <> 18 |

{count}

19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default ItemCount 27 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/ItemCount/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | 3 | function ItemCount({initialValue=1, stock, onAdd}) { 4 | const [count, setCount] = useState(initialValue) 5 | const decrement = () => { 6 | if(count>1){ 7 | setCount(count - 1) 8 | } 9 | } 10 | const increment = () => { 11 | if(count < stock){ 12 | setCount(count + 1); 13 | } 14 | }; 15 | 16 | return ( 17 | <> 18 |

{count}

19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default ItemCount 27 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/ItemCount/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | 3 | function ItemCount({initialValue=1, stock, onAdd}) { 4 | const [count, setCount] = useState(initialValue) 5 | const decrement = () => { 6 | if(count>1){ 7 | setCount(count - 1) 8 | } 9 | } 10 | const increment = () => { 11 | if(count < stock){ 12 | setCount(count + 1); 13 | } 14 | }; 15 | 16 | return ( 17 | <> 18 |

{count}

19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default ItemCount 27 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/ItemCount/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | 3 | function ItemCount({initialValue=1, stock, onAdd}) { 4 | const [count, setCount] = useState(initialValue) 5 | const decrement = () => { 6 | if(count>1){ 7 | setCount(count - 1) 8 | } 9 | } 10 | const increment = () => { 11 | if(count < stock){ 12 | setCount(count + 1); 13 | } 14 | }; 15 | 16 | return ( 17 | <> 18 |

{count}

19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default ItemCount 27 | -------------------------------------------------------------------------------- /clase02/template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "format": "prettier --write \"src/**/*.{js,jsx}\"", 10 | "lint": "eslint \"src/**/*.{js,jsx}\" --quiet" 11 | }, 12 | "keywords": [], 13 | "author": "Adrian L Gonzalez", 14 | "license": "MIT", 15 | "description": "", 16 | "devDependencies": { 17 | "@vitejs/plugin-react": "^2.1.0", 18 | "eslint": "^8.24.0", 19 | "eslint-config-prettier": "^8.5.0", 20 | "prettier": "^2.7.1", 21 | "vite": "^3.1.4" 22 | }, 23 | "dependencies": { 24 | "react": "^18.2.0", 25 | "react-dom": "^18.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/hooks/useAsync.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useState } from "react" 3 | 4 | export const useAsync = (asyncFunction, dependecies = []) => { 5 | const [data, setData] = useState(null); 6 | const [loading, setLoading] = useState(true); 7 | const [error, setError] = useState(null) 8 | 9 | useEffect(() => { 10 | setLoading(true) 11 | asyncFunction() 12 | .then((data)=>{ 13 | setData(data) 14 | }) 15 | .catch((error)=>{ 16 | setError(error) 17 | }) 18 | .finally(()=>{ 19 | setLoading(false) 20 | }) 21 | }, dependecies) 22 | 23 | return { 24 | data, 25 | loading, 26 | error 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/hooks/useAsync.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useState } from "react" 3 | 4 | export const useAsync = (asyncFunction, dependecies = []) => { 5 | const [data, setData] = useState(null); 6 | const [loading, setLoading] = useState(true); 7 | const [error, setError] = useState(null) 8 | 9 | useEffect(() => { 10 | setLoading(true) 11 | asyncFunction() 12 | .then((data)=>{ 13 | setData(data) 14 | }) 15 | .catch((error)=>{ 16 | setError(error) 17 | }) 18 | .finally(()=>{ 19 | setLoading(false) 20 | }) 21 | }, dependecies) 22 | 23 | return { 24 | data, 25 | loading, 26 | error 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/CardWidget/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './CardWidget.css'; 3 | function CardWidget({ cartCount }) { 4 | return ( 5 | 6 | 14 | 15 | 16 | {cartCount} 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget; 22 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/CardWidget/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './CardWidget.css'; 3 | function CardWidget({ cartCount }) { 4 | return ( 5 | 6 | 14 | 15 | 16 | {cartCount} 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget; 22 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/components/CardWidget/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './CardWidget.css'; 3 | function CardWidget({ cartCount }) { 4 | return ( 5 | 6 | 14 | 15 | 16 | {cartCount} 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget; 22 | -------------------------------------------------------------------------------- /clase02/HolaMundo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "holamundo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /clase02/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /clase04/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/src/components/CartWidget/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | //import logo from "../../assets/vite.svg" 2 | 3 | const CardWidget = () => { 4 | return ( 5 | 6 | 5 7 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default CardWidget 22 | -------------------------------------------------------------------------------- /clase02/FirstProject/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "firstproject", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/components/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import {getProducts, getProductsByCategory} from '../asyncMock.js' 3 | import ItemList from "./ItemList.jsx" 4 | import { useParams } from "react-router-dom" 5 | 6 | function ItemListContainer({greetings}) { 7 | const [products, setProducts] = useState([]) 8 | const {categoryId} = useParams() 9 | 10 | useEffect(()=>{ 11 | const asyncFunctions = categoryId ? getProductsByCategory : getProducts 12 | asyncFunctions(categoryId) 13 | .then(data => setProducts(data)) 14 | }, [categoryId]) 15 | return ( 16 | <> 17 |

{greetings}

18 | 19 | 20 | ) 21 | } 22 | 23 | export default ItemListContainer 24 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import {getProducts, getProductsByCategory} from '../asyncMock.js' 3 | import ItemList from "./ItemList.jsx" 4 | import { useParams } from "react-router-dom" 5 | 6 | function ItemListContainer({greetings}) { 7 | const [products, setProducts] = useState([]) 8 | const {categoryId} = useParams() 9 | 10 | useEffect(()=>{ 11 | const asyncFunctions = categoryId ? getProductsByCategory : getProducts 12 | asyncFunctions(categoryId) 13 | .then(data => setProducts(data)) 14 | }, [categoryId]) 15 | return ( 16 | <> 17 |

{greetings}

18 | 19 | 20 | ) 21 | } 22 | 23 | export default ItemListContainer 24 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/components/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import {getProducts, getProductsByCategory} from '../asyncMock.js' 3 | import ItemList from "./ItemList.jsx" 4 | import { useParams } from "react-router-dom" 5 | 6 | function ItemListContainer({greetings}) { 7 | const [products, setProducts] = useState([]) 8 | const {categoryId} = useParams() 9 | 10 | useEffect(()=>{ 11 | const asyncFunctions = categoryId ? getProductsByCategory : getProducts 12 | asyncFunctions(categoryId) 13 | .then(data => setProducts(data)) 14 | }, [categoryId]) 15 | return ( 16 | <> 17 |

{greetings}

18 | 19 | 20 | ) 21 | } 22 | 23 | export default ItemListContainer 24 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react" 2 | import { useParams } from "react-router-dom" 3 | import {getProductByID} from '../../asyncMock.js' 4 | 5 | import ItemDetail from "../ItemDetail/ItemDetail" 6 | 7 | import './ItemDetailContainer.css' 8 | 9 | function ItemDetailContainer() { 10 | const [product, setProduct] = useState({}) 11 | const {productId} = useParams(); 12 | 13 | useEffect(()=>{ 14 | getProductByID(productId) 15 | .then((res) =>{ 16 | //console.log(res); 17 | setProduct(res) 18 | }) 19 | }, [productId]) 20 | 21 | console.log(productId) 22 | return ( 23 | <> 24 | 25 | 26 | ); 27 | } 28 | 29 | export default ItemDetailContainer 30 | -------------------------------------------------------------------------------- /clase06/repaso/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase02/HolaMundo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase02/ecomerce/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase03/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite", 8 | "dev": "vite", 9 | "build": "vite build", 10 | "lint": "eslint .", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.11.1", 19 | "@types/react": "^18.3.10", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^9.11.1", 23 | "eslint-plugin-react": "^7.37.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clase05/ecomerce/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase06/repaso/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "sass": "^1.80.3" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.11.1", 19 | "@types/react": "^18.3.10", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^9.11.1", 23 | "eslint-plugin-react": "^7.37.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase02/FirstProject/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /clase05/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "sass": "^1.80.3" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.11.1", 19 | "@types/react": "^18.3.10", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^9.11.1", 23 | "eslint-plugin-react": "^7.37.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clase06/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "sass": "^1.80.3" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.11.1", 19 | "@types/react": "^18.3.10", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^9.11.1", 23 | "eslint-plugin-react": "^7.37.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clase07/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "sass": "^1.80.3" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.11.1", 19 | "@types/react": "^18.3.10", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^9.11.1", 23 | "eslint-plugin-react": "^7.37.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clase08/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "sass": "^1.80.3" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.11.1", 19 | "@types/react": "^18.3.10", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^9.11.1", 23 | "eslint-plugin-react": "^7.37.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/services/firebase/index.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getFirestore } from "firebase/firestore"; 4 | // TODO: Add SDKs for Firebase products that you want to use 5 | // https://firebase.google.com/docs/web/setup#available-libraries 6 | 7 | // Your web app's Firebase configuration 8 | const firebaseConfig = { 9 | apiKey: "AIzaSyDQq7LssQbVuoo361V3rjvOWGzbGnj8s3I", 10 | authDomain: "comision-63375.firebaseapp.com", 11 | projectId: "comision-63375", 12 | storageBucket: "comision-63375.firebasestorage.app", 13 | messagingSenderId: "951844431022", 14 | appId: "1:951844431022:web:639fcd6a29ac01a846793f", 15 | }; 16 | 17 | // Initialize Firebase 18 | const app = initializeApp(firebaseConfig); 19 | export const db = getFirestore(app); 20 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/services/firebase/index.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getFirestore } from "firebase/firestore"; 4 | // TODO: Add SDKs for Firebase products that you want to use 5 | // https://firebase.google.com/docs/web/setup#available-libraries 6 | 7 | // Your web app's Firebase configuration 8 | const firebaseConfig = { 9 | apiKey: "AIzaSyDQq7LssQbVuoo361V3rjvOWGzbGnj8s3I", 10 | authDomain: "comision-63375.firebaseapp.com", 11 | projectId: "comision-63375", 12 | storageBucket: "comision-63375.firebasestorage.app", 13 | messagingSenderId: "951844431022", 14 | appId: "1:951844431022:web:639fcd6a29ac01a846793f", 15 | }; 16 | 17 | // Initialize Firebase 18 | const app = initializeApp(firebaseConfig); 19 | export const db = getFirestore(app); 20 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/src/services/firebase/index.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getFirestore } from "firebase/firestore"; 4 | // TODO: Add SDKs for Firebase products that you want to use 5 | // https://firebase.google.com/docs/web/setup#available-libraries 6 | 7 | // Your web app's Firebase configuration 8 | const firebaseConfig = { 9 | apiKey: "AIzaSyDQq7LssQbVuoo361V3rjvOWGzbGnj8s3I", 10 | authDomain: "comision-63375.firebaseapp.com", 11 | projectId: "comision-63375", 12 | storageBucket: "comision-63375.firebasestorage.app", 13 | messagingSenderId: "951844431022", 14 | appId: "1:951844431022:web:639fcd6a29ac01a846793f", 15 | }; 16 | 17 | // Initialize Firebase 18 | const app = initializeApp(firebaseConfig); 19 | export const db = getFirestore(app); 20 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/services/firebase/index.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getFirestore } from "firebase/firestore"; 4 | // TODO: Add SDKs for Firebase products that you want to use 5 | // https://firebase.google.com/docs/web/setup#available-libraries 6 | 7 | // Your web app's Firebase configuration 8 | const firebaseConfig = { 9 | apiKey: import.meta.env.VITE_APIKEY, 10 | authDomain: import.meta.env.VITE_AUTHDOMAIN, 11 | projectId: import.meta.env.VITE_PROJECTID, 12 | storageBucket: import.meta.env.VITE_STORAGEBUCKET, 13 | messagingSenderId: import.meta.env.VITE_MESSAGINGSENDERID, 14 | appId: import.meta.env.VITE_APPID, 15 | }; 16 | 17 | // Initialize Firebase 18 | const app = initializeApp(firebaseConfig); 19 | export const db = getFirestore(app); 20 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import CartItem from "../CartItem/CartItem"; 3 | import { useCart } from "../../hooks/useCart" 4 | export default function Cart() { 5 | const {cart, clearCart, getTotal, totalQuantity} = useCart(); 6 | 7 | const total = getTotal(); 8 | 9 | if(totalQuantity === 0){ 10 | return

No hay items en el carrito

11 | } 12 | 13 | 14 | 15 | return ( 16 |
17 |

Carrito

18 | {cart.map((item)=> ( 19 | 20 | ))} 21 |

Total: ${total}

22 |
23 | 24 |
25 | Checkout 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import CartItem from "../CartItem/CartItem"; 3 | import { useCart } from "../../hooks/useCart" 4 | export default function Cart() { 5 | const {cart, clearCart, getTotal, totalQuantity} = useCart(); 6 | 7 | const total = getTotal(); 8 | 9 | if(totalQuantity === 0){ 10 | return

No hay items en el carrito

11 | } 12 | 13 | 14 | 15 | return ( 16 |
17 |

Carrito

18 | {cart.map((item)=> ( 19 | 20 | ))} 21 |

Total: ${total}

22 |
23 | 24 |
25 | Checkout 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /clase09/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.27.0", 16 | "sass": "^1.80.3" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.11.1", 20 | "@types/react": "^18.3.10", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react-swc": "^3.5.0", 23 | "eslint": "^9.11.1", 24 | "eslint-plugin-react": "^7.37.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.12", 27 | "globals": "^15.9.0", 28 | "vite": "^5.4.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /clase10/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.27.0", 16 | "sass": "^1.80.3" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.11.1", 20 | "@types/react": "^18.3.10", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react-swc": "^3.5.0", 23 | "eslint": "^9.11.1", 24 | "eslint-plugin-react": "^7.37.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.12", 27 | "globals": "^15.9.0", 28 | "vite": "^5.4.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /clase11/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.27.0", 16 | "sass": "^1.80.3" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.11.1", 20 | "@types/react": "^18.3.10", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react-swc": "^3.5.0", 23 | "eslint": "^9.11.1", 24 | "eslint-plugin-react": "^7.37.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.12", 27 | "globals": "^15.9.0", 28 | "vite": "^5.4.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/CardWidget/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './CardWidget.css'; 3 | import { useCart } from "../../hooks/useCart"; 4 | function CardWidget() { 5 | const {totalQuantity} = useCart(); 6 | return ( 7 | 8 | 16 | 17 | 18 | {totalQuantity} 19 | 20 | ); 21 | } 22 | 23 | export default CardWidget; 24 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/services/firebase/index.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getFirestore } from "firebase/firestore"; 4 | // TODO: Add SDKs for Firebase products that you want to use 5 | // https://firebase.google.com/docs/web/setup#available-libraries 6 | 7 | // Your web app's Firebase configuration 8 | const firebaseConfig = { 9 | apiKey: import.meta.env.VITE_APIKEY, 10 | authDomain: import.meta.env.VITE_AUTHDOMAIN, 11 | projectId: import.meta.env.VITE_PROJECTID, 12 | storageBucket: import.meta.env.VITE_STORAGEBUCKET, 13 | messagingSenderId: import.meta.env.VITE_MESSAGINGSENDERID, 14 | appId: import.meta.env.VITE_APPID, 15 | }; 16 | 17 | 18 | 19 | 20 | 21 | // Initialize Firebase 22 | const app = initializeApp(firebaseConfig); 23 | export const db = getFirestore(app); 24 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/hooks/useMercadoLibre.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const useMercadoLibreSearch = () => { 4 | const [results, setResults] = useState([]); 5 | const [loading, setLoading] = useState(false); 6 | 7 | const searchProducts = async (query) => { 8 | setLoading(true); 9 | try { 10 | const res = await fetch(`https://api.mercadolibre.com/sites/MLA/search?q=${query}`) // pido a mercado libre 11 | const data = await res.json(); 12 | setResults(data.results); 13 | console.log("hay milanesa") 14 | 15 | }catch (error) { 16 | console.error("No hay milanesa", error) 17 | } finally { 18 | setLoading(false); 19 | } 20 | } 21 | 22 | return {results, loading, searchProducts}; 23 | } 24 | 25 | export default useMercadoLibreSearch; 26 | -------------------------------------------------------------------------------- /clase12/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^11.0.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-router-dom": "^6.27.0", 17 | "sass": "^1.80.3" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.11.1", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react-swc": "^3.5.0", 24 | "eslint": "^9.11.1", 25 | "eslint-plugin-react": "^7.37.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.12", 28 | "globals": "^15.9.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /clase13/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^11.0.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-router-dom": "^6.27.0", 17 | "sass": "^1.80.3" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.11.1", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react-swc": "^3.5.0", 24 | "eslint": "^9.11.1", 25 | "eslint-plugin-react": "^7.37.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.12", 28 | "globals": "^15.9.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /clase14/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^11.0.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-router-dom": "^6.27.0", 17 | "sass": "^1.80.3" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.11.1", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react-swc": "^3.5.0", 24 | "eslint": "^9.11.1", 25 | "eslint-plugin-react": "^7.37.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.12", 28 | "globals": "^15.9.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /clase15/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^11.0.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-router-dom": "^6.27.0", 17 | "sass": "^1.80.3" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.11.1", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react-swc": "^3.5.0", 24 | "eslint": "^9.11.1", 25 | "eslint-plugin-react": "^7.37.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.12", 28 | "globals": "^15.9.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "autoprefixer": "^10.4.20", 22 | "eslint": "^9.13.0", 23 | "eslint-plugin-react": "^7.37.2", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.14", 26 | "globals": "^15.11.0", 27 | "postcss": "^8.4.47", 28 | "tailwindcss": "^3.4.14", 29 | "vite": "^5.4.10" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecomerce", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^11.0.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-router-dom": "^6.27.0", 17 | "sass": "^1.80.3" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.11.1", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react-swc": "^3.5.0", 24 | "eslint": "^9.11.1", 25 | "eslint-plugin-react": "^7.37.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.12", 28 | "globals": "^15.9.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | 2 | function Item({product}) { 3 | return ( 4 |
5 | {product.title} 10 |
11 |

{product.title}

12 |

Precio: ${product.price}

13 | 19 | Producto 20 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default Item 27 | -------------------------------------------------------------------------------- /clase07/ecomerce/src/components/ItemListContainer/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useState, useEffect } from "react" 2 | //import { getProducts } from "../../asyncMock" 3 | import ItemList from "../ItemList/ItemList" 4 | 5 | function ItemListContainer(props) { 6 | const [productos, setProductos] = useState([]) 7 | //const productos = []; 8 | 9 | useEffect(() => { 10 | fetch('https://api.mercadolibre.com/sites/MLA/search?q=celular') 11 | .then((data)=>{ 12 | console.log(data) 13 | return data.json() 14 | }) 15 | .then((datos)=>{ 16 | setProductos(datos.results) 17 | console.log(datos) 18 | }) 19 | .catch((error)=>{ 20 | console.log(error) 21 | }) 22 | },[]) 23 | 24 | 25 | 26 | return ( 27 | <> 28 |

{props.greeting}

29 | 30 | 31 | ); 32 | } 33 | 34 | export default ItemListContainer 35 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import CartItem from "../CartItem/CartItem"; 3 | import { useCart } from "../../hooks/useCart" 4 | import useCounter from "../../hooks/useCounter"; 5 | export default function Cart() { 6 | 7 | const {cart, clearCart, getTotal, totalQuantity} = useCart(); 8 | 9 | const total = getTotal(); 10 | 11 | if(totalQuantity === 0){ 12 | return

No hay items en el carrito

13 | } 14 | 15 | 16 | 17 | return ( 18 |
19 |

Carrito

20 | {cart.map((item)=> ( 21 | 22 | ))} 23 |

Total: ${total}

24 |
25 | 26 |
27 | Checkout 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/ItemCount/ItemCount.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react" 2 | import useCounter from "../../hooks/useCounter"; 3 | 4 | function ItemCount({initialValue=1, stock, onAdd}) { 5 | const {increment, decrement, valor: count} = useCounter(initialValue) 6 | //const [count, setCount] = useState(initialValue) 7 | //const [count, setCount] = useState(initialValue) 8 | /* const decrement = () => { 9 | if(count>1){ 10 | setCount(count - 1) 11 | } 12 | } */ 13 | /* const increment = () => { 14 | if(count < stock){ 15 | setCount(count + 1); 16 | } 17 | }; */ 18 | 19 | return ( 20 | <> 21 |

{count}

22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | 29 | export default ItemCount 30 | -------------------------------------------------------------------------------- /clase06/ecomerce/src/components/ItemListContainer/ItemListContainer.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react" 2 | import { getProducts } from "../../asyncMock" 3 | import ItemList from "../ItemList/ItemList" 4 | 5 | function ItemListContainer(props) { 6 | const [productos, setProductos] = useState([]) 7 | //const productos = []; 8 | 9 | useEffect(() => { 10 | //voy a buscar los productos 11 | // guardo dentro del array de productos 12 | // lo guardo en el estado que se llama productos 13 | // setProductos(productos) 14 | // emular la busqueda de datos fuera de la app 15 | 16 | getProducts() 17 | .then((res) => { 18 | console.log(res) 19 | setProductos(res) 20 | }) 21 | .catch((err) => { 22 | console.log(err) 23 | }) 24 | },[productos]) 25 | 26 | return ( 27 | <> 28 |

{props.greeting}

29 | 30 | 31 | ); 32 | } 33 | 34 | export default ItemListContainer 35 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/CartItem/CartItem.jsx: -------------------------------------------------------------------------------- 1 | import {useCart} from '../../hooks/useCart' 2 | import './CartItem.css' 3 | export default function CartItem({id, name, quantity, price}) { 4 | const {removeItem} = useCart() 5 | 6 | const handleRemove = (id) => { 7 | removeItem(id) 8 | } 9 | 10 | return ( 11 |
12 |
13 |

{name}

14 |
15 |
16 |

Cantidad: {quantity}

17 |

Precio x unidad: $ {price}

18 |
19 |
20 |

Subtotal: $ {price * quantity}

21 | 24 |
25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/AppUseContextHook.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | 3 | const NumberContext = createContext(); 4 | 5 | function useNumber(){ 6 | return useContext(NumberContext); 7 | } 8 | 9 | export default function AppUseContextHook() { 10 | const number = 4200; 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | function ComponentA() { 19 | 20 | return ( 21 | <> 22 |

Componente A

23 | 24 | 25 | ) 26 | } 27 | 28 | function ComponentB() { 29 | 30 | return ( 31 | <> 32 |

Componente B

33 | 34 | 35 | ) 36 | } 37 | 38 | function ComponentC() { 39 | const number = useNumber(); 40 | return ( 41 | <> 42 |

Componente C

43 |

El numero es {number}

44 | 45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /clase09/ecomerce/src/App copy.jsx: -------------------------------------------------------------------------------- 1 | //import NavBar from "./components/NavBar"; 2 | import { useState } from "react"; 3 | 4 | function App() { 5 | const [view, setView] = useState("list"); 6 | return ( 7 | <> 8 | {/* */} 9 | 10 | 11 | 12 | 13 | {view === "list" && ( 14 |
15 |

Listado de productos

16 |

lorem ipsum dolor sit

17 |
18 | )} 19 | 20 | {view === "detail" && ( 21 |
22 |

Detalle de productos

23 |

lorem ipsum dolor sit

24 |
25 | )} 26 | 27 | {view === "cart" && ( 28 |
29 |

Carrito de compras

30 |

lorem ipsum dolor sit

31 |
32 | )} 33 | 34 | 35 | ); 36 | } 37 | 38 | export default App 39 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/App copy.jsx: -------------------------------------------------------------------------------- 1 | //import NavBar from "./components/NavBar"; 2 | import { useState } from "react"; 3 | 4 | function App() { 5 | const [view, setView] = useState("list"); 6 | return ( 7 | <> 8 | {/* */} 9 | 10 | 11 | 12 | 13 | {view === "list" && ( 14 |
15 |

Listado de productos

16 |

lorem ipsum dolor sit

17 |
18 | )} 19 | 20 | {view === "detail" && ( 21 |
22 |

Detalle de productos

23 |

lorem ipsum dolor sit

24 |
25 | )} 26 | 27 | {view === "cart" && ( 28 |
29 |

Carrito de compras

30 |

lorem ipsum dolor sit

31 |
32 | )} 33 | 34 | 35 | ); 36 | } 37 | 38 | export default App 39 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/CardWidget/CardWidget.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './CardWidget.css'; 3 | import { useCart } from "../../hooks/useCart"; 4 | //import { useContext} from 'react'; 5 | //import { CartContext } from '../../context/CartContext'; 6 | 7 | function CardWidget() { 8 | 9 | const {totalQuantity} = useCart(); 10 | //const {totalQuantity} = useContext(CartContext); 11 | return ( 12 | 13 | 21 | 22 | 23 | {totalQuantity} 24 | 25 | ); 26 | } 27 | 28 | export default CardWidget; 29 | -------------------------------------------------------------------------------- /clase02/FirstProject/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 | 19 |

Vite + React

20 |
21 | 24 |

25 | Edit src/App.jsx and save to test HMR 26 |

27 |
28 |

29 | Click on the Vite and React logos to learn more 30 |

31 | 32 | ) 33 | } 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /clase02/HolaMundo/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 | 19 |

Vite + React

20 |
21 | 24 |

25 | Edit src/App.jsx and save to test HMR 26 |

27 |
28 |

29 | Click on the Vite and React logos to learn more 30 |

31 | 32 | ) 33 | } 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /clase02/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 | 19 |

Vite + React

20 |
21 | 24 |

25 | Edit src/App.jsx and save to test HMR 26 |

27 |
28 |

29 | Click on the Vite and React logos to learn more 30 |

31 | 32 | ) 33 | } 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /clase11/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import NavBar from "./components/NavBar"; 2 | import {BrowserRouter, Routes, Route} from 'react-router-dom' 3 | import ItemListContainer from "./components/ItemListContainer"; 4 | import ItemDetailContainer from "./components/ItemDetailContainer"; 5 | import { CartProvider } from "./context/CartContext"; 6 | //import Ejemplo from "./pages/Ejemplo"; 7 | function App() { 8 | 9 | return ( 10 | 11 | 12 | 13 | 14 | } 18 | /> 19 | } 23 | /> 24 | } 28 | /> 29 | 30 | 31 | 32 | ); 33 | } 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /clase13/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react" 2 | import { useParams } from "react-router-dom" 3 | 4 | import './ItemDetailContainer.css' 5 | 6 | 7 | import ItemDetail from "../ItemDetail/ItemDetail" 8 | import { doc, getDoc } from "firebase/firestore" 9 | import { db } from "../../services/firebase" 10 | 11 | function ItemDetailContainer() { 12 | const [product, setProduct] = useState({}) 13 | const [loader, setLoader] = useState(false) 14 | const { productId } = useParams(); 15 | 16 | useEffect(()=>{ 17 | setLoader(true); 18 | getDoc(doc(db, 'products', productId)) 19 | .then((querySnapshot) => { 20 | const prod = {id: querySnapshot.id, ...querySnapshot.data()} 21 | setProduct(prod) 22 | }) 23 | .catch((err)=> { 24 | console.log(err) 25 | }) 26 | .finally(()=>{ 27 | setLoader(false) 28 | }) 29 | }, [productId]) 30 | 31 | return ( 32 | <> 33 | {loader 34 | ?

Loading...

35 | : 36 | } 37 | 38 | ); 39 | } 40 | 41 | export default ItemDetailContainer 42 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react" 2 | import { useParams } from "react-router-dom" 3 | 4 | import './ItemDetailContainer.css' 5 | 6 | 7 | import ItemDetail from "../ItemDetail/ItemDetail" 8 | import { doc, getDoc } from "firebase/firestore" 9 | import { db } from "../../services/firebase" 10 | 11 | function ItemDetailContainer() { 12 | const [product, setProduct] = useState({}) 13 | const [loader, setLoader] = useState(false) 14 | const { productId } = useParams(); 15 | 16 | useEffect(()=>{ 17 | setLoader(true); 18 | getDoc(doc(db, 'products', productId)) 19 | .then((querySnapshot) => { 20 | const prod = {id: querySnapshot.id, ...querySnapshot.data()} 21 | setProduct(prod) 22 | }) 23 | .catch((err)=> { 24 | console.log(err) 25 | }) 26 | .finally(()=>{ 27 | setLoader(false) 28 | }) 29 | }, [productId]) 30 | 31 | return ( 32 | <> 33 | {loader 34 | ?

Loading...

35 | : 36 | } 37 | 38 | ); 39 | } 40 | 41 | export default ItemDetailContainer 42 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/ItemDetailContainer/ItemDetailContainer.jsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react" 2 | import { useParams } from "react-router-dom" 3 | 4 | import './ItemDetailContainer.css' 5 | 6 | 7 | import ItemDetail from "../ItemDetail/ItemDetail" 8 | import { doc, getDoc } from "firebase/firestore" 9 | import { db } from "../../services/firebase" 10 | 11 | function ItemDetailContainer() { 12 | const [product, setProduct] = useState({}) 13 | const [loader, setLoader] = useState(false) 14 | const { productId } = useParams(); 15 | 16 | useEffect(()=>{ 17 | setLoader(true); 18 | getDoc(doc(db, 'products', productId)) 19 | .then((querySnapshot) => { 20 | const prod = {id: querySnapshot.id, ...querySnapshot.data()} 21 | setProduct(prod) 22 | }) 23 | .catch((err)=> { 24 | console.log(err) 25 | }) 26 | .finally(()=>{ 27 | setLoader(false) 28 | }) 29 | }, [productId]) 30 | 31 | return ( 32 | <> 33 | {loader 34 | ?

Loading...

35 | : 36 | } 37 | 38 | ); 39 | } 40 | 41 | export default ItemDetailContainer 42 | -------------------------------------------------------------------------------- /clase02/HolaMundo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /clase02/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /clase03/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /clase04/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /affterclass01/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /clase02/FirstProject/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /clase05/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase06/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase06/repaso/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase07/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase08/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase09/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase10/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase11/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase12/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase13/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase14/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase15/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /affterclass02/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ["dist"] }, 9 | { 10 | files: ["**/*.{js,jsx}"], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: "latest", 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: "module", 18 | }, 19 | }, 20 | settings: { react: { version: "18.3" } }, 21 | plugins: { 22 | react, 23 | "react-hooks": reactHooks, 24 | "react-refresh": reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs["jsx-runtime"].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | "react/jsx-no-target-blank": "off", 32 | "react-refresh/only-export-components": [ 33 | "warn", 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ]; 40 | -------------------------------------------------------------------------------- /affterclass03/ecomerce/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | "react/prop-types": 0, 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/CartItem/CartItem.jsx: -------------------------------------------------------------------------------- 1 | import {useCart} from '../../hooks/useCart' 2 | import './CartItem.css' 3 | import useCounter from '../../hooks/useCounter'; 4 | export default function CartItem({id, name, quantity, price}) { 5 | const {removeItem} = useCart() 6 | const { increment, decrement, valor } = useCounter(quantity); 7 | 8 | const handleRemove = (id) => { 9 | removeItem(id) 10 | } 11 | 12 | return ( 13 |
14 |
15 |

{name}

16 |
17 |
18 |

Cantidad: {quantity}

19 |

Precio x unidad: $ {price}

20 |
21 |
22 |

Subtotal: $ {price * quantity}

23 | 26 | 27 | {valor} 28 | 29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /clase10/ecomerce/src/components/ItemDetail.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import ItemCount from "./ItemCount"; 4 | function ItemDetail({ name, img, description, category, price, stock }) { 5 | const [quantity, setQuantity] = useState(0) 6 | 7 | const handleAdd = (cantidad) => { 8 | setQuantity(cantidad) 9 | } 10 | 11 | return ( 12 |
13 |

{name}

14 |
15 | {name} 21 |
22 |

{description}

23 |

Categoria: {category}

24 |

Precio: $ {price}

25 |

Disponible - {stock}

26 |
27 |
28 | 29 |
30 | {quantity === 0 ? ( 31 | 32 | ) : ( 33 | Finalizar Compra 34 | )} 35 |
36 |
37 | ); 38 | } 39 | 40 | export default ItemDetail 41 | -------------------------------------------------------------------------------- /clase12/ecomerce/src/App.jsx: -------------------------------------------------------------------------------- 1 | import NavBar from "./components/NavBar/NavBar"; 2 | import {BrowserRouter, Routes, Route} from 'react-router-dom' 3 | import ItemListContainer from "./components/ItemListContainer/ItemListContainer"; 4 | import ItemDetailContainer from "./components/ItemDetailContainer/ItemDetailContainer"; 5 | import { CartProvider } from "./context/CartContext"; 6 | 7 | 8 | 9 | function App() { 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | } 20 | /> 21 | } 25 | /> 26 | } 30 | /> 31 | 32 | :( 404 Not found} /> 33 | 34 | 35 | 36 | ); 37 | } 38 | 39 | export default App 40 | -------------------------------------------------------------------------------- /clase14/ecomerce/src/components/CartItem/CartItem.css: -------------------------------------------------------------------------------- 1 | .CardCartItem { 2 | display: flex; 3 | justify-content: space-between; 4 | width: auto; 5 | padding: 20px; 6 | margin: 30px; 7 | font-size: 16px; 8 | background-color: papayawhip; 9 | border: 1px solid #e1e1e1; 10 | border-radius: 10px; 11 | } 12 | 13 | .InfoCartItem { 14 | margin-right: 50px; 15 | } 16 | 17 | .ContainerItemCartItem { 18 | display: flex; 19 | justify-content: space-between; 20 | } 21 | 22 | .ItemHeaderCartItem { 23 | display: flex; 24 | justify-content: space-between; 25 | } 26 | 27 | .InfoCartItem { 28 | font-size: 18px; 29 | display: flex; 30 | justify-content: space-between; 31 | } 32 | 33 | .ButtonCartItem { 34 | width: auto; 35 | padding: 18px; 36 | font-size: 8px; 37 | background: #8C30F5; 38 | border-radius: 8px; 39 | flex: none; 40 | display: flex; 41 | order: 1; 42 | align-self: center; 43 | flex-grow: 0; 44 | justify-content: center; 45 | align-items: center; 46 | text-decoration: none; 47 | color: #FFFFFF; 48 | border: none; 49 | border-style: none; 50 | cursor: pointer; 51 | outline: inherit; 52 | } 53 | 54 | .ItemFooterCartItem { 55 | display: flex; 56 | } 57 | -------------------------------------------------------------------------------- /clase15/ecomerce/src/components/CartItem/CartItem.css: -------------------------------------------------------------------------------- 1 | .CardCartItem { 2 | display: flex; 3 | justify-content: space-between; 4 | width: auto; 5 | padding: 20px; 6 | margin: 30px; 7 | font-size: 16px; 8 | background-color: papayawhip; 9 | border: 1px solid #e1e1e1; 10 | border-radius: 10px; 11 | } 12 | 13 | .InfoCartItem { 14 | margin-right: 50px; 15 | } 16 | 17 | .ContainerItemCartItem { 18 | display: flex; 19 | justify-content: space-between; 20 | } 21 | 22 | .ItemHeaderCartItem { 23 | display: flex; 24 | justify-content: space-between; 25 | } 26 | 27 | .InfoCartItem { 28 | font-size: 18px; 29 | display: flex; 30 | justify-content: space-between; 31 | } 32 | 33 | .ButtonCartItem { 34 | width: auto; 35 | padding: 18px; 36 | font-size: 8px; 37 | background: #8C30F5; 38 | border-radius: 8px; 39 | flex: none; 40 | display: flex; 41 | order: 1; 42 | align-self: center; 43 | flex-grow: 0; 44 | justify-content: center; 45 | align-items: center; 46 | text-decoration: none; 47 | color: #FFFFFF; 48 | border: none; 49 | border-style: none; 50 | cursor: pointer; 51 | outline: inherit; 52 | } 53 | 54 | .ItemFooterCartItem { 55 | display: flex; 56 | } 57 | --------------------------------------------------------------------------------