├── 02-react-props ├── src │ ├── index.css │ ├── assets │ │ ├── img │ │ │ ├── dos.jpg │ │ │ ├── seis.jpg │ │ │ ├── tres.jpg │ │ │ ├── uno.jpg │ │ │ ├── cinco.jpg │ │ │ ├── cuatro.jpg │ │ │ ├── header.jpg │ │ │ ├── ilustracion.svg │ │ │ └── ilustracion1.svg │ │ └── react.svg │ ├── main.jsx │ ├── components │ │ └── HeaderHero.jsx │ ├── App.jsx │ └── App.css ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── 05-poke-bootstrap ├── src │ ├── index.css │ ├── App.css │ ├── pages │ │ ├── About.jsx │ │ ├── PokemonDetail.jsx │ │ └── Home.jsx │ ├── App.jsx │ ├── main.jsx │ ├── routes │ │ └── RoutesIndex.jsx │ ├── components │ │ └── Navbar.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── 03-todo-list ├── vite.config.js ├── src │ ├── App.jsx │ ├── main.jsx │ ├── components │ │ ├── ToDoItem.jsx │ │ └── ToDoList.jsx │ ├── App.css │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── 04-giphy-app ├── vite.config.js ├── src │ ├── main.jsx │ ├── components │ │ └── GifCard.jsx │ ├── App.css │ ├── App.jsx │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── 01-vite-vanilla ├── counter.js ├── .gitignore ├── index.html ├── package.json ├── main.js ├── javascript.svg ├── public │ └── vite.svg └── style.css └── .gitignore /02-react-props/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | } -------------------------------------------------------------------------------- /02-react-props/src/assets/img/dos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/dos.jpg -------------------------------------------------------------------------------- /02-react-props/src/assets/img/seis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/seis.jpg -------------------------------------------------------------------------------- /02-react-props/src/assets/img/tres.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/tres.jpg -------------------------------------------------------------------------------- /02-react-props/src/assets/img/uno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/uno.jpg -------------------------------------------------------------------------------- /02-react-props/src/assets/img/cinco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/cinco.jpg -------------------------------------------------------------------------------- /02-react-props/src/assets/img/cuatro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/cuatro.jpg -------------------------------------------------------------------------------- /02-react-props/src/assets/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/warderer/intro-react-g28a/HEAD/02-react-props/src/assets/img/header.jpg -------------------------------------------------------------------------------- /05-poke-bootstrap/src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
About
4 | ) 5 | } 6 | export default About 7 | -------------------------------------------------------------------------------- /03-todo-list/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 | -------------------------------------------------------------------------------- /04-giphy-app/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 | -------------------------------------------------------------------------------- /02-react-props/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 | -------------------------------------------------------------------------------- /05-poke-bootstrap/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 | -------------------------------------------------------------------------------- /03-todo-list/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import ToDoList from './components/ToDoList' 3 | 4 | function App () { 5 | return ( 6 | <> 7 | 8 | 9 | ) 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /03-todo-list/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /01-vite-vanilla/counter.js: -------------------------------------------------------------------------------- 1 | export function setupCounter(element) { 2 | let counter = 0 3 | const setCounter = (count) => { 4 | counter = count 5 | element.innerHTML = `count is ${counter}` 6 | } 7 | element.addEventListener('click', () => setCounter(counter + 1)) 8 | setCounter(0) 9 | } 10 | -------------------------------------------------------------------------------- /04-giphy-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import 'bootstrap/dist/css/bootstrap.min.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /02-react-props/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /03-todo-list/src/components/ToDoItem.jsx: -------------------------------------------------------------------------------- 1 | const ToDoItem = ({ todoName, handleDelete }) => { 2 | return ( 3 |
  • 4 | {todoName} 5 | 11 |
    • 12 | ) 13 | } 14 | export default ToDoItem 15 | -------------------------------------------------------------------------------- /03-todo-list/.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 | -------------------------------------------------------------------------------- /04-giphy-app/.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 | -------------------------------------------------------------------------------- /01-vite-vanilla/.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 | -------------------------------------------------------------------------------- /02-react-props/.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 | -------------------------------------------------------------------------------- /05-poke-bootstrap/.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 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter } from 'react-router-dom' 2 | import Navbar from './components/Navbar' 3 | import RoutesIndex from './routes/RoutesIndex' 4 | import './App.css' 5 | 6 | function App () { 7 | return ( 8 | <> 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /01-vite-vanilla/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02-react-props/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03-todo-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-giphy-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /05-poke-bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | // Bootstrap CSS 5 | import 'bootstrap/dist/css/bootstrap.min.css' 6 | // Bootstrap Bundle JS 7 | import 'bootstrap/dist/js/bootstrap.bundle.min' 8 | import './index.css' 9 | 10 | ReactDOM.createRoot(document.getElementById('root')).render( 11 | 12 | 13 | 14 | ) 15 | -------------------------------------------------------------------------------- /01-vite-vanilla/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01-vite-vanilla", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "standard": "^17.1.0", 13 | "vite": "^5.0.0" 14 | }, 15 | "eslintConfig": { 16 | "extends": [ 17 | "./node_modules/standard/eslintrc.json" 18 | ] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /02-react-props/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 | -------------------------------------------------------------------------------- /03-todo-list/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 | -------------------------------------------------------------------------------- /04-giphy-app/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 | -------------------------------------------------------------------------------- /05-poke-bootstrap/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 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/routes/RoutesIndex.jsx: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from 'react-router-dom' 2 | import Home from '../pages/Home' 3 | import About from '../pages/About' 4 | import PokemonDetail from '../pages/PokemonDetail' 5 | 6 | const RoutesIndex = () => { 7 | return ( 8 | 9 | } /> 10 | } /> 11 | } /> 12 | 13 | ) 14 | } 15 | export default RoutesIndex 16 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/pages/PokemonDetail.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | import { useParams } from 'react-router-dom' 3 | 4 | const PokemonDetail = () => { 5 | const [pokemon, setPokemon] = useState(null) 6 | const { id } = useParams() 7 | 8 | useEffect(() => { 9 | fetch(`https://pokeapi.co/api/v2/pokemon/${id}`) 10 | .then(response => response.json()) 11 | .then(data => setPokemon(data)) 12 | }, [id]) 13 | 14 | return ( 15 |
    {pokemon?.name}
    16 | ) 17 | } 18 | export default PokemonDetail 19 | -------------------------------------------------------------------------------- /04-giphy-app/src/components/GifCard.jsx: -------------------------------------------------------------------------------- 1 | import Button from 'react-bootstrap/Button' 2 | import Card from 'react-bootstrap/Card' 3 | 4 | const GifCard = (props) => { 5 | const { gifTitle, imgUrl } = props 6 | return ( 7 | <> 8 | 9 | 10 | 11 | {gifTitle} 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export default GifCard 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # env files 2 | .env 3 | .env.local 4 | .env.*.local 5 | 6 | # npm 7 | node_modules 8 | package-lock.json 9 | *.gz 10 | 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Optional eslint cache 19 | .eslintcache 20 | 21 | # production 22 | build 23 | dist 24 | 25 | # OS X 26 | .DS_Store* 27 | Icon? 28 | ._* 29 | 30 | # Windows 31 | Thumbs.db 32 | ehthumbs.db 33 | Desktop.ini 34 | 35 | # Linux 36 | .directory 37 | *~ 38 | 39 | # Coveralls 40 | coverage 41 | 42 | # Benchmarking 43 | benchmarks/graphs 44 | 45 | # Local Netlify folder 46 | .netlify -------------------------------------------------------------------------------- /04-giphy-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | 'standard', 10 | 'standard-jsx' 11 | ], 12 | ignorePatterns: ['dist', '.eslintrc.cjs'], 13 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 14 | settings: { react: { version: '18.2' } }, 15 | plugins: ['react-refresh'], 16 | rules: { 17 | 'react-refresh/only-export-components': [ 18 | 'warn', 19 | { allowConstantExport: true }, 20 | ], 21 | }, 22 | } 23 | -------------------------------------------------------------------------------- /02-react-props/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | 'standard', 10 | 'standard-jsx' 11 | ], 12 | ignorePatterns: ['dist', '.eslintrc.cjs'], 13 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 14 | settings: { react: { version: '18.2' } }, 15 | plugins: ['react-refresh'], 16 | rules: { 17 | 'react-refresh/only-export-components': [ 18 | 'warn', 19 | { allowConstantExport: true }, 20 | ], 21 | 'react/prop-types': 'off', 22 | }, 23 | } 24 | -------------------------------------------------------------------------------- /03-todo-list/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | 'standard', 10 | 'standard-jsx' 11 | ], 12 | ignorePatterns: ['dist', '.eslintrc.cjs'], 13 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 14 | settings: { react: { version: '18.2' } }, 15 | plugins: ['react-refresh'], 16 | rules: { 17 | 'react-refresh/only-export-components': [ 18 | 'warn', 19 | { allowConstantExport: true }, 20 | ], 21 | 'react/prop-types': 'off', 22 | }, 23 | } 24 | -------------------------------------------------------------------------------- /05-poke-bootstrap/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | 'standard', 10 | 'standard-jsx', 11 | ], 12 | ignorePatterns: ['dist', '.eslintrc.cjs'], 13 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 14 | settings: { react: { version: '18.2' } }, 15 | plugins: ['react-refresh'], 16 | rules: { 17 | 'react-refresh/only-export-components': [ 18 | 'warn', 19 | { allowConstantExport: true }, 20 | ], 21 | 'react/prop-types': 'off', 22 | }, 23 | } 24 | -------------------------------------------------------------------------------- /04-giphy-app/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 | -------------------------------------------------------------------------------- /03-todo-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "03-todo-list", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.37", 18 | "@types/react-dom": "^18.2.15", 19 | "@vitejs/plugin-react": "^4.2.0", 20 | "eslint": "^8.53.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.4", 24 | "standard": "^17.1.0", 25 | "vite": "^5.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /02-react-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02-react-props", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.37", 18 | "@types/react-dom": "^18.2.15", 19 | "@vitejs/plugin-react": "^4.2.0", 20 | "eslint": "^8.53.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.4", 24 | "standard": "^17.1.0", 25 | "vite": "^5.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /02-react-props/src/components/HeaderHero.jsx: -------------------------------------------------------------------------------- 1 | const HeaderHero = ({ title, desc, buttonText, buttonLink }) => { 2 | return ( 3 |
    4 |
    5 |

    {title}

    6 |

    {desc}

    7 | {buttonText} 8 |
    9 |
    10 | 15 | 19 | 20 |
    21 |
    22 | ) 23 | } 24 | export default HeaderHero 25 | -------------------------------------------------------------------------------- /04-giphy-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "04-giphy-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^5.3.2", 14 | "react": "^18.2.0", 15 | "react-bootstrap": "^2.9.1", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.37", 20 | "@types/react-dom": "^18.2.15", 21 | "@vitejs/plugin-react": "^4.2.0", 22 | "eslint": "^8.53.0", 23 | "eslint-plugin-react": "^7.33.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.4", 26 | "standard": "^17.1.0", 27 | "vite": "^5.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /05-poke-bootstrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "05-poke-bootstrap", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^5.3.2", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-router-dom": "^6.20.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.37", 20 | "@types/react-dom": "^18.2.15", 21 | "@vitejs/plugin-react": "^4.2.0", 22 | "eslint": "^8.53.0", 23 | "eslint-plugin-react": "^7.33.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.4", 26 | "standard": "^17.1.0", 27 | "vite": "^5.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /01-vite-vanilla/main.js: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | import javascriptLogo from './javascript.svg' 3 | // eslint-disable-next-line import/no-absolute-path 4 | import viteLogo from '/vite.svg' 5 | import { setupCounter } from './counter.js' 6 | 7 | document.querySelector('#app').innerHTML = ` 8 |
    9 | 10 | 11 | 12 | 13 | 14 | 15 |

    Hello G28A!

    16 |
    17 | 18 |
    19 |

    20 | Estamos aprendiendo Vite, este es un cambio en mi codigo 21 |

    22 |
    23 | ` 24 | 25 | setupCounter(document.querySelector('#counter')) 26 | -------------------------------------------------------------------------------- /01-vite-vanilla/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-giphy-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import './App.css' 3 | import GifCard from './components/GifCard' 4 | 5 | function App () { 6 | const [gifs, setGifts] = useState([]) 7 | 8 | // getGifts hará una petición a la API de GIPHY y nos entregará un arreglo de gifs 9 | const getGifs = () => { 10 | // Usa tu propia api_key después del = 11 | fetch('https://api.giphy.com/v1/gifs/search?q=tacos&limit=10&api_key=AQUÍVATUAPI_KEY').then(result => result.json()) 12 | .then(res => { 13 | const { data } = res 14 | console.log('data', data) 15 | setGifts(data) 16 | }) 17 | } 18 | 19 | // La función getGifs se ejecutará antes de que el componente App sea montado 20 | useEffect(() => { 21 | getGifs() 22 | }, []) 23 | 24 | return ( 25 | <> 26 | {gifs.map(gif => ())} 27 | 28 | ) 29 | } 30 | 31 | export default App 32 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink } from 'react-router-dom' 2 | 3 | const Navbar = () => { 4 | return ( 5 | 40 | 41 | ) 42 | } 43 | export default Navbar 44 | -------------------------------------------------------------------------------- /01-vite-vanilla/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-react-props/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-todo-list/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-giphy-app/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-poke-bootstrap/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-todo-list/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 7 | line-height: 1.5; 8 | font-weight: 400; 9 | } 10 | 11 | body { 12 | background-color: #1c1c1c; 13 | color: #fff; 14 | margin: 0; 15 | display: flex; 16 | place-items: center; 17 | min-width: 320px; 18 | min-height: 100vh; 19 | } 20 | 21 | h1, h2, h3, h4, h5, h6 { 22 | color: #fff; 23 | } 24 | 25 | h1 { 26 | font-size: 3.2em; 27 | line-height: 1.1; 28 | } 29 | 30 | a { 31 | color: #fff; 32 | } 33 | 34 | button { 35 | background-color: #333; 36 | color: #fff; 37 | border: none; 38 | padding: 0.5rem 1rem; 39 | border-radius: 0.25rem; 40 | cursor: pointer; 41 | transition: background-color 0.2s ease-in-out; 42 | } 43 | 44 | button:hover { 45 | background-color: #444; 46 | } 47 | 48 | input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea { 49 | background-color: #333!important; 50 | color: #fff; 51 | border: none; 52 | padding: 0.5rem 1rem; 53 | border-radius: 0.25rem; 54 | width: 100%; 55 | box-sizing: border-box; 56 | } 57 | 58 | input[type="submit"] { 59 | background-color: #333!important; 60 | color: #fff; 61 | border: none; 62 | padding: 0.5rem 1rem; 63 | border-radius: 0.25rem; 64 | cursor: pointer; 65 | transition: background-color 0.2s ease-in-out; 66 | } 67 | 68 | input[type="submit"]:hover { 69 | background-color: #444; 70 | } 71 | 72 | ul { 73 | text-align: left; 74 | padding:0; 75 | } 76 | 77 | li { 78 | margin-bottom: 10px; 79 | display: flex; 80 | justify-content: space-between; 81 | } 82 | 83 | .delete-button { 84 | margin-left: 30px; 85 | } 86 | 87 | .add-button { 88 | margin-top: 20px; 89 | } -------------------------------------------------------------------------------- /05-poke-bootstrap/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const Home = () => { 5 | const [pokemons, setPokemons] = useState([]) 6 | const [searchTerm, setSearchTerm] = useState('') 7 | 8 | useEffect(() => { 9 | fetch('https://pokeapi.co/api/v2/pokemon?limit=30') 10 | .then(response => response.json()) 11 | .then(data => setPokemons(data.results)) 12 | }, []) 13 | 14 | const handleSearch = event => { 15 | setSearchTerm(event.target.value) 16 | } 17 | 18 | const filteredPokemons = pokemons.filter(pokemon => { 19 | return pokemon.name.toLowerCase().includes(searchTerm.toLowerCase()) 20 | }) 21 | 22 | return ( 23 | <> 24 |
    25 |

    Pokédex

    26 | 27 |
    28 | 36 |
    37 | 38 |
    39 | {filteredPokemons.map(pokemon => ( 40 |
    41 | 42 |
    43 | {pokemon.name} 44 |
    45 |

    {pokemon.name}

    46 |
    47 |
    48 | 49 |
    50 | ))} 51 |
    52 |
    53 | 54 | ) 55 | } 56 | export default Home 57 | -------------------------------------------------------------------------------- /01-vite-vanilla/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | #app { 39 | max-width: 1280px; 40 | margin: 0 auto; 41 | padding: 2rem; 42 | text-align: center; 43 | } 44 | 45 | .logo { 46 | height: 6em; 47 | padding: 1.5em; 48 | will-change: filter; 49 | transition: filter 300ms; 50 | } 51 | .logo:hover { 52 | filter: drop-shadow(0 0 2em #646cffaa); 53 | } 54 | .logo.vanilla:hover { 55 | filter: drop-shadow(0 0 2em #f7df1eaa); 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | .read-the-docs { 63 | color: #888; 64 | } 65 | 66 | button { 67 | border-radius: 8px; 68 | border: 1px solid transparent; 69 | padding: 0.6em 1.2em; 70 | font-size: 1em; 71 | font-weight: 500; 72 | font-family: inherit; 73 | background-color: #1a1a1a; 74 | cursor: pointer; 75 | transition: border-color 0.25s; 76 | } 77 | button:hover { 78 | border-color: #646cff; 79 | } 80 | button:focus, 81 | button:focus-visible { 82 | outline: 4px auto -webkit-focus-ring-color; 83 | } 84 | 85 | @media (prefers-color-scheme: light) { 86 | :root { 87 | color: #213547; 88 | background-color: #ffffff; 89 | } 90 | a:hover { 91 | color: #747bff; 92 | } 93 | button { 94 | background-color: #f9f9f9; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /03-todo-list/src/components/ToDoList.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import ToDoItem from './ToDoItem' 3 | 4 | const ToDoList = () => { 5 | // 1. Los estados de React sirven para guardar información que se va a utilizar en el componente. Esta información tiene la particularidad de que se actualiza la vista cada vez que cambia (se ejecuta nuevamente el return). 6 | const [inputValue, setInputValue] = useState('') 7 | 8 | // 4. Añadimos un estado para guardar la lista de tareas 9 | const [todos, setTodos] = useState([]) 10 | 11 | // 3b. Función que se ejecuta cuando se hace click en el botón Agregar 12 | // 5. Modificamos la función para que agregue el nuevo elemento a la lista de tareas 13 | const handleAdd = () => { 14 | // console.log('Agregue', inputValue) 15 | setTodos([...todos, inputValue]) 16 | setInputValue('') // vacio el input para volver a escribir 17 | } 18 | 19 | // 6. Función que se encarga de eliminar un elemento de la lista de tareas 20 | const deleteTodo = (index) => { 21 | // Filter: Permite filtrar un arreglo y regresar un nuevo arreglo con los elementos que cumplan la condición 22 | setTodos(todos.filter((todo, i) => i !== index)) 23 | } 24 | 25 | return ( 26 | <> 27 |

    Lista de Tareas

    28 | {/* 2. Una forma común de trabajar con un input en React, es usar el evento onChange para guardar la información en el estado apenas sea tecleado. La información del input siempre la tendra event.target.value */} 29 | setInputValue(event.target.value)} 33 | /> 34 | 35 | {/* 3a. Otra forma de trabajar con eventos es que podemos declarar la función más arriba y solo mandarla a llamar en el evento */} 36 | 37 | 38 | 50 | 51 | ) 52 | } 53 | export default ToDoList 54 | -------------------------------------------------------------------------------- /02-react-props/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-todo-list/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-giphy-app/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-poke-bootstrap/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-react-props/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import ilustracion from './assets/img/ilustracion.svg' 3 | import ilustracion1 from './assets/img/ilustracion1.svg' 4 | import uno from './assets/img/uno.jpg' 5 | import dos from './assets/img/dos.jpg' 6 | import tres from './assets/img/tres.jpg' 7 | import cuatro from './assets/img/cuatro.jpg' 8 | import cinco from './assets/img/cinco.jpg' 9 | import seis from './assets/img/seis.jpg' 10 | import HeaderHero from './components/HeaderHero' 11 | 12 | function App ({ saludo, nombre }) { 13 | return ( 14 | <> 15 | 16 | 17 | {/* */} 18 |
    19 | 20 |
    21 |

    Title of section

    22 |

    23 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt enim 24 | reiciendis molestias nam tempore. Ullam hic accusantium eligendi ipsam 25 | corrupti! 26 |

    27 | 28 | Learn more 29 | 30 |
    31 |
    32 |
    33 |
    34 |

    Juntos podemos apoyar

    35 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    36 |
    37 |
    38 |
    39 |

    Our services

    40 |
    41 |
    42 | 43 |

    Title Card

    44 |

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    45 | 46 | Learn more 47 | 48 |
    49 |
    50 | 51 |

    Title Card

    52 |

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    53 | 54 | Learn more 55 | 56 |
    57 |
    58 | 59 |

    Title Card

    60 |

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    61 | 62 | Learn more 63 | 64 |
    65 |
    66 |
    67 |
    68 |
    69 |

    Our work

    70 |
    71 | 72 | 73 | 74 | 75 | 76 | 77 |
    78 |
    79 |
    80 |
    81 |
    82 |
    83 |

    Title of section

    84 |

    85 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum 86 | reprehenderit nostrum expedita quasi odio architecto laudantium sunt 87 | nemo dicta atque? 88 |

    89 | 90 | Learn more 91 | 92 |
    93 | 94 |
    95 |
    96 | 101 | 105 | 106 |
    107 |
    108 |