├── .gitignore ├── .github ├── CODEOWNERS ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ └── main.yml └── ISSUE_TEMPLATE.md ├── 06-gestion de Interfaz de usuario └── Gestion de interfases en React │ ├── src │ ├── App.css │ ├── App.jsx │ ├── main.jsx │ ├── components │ │ ├── Libro │ │ │ ├── Libro.css │ │ │ └── Libro.jsx │ │ └── Catalogo │ │ │ └── Catalogo.jsx │ ├── index.css │ └── assets │ │ └── react.svg │ ├── vite.config.js │ ├── index.html │ ├── .gitignore │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── vite.svg ├── 01-Fundamentos de React └── componentes y propiedades │ ├── src │ ├── components │ │ └── MiBoton.jsx │ ├── App.jsx │ ├── main.jsx │ ├── App.css │ ├── index.css │ └── assets │ │ └── react.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── vite.svg ├── 02-Construccion de componentes └── componentes en React │ ├── src │ ├── components │ │ ├── MiBoton.jsx │ │ ├── ComponenteC.jsx │ │ ├── ComponenteB.jsx │ │ ├── ComponenteA.jsx │ │ ├── CicloDeVida.jsx │ │ └── ContadorClase.jsx │ ├── main.jsx │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── vite.svg ├── 07-Enrutamiento └── Manejo de rutas │ ├── src │ ├── App.css │ ├── main.jsx │ ├── components │ │ ├── Producto.jsx │ │ ├── About.jsx │ │ ├── Contents.jsx │ │ └── Home.jsx │ ├── index.css │ ├── App.jsx │ └── assets │ │ └── react.svg │ ├── vite.config.js │ ├── index.html │ ├── .gitignore │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── vite.svg ├── 04-Listas y estructuras de datos └── Listas en react │ ├── vite.config.js │ ├── src │ ├── App.jsx │ ├── main.jsx │ ├── components │ │ ├── ProductoItem.jsx │ │ └── Catalogo.jsx │ ├── App.css │ ├── index.css │ └── assets │ │ └── react.svg │ ├── index.html │ ├── .gitignore │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── vite.svg ├── 03-Gestion de eventos y formularios └── manejo de Formularios │ ├── vite.config.js │ ├── src │ ├── App.jsx │ ├── main.jsx │ ├── App.css │ ├── index.css │ ├── components │ │ └── MiFormulario.jsx │ └── assets │ │ └── react.svg │ ├── .gitignore │ ├── index.html │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── vite.svg ├── 05-gestion de estado y carga de datos └── Manejo de Estados y carga de datos │ ├── src │ ├── App.css │ ├── main.jsx │ ├── components │ │ ├── ItemCarrito.jsx │ │ ├── Producto.jsx │ │ ├── DataContext.jsx │ │ ├── ListaCarrito.jsx │ │ └── ListaProductos.jsx │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg │ ├── vite.config.js │ ├── index.html │ ├── .gitignore │ ├── .eslintrc.cjs │ ├── package.json │ └── public │ └── productos.json ├── CONTRIBUTING.md ├── NOTICE ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Codeowners for these exercise files: 2 | # * (asterisk) deotes "all files and folders" 3 | # Example: * @producer @instructor 4 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/src/components/MiBoton.jsx: -------------------------------------------------------------------------------- 1 | export default function MiBoton({texto}){ 2 | 3 | return( 4 | <> 5 | 6 | 7 | ) 8 | } -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/components/MiBoton.jsx: -------------------------------------------------------------------------------- 1 | export default function MiBoton({texto}){ 2 | 3 | return( 4 | <> 5 | 6 | 7 | ) 8 | } -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | ul.navbar-nav .nav-link.active{ 9 | color:red; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/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 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/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-Construccion de componentes/componentes en React/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-Listas y estructuras de datos/Listas en react/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-Gestion de eventos y formularios/manejo de Formularios/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-Construccion de componentes/componentes en React/src/components/ComponenteC.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ComponenteC = ({ emoji }) => { 4 | 5 | return ( 6 |
{emoji}
7 | ); 8 | }; 9 | 10 | export default ComponenteC; -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/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-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | ul.navbar-nav .nav-link.active{ 9 | color:red; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/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 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './App.css' 3 | import MiBoton from './components/MiBoton' 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 | 10 | 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css' 3 | import Catalogo from './components/Catalogo'; 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 | 10 | 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './App.css' 3 | import MiFormulario from './components/MiFormulario' 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/components/ComponenteB.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ComponenteB = ({ textoBtn, onClick }) => { 4 | 5 | return ( 6 | 7 | ); 8 | } 9 | 10 | export default ComponenteB; -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css' 3 | import Catalogo from './components/Catalogo/Catalogo'; 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 | 10 | 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/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 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/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 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/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-Gestion de eventos y formularios/manejo de Formularios/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 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/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 | import 'bootstrap/dist/css/bootstrap.css' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Copy To Branches 2 | on: 3 | workflow_dispatch: 4 | jobs: 5 | copy-to-branches: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v2 9 | with: 10 | fetch-depth: 0 11 | - name: Copy To Branches Action 12 | uses: planetoftheweb/copy-to-branches@v1.2 13 | env: 14 | key: main 15 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/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 | import 'bootstrap/dist/css/bootstrap.css' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/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 | import 'bootstrap/dist/css/bootstrap.css' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/.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-Listas y estructuras de datos/Listas en react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/.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-Fundamentos de React/componentes y propiedades/.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-Construccion de componentes/componentes en React/.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 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/.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 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/components/ComponenteA.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ComponenteC from './ComponenteC'; 3 | 4 | const ComponenteA = ({ emoji, titulo }) => { 5 | 6 | return ( 7 |
8 | 9 |

{titulo}

10 |
11 | ); 12 | }; 13 | 14 | export default ComponenteA; -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/components/Producto.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useParams } from 'react-router-dom' 3 | import Contents from './Contents'; 4 | 5 | 6 | function Producto() { 7 | 8 | const params = useParams(); 9 | 10 | return ( 11 | <> 12 |

{ params.nombreParam }

13 | 14 | 15 | ) 16 | } 17 | 18 | export default Producto -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/.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-gestion de estado y carga de datos/Manejo de Estados y carga de datos/.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-Fundamentos de React/componentes y propiedades/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | .container{ 8 | display: flex; 9 | align-items: baseline; 10 | } 11 | 12 | .container div{ 13 | font-size: 50px; 14 | } 15 | .container p{ 16 | font-size: 20px; 17 | padding: 0 30px; 18 | } 19 | 20 | .box{ 21 | border: solid 1px #000; 22 | padding: 30px; 23 | background-color:cornsilk; 24 | } -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/src/components/ProductoItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ProductoItem = ({ producto }) => { 4 | return ( 5 |
6 |
7 |

{producto.nombre}

8 |

9 | Precio:${producto.precio} 10 |

11 | 14 |
15 |
16 | 17 | ); 18 | }; 19 | 20 | export default ProductoItem; 21 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/components/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Contents from './Contents' 3 | import { useNavigate } from 'react-router-dom'; 4 | 5 | 6 | 7 | 8 | const About = () => { 9 | 10 | const navegar = useNavigate(); 11 | 12 | const manejarNavegacion = ()=>{ 13 | navegar('/'); 14 | } 15 | 16 | return ( 17 | <> 18 |

About

19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | ) 30 | } 31 | 32 | export default About -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | Contribution Agreement 3 | ====================== 4 | 5 | This repository does not accept pull requests (PRs). All pull requests will be closed. 6 | 7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license. 8 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/components/ItemCarrito.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function ItemCarrito({producto,onClick}) { 4 | return ( 5 | <> 6 |
7 |
8 |
{producto.nombre}
9 |

${producto.precio}

10 | 11 |
12 |
13 | 14 | ) 15 | } 16 | 17 | export default ItemCarrito -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/components/CicloDeVida.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | 3 | const CicloDeVida = () => { 4 | const [mensaje, setMensaje] = useState('...'); 5 | 6 | useEffect(() => { 7 | console.log('El componente está cargado'); 8 | setMensaje('El componente está cargado'); 9 | 10 | return () => { 11 | console.log('El componente está descargado'); 12 | }; 13 | }, []); 14 | 15 | return ( 16 |
17 |

Ciclo de vida de un componente

18 |

{mensaje}

19 |
20 | ); 21 | }; 22 | 23 | export default CicloDeVida; -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/components/Contents.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Contents = () => { 4 | return ( 5 | <> 6 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

7 | 8 | ) 9 | } 10 | 11 | export default Contents -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useState, useEffect, createContext } from 'react'; 4 | import './App.css'; 5 | 6 | 7 | import ListaProductos from './components/ListaProductos'; 8 | import ListaCarrito from './components/ListaCarrito'; 9 | import { DataProvider } from './components/DataContext'; 10 | 11 | 12 | function App() { 13 | 14 | 15 | return ( 16 | <> 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | ) 31 | } 32 | 33 | export default App 34 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/components/Producto.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Producto({producto}) { 4 | return ( 5 | <> 6 |
7 |
8 |
9 |
{producto.nombre}
10 |

${producto.precio}

11 | Comprar 12 |
13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Producto -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/components/Libro/Libro.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .item { 4 | border: solid 1px #000; 5 | border-radius: 10px; 6 | background-color: #e1ebe9; 7 | padding: 10px; 8 | margin: 5px; 9 | width: 224px; 10 | height: 110px; 11 | display: flex; 12 | flex-flow: row wrap; 13 | } 14 | 15 | .item h2 { 16 | display: block; 17 | padding: 0; 18 | margin: 0; 19 | flex-basis: 100%; 20 | } 21 | 22 | .item span { 23 | font-size: 13px; 24 | flex: 1; 25 | align-self: flex-end; 26 | } 27 | 28 | 29 | .default.card{ 30 | background-color: #ededed; 31 | } 32 | .seleccionado.card{ 33 | background-color: #b8b7b7; 34 | } 35 | 36 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | Copyright 2021 LinkedIn Corporation 2 | All Rights Reserved. 3 | 4 | Licensed under the LinkedIn Learning Exercise File License (the "License"). 5 | See LICENSE in the project root for license information. 6 | 7 | ATTRIBUTIONS: 8 | [PLEASE PROVIDE ATTRIBUTIONS OR DELETE THIS AND THE ABOVE LINE “ATTRIBUTIONS”] 9 | 10 | Please note, this project may automatically load third party code from external 11 | repositories (for example, NPM modules, Composer packages, or other dependencies). 12 | If so, such third party code may be subject to other license terms than as set 13 | forth above. In addition, such third party code may also depend on and load 14 | multiple tiers of dependencies. Please review the applicable licenses of the 15 | additional dependencies. 16 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | .container{ 8 | display: flex; 9 | align-items: baseline; 10 | } 11 | 12 | .container div{ 13 | font-size: 50px; 14 | } 15 | .container p{ 16 | font-size: 20px; 17 | padding: 0 30px; 18 | } 19 | 20 | .box{ 21 | border: solid 1px #000; 22 | padding: 30px; 23 | background-color:cornsilk; 24 | } 25 | 26 | li { 27 | list-style-type: none; 28 | } 29 | 30 | .productos{ 31 | display: flex; 32 | flex-wrap: wrap; 33 | } 34 | .card{ 35 | flex-basis: 33.333%; 36 | } 37 | .item{ 38 | background-color:cornsilk; 39 | border: solid 1px #000; 40 | padding: 30px; 41 | margin: 5px; 42 | } -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/components/DataContext.jsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useEffect, useState } from "react"; 2 | 3 | 4 | export const DataContext = createContext(); 5 | 6 | export const DataProvider = ( {children} ) => { 7 | 8 | 9 | const [data, setData] = useState([]); 10 | 11 | useEffect(() => { 12 | fetch('./productos.json') 13 | .then(response => response.json()) 14 | .then(datos => setData(datos)) 15 | .catch(error => console.error('Error fetching data:', error)); 16 | }, []); 17 | 18 | 19 | 20 | return( 21 | 22 | {children} 23 | 24 | ) 25 | 26 | } 27 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/components/ContadorClase.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | 4 | const ContadorClase = () => { 5 | 6 | const [conteo, setConteo] = useState(0); 7 | 8 | const incrementar = () => { 9 | setConteo((prevConteo) => prevConteo + 1); 10 | }; 11 | 12 | const reducir = () => { 13 | setConteo((prevConteo) => prevConteo - 1); 14 | }; 15 | 16 | 17 | return ( 18 |
19 |

Contador de clicks

20 |

conteo:{conteo}

21 | 22 | 23 |
24 | ); 25 | 26 | } 27 | 28 | export default ContadorClase; 29 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | form{ 8 | text-align: left; 9 | font-size: 18px; 10 | min-width: 500px; 11 | background-color:#dfdddd; 12 | padding: 30px; 13 | } 14 | form div{ 15 | padding: 10px 0; 16 | } 17 | form label{ 18 | width: 20%; 19 | display: inline-block; 20 | } 21 | 22 | form input{ 23 | line-height: 20px; 24 | padding: 5px; 25 | width:75% 26 | } 27 | 28 | form button{ 29 | display: block; 30 | margin: 30px auto; 31 | background-color:blueviolet; 32 | color: #FFF; 33 | } 34 | 35 | form .error{ 36 | font-size: 12px; 37 | display: block; 38 | color: red; 39 | text-align: right; 40 | padding-right: 12px; 41 | } -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --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.0.28", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^4.0.0", 20 | "eslint": "^8.38.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.3.4", 24 | "vite": "^4.3.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --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.0.28", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^4.0.0", 20 | "eslint": "^8.38.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.3.4", 24 | "vite": "^4.3.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --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.0.28", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^4.0.0", 20 | "eslint": "^8.38.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.3.4", 24 | "vite": "^4.3.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --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.0.28", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^4.0.0", 20 | "eslint": "^8.38.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.3.4", 24 | "vite": "^4.3.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/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 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --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 | "styled-components": "^6.0.7" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.28", 19 | "@types/react-dom": "^18.0.11", 20 | "@vitejs/plugin-react": "^4.0.0", 21 | "eslint": "^8.38.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.3.4", 25 | "vite": "^4.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^5.3.1", 14 | "react": "^18.2.0", 15 | "react-bootstrap": "^2.8.0", 16 | "react-dom": "^18.2.0", 17 | "react-router-dom": "^6.14.2", 18 | "styled-components": "^6.0.7" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.0.28", 22 | "@types/react-dom": "^18.0.11", 23 | "@vitejs/plugin-react": "^4.0.0", 24 | "eslint": "^8.38.0", 25 | "eslint-plugin-react": "^7.32.2", 26 | "eslint-plugin-react-hooks": "^4.6.0", 27 | "eslint-plugin-react-refresh": "^0.3.4", 28 | "vite": "^4.3.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | a { 4 | font-weight: 500; 5 | color: #646cff; 6 | text-decoration: inherit; 7 | } 8 | a:hover { 9 | color: #535bf2; 10 | } 11 | 12 | 13 | 14 | h1 { 15 | font-size: 3.2em; 16 | line-height: 1.1; 17 | } 18 | 19 | button { 20 | border-radius: 8px; 21 | border: 1px solid transparent; 22 | padding: 0.6em 1.2em; 23 | font-size: 1em; 24 | font-weight: 500; 25 | font-family: inherit; 26 | background-color: #1a1a1a; 27 | cursor: pointer; 28 | transition: border-color 0.25s; 29 | } 30 | button:hover { 31 | border-color: #646cff; 32 | } 33 | button:focus, 34 | button:focus-visible { 35 | outline: 4px auto -webkit-focus-ring-color; 36 | } 37 | 38 | @media (prefers-color-scheme: light) { 39 | :root { 40 | color: #213547; 41 | background-color: #ffffff; 42 | } 43 | a:hover { 44 | color: #747bff; 45 | } 46 | button { 47 | background-color: #f9f9f9; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | a { 4 | font-weight: 500; 5 | color: #646cff; 6 | text-decoration: inherit; 7 | } 8 | a:hover { 9 | color: #535bf2; 10 | } 11 | 12 | 13 | 14 | h1 { 15 | font-size: 3.2em; 16 | line-height: 1.1; 17 | } 18 | 19 | button { 20 | border-radius: 8px; 21 | border: 1px solid transparent; 22 | padding: 0.6em 1.2em; 23 | font-size: 1em; 24 | font-weight: 500; 25 | font-family: inherit; 26 | background-color: #1a1a1a; 27 | cursor: pointer; 28 | transition: border-color 0.25s; 29 | } 30 | button:hover { 31 | border-color: #646cff; 32 | } 33 | button:focus, 34 | button:focus-visible { 35 | outline: 4px auto -webkit-focus-ring-color; 36 | } 37 | 38 | @media (prefers-color-scheme: light) { 39 | :root { 40 | color: #213547; 41 | background-color: #ffffff; 42 | } 43 | a:hover { 44 | color: #747bff; 45 | } 46 | button { 47 | background-color: #f9f9f9; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^5.3.1", 14 | "react": "^18.2.0", 15 | "react-bootstrap": "^2.8.0", 16 | "react-dom": "^18.2.0", 17 | "react-router-dom": "^6.14.2", 18 | "styled-components": "^6.0.7" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.0.28", 22 | "@types/react-dom": "^18.0.11", 23 | "@vitejs/plugin-react": "^4.0.0", 24 | "eslint": "^8.38.0", 25 | "eslint-plugin-react": "^7.32.2", 26 | "eslint-plugin-react-hooks": "^4.6.0", 27 | "eslint-plugin-react-refresh": "^0.3.4", 28 | "vite": "^4.3.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Contents from './Contents' 3 | import { Link } from 'react-router-dom'; 4 | 5 | const Home = () => { 6 | 7 | const productos = [ 8 | { id: 1, nombre: 'Smartphone' }, 9 | { id: 2, nombre: 'Laptop' }, 10 | { id: 3, nombre: 'Tablet' }, 11 | { id: 4, nombre: 'Auriculares' }, 12 | { id: 5, nombre: 'SmartTV' }, 13 | { id: 6, nombre: 'Altavoz' }, 14 | ]; 15 | 16 | return ( 17 | <> 18 |

Home

19 | 20 | 21 |

Productos

22 |
    23 | {productos.map( 24 | (producto) => ( 25 | 27 | {producto.nombre} 28 | 29 | ) 30 | )} 31 | 32 |
33 | 34 | 35 | 36 | 37 | ) 38 | } 39 | 40 | export default Home -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | a { 4 | font-weight: 500; 5 | color: #646cff; 6 | text-decoration: inherit; 7 | } 8 | a:hover { 9 | color: #535bf2; 10 | } 11 | 12 | 13 | 14 | h1 { 15 | font-size: 3.2em; 16 | line-height: 1.1; 17 | } 18 | 19 | button { 20 | border-radius: 8px; 21 | border: 1px solid transparent; 22 | padding: 0.6em 1.2em; 23 | font-size: 1em; 24 | font-weight: 500; 25 | font-family: inherit; 26 | background-color: #1a1a1a; 27 | cursor: pointer; 28 | transition: border-color 0.25s; 29 | } 30 | button:hover { 31 | border-color: #646cff; 32 | } 33 | button:focus, 34 | button:focus-visible { 35 | outline: 4px auto -webkit-focus-ring-color; 36 | } 37 | 38 | @media (prefers-color-scheme: light) { 39 | :root { 40 | color: #213547; 41 | background-color: #ffffff; 42 | } 43 | a:hover { 44 | color: #747bff; 45 | } 46 | button { 47 | background-color: #f9f9f9; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | a { 4 | font-weight: 500; 5 | color: #646cff; 6 | text-decoration: inherit; 7 | } 8 | a:hover { 9 | color: #535bf2; 10 | } 11 | 12 | 13 | 14 | h1 { 15 | font-size: 3.2em; 16 | line-height: 1.1; 17 | } 18 | 19 | button { 20 | border-radius: 8px; 21 | border: 1px solid transparent; 22 | padding: 0.6em 1.2em; 23 | font-size: 1em; 24 | font-weight: 500; 25 | font-family: inherit; 26 | background-color: #1a1a1a; 27 | cursor: pointer; 28 | transition: border-color 0.25s; 29 | } 30 | button:hover { 31 | border-color: #646cff; 32 | } 33 | button:focus, 34 | button:focus-visible { 35 | outline: 4px auto -webkit-focus-ring-color; 36 | } 37 | 38 | @media (prefers-color-scheme: light) { 39 | :root { 40 | color: #213547; 41 | background-color: #ffffff; 42 | } 43 | a:hover { 44 | color: #747bff; 45 | } 46 | button { 47 | background-color: #f9f9f9; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/components/Libro/Libro.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './Libro.css'; 3 | import styled from 'styled-components'; 4 | 5 | const Libro = ({ libro }) => { 6 | 7 | const Titulo = styled.h2` 8 | display: block; 9 | padding: 0; 10 | margin: 0; 11 | flex-basis: 100%; 12 | ` 13 | 14 | const [miClase , setMiClase] = useState('default'); 15 | 16 | return ( 17 | <> 18 | 19 |
20 |
21 |
{libro.titulo}
22 |

Publicado en {libro.publicado}

23 | 24 |
25 |
26 | 27 | ); 28 | }; 29 | 30 | export default Libro; -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/components/ListaCarrito.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import ItemCarrito from './ItemCarrito'; 3 | import { DataContext } from './DataContext'; 4 | 5 | 6 | function ListaCarrito() { 7 | 8 | const { data, setData } = useContext(DataContext); 9 | 10 | const removerItem = (event)=>{ 11 | const id = event.id; 12 | setData(prevData => prevData.map(item => 13 | item.id === id ? { ...item, status: 'un-selected' } : item 14 | )); 15 | } 16 | 17 | const filteredItems = data.filter( item => item.status === 'selected' ); 18 | 19 | return ( 20 |
21 |
22 |

Shopping Cart

23 | {filteredItems.map(producto => ( 24 | { removerItem(producto) } } 26 | /> 27 | ))} 28 |
29 |
30 | 31 | ) 32 | } 33 | 34 | export default ListaCarrito -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/components/Catalogo/Catalogo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Libro from '../Libro/Libro'; 3 | 4 | const Catalogo = () => { 5 | 6 | const libros = [ 7 | { id: 1, titulo: 'El Gran Gatsby', publicado: 1925 }, 8 | { id: 2, titulo: 'Cien Años de Soledad', publicado: 1967 }, 9 | { id: 3, titulo: 'Harry Potter y la Piedra Filosofal', publicado: 1997 }, 10 | { id: 4, titulo: 'El Hobbit', publicado: 1937 }, 11 | { id: 5, titulo: '1984', publicado: 1949 }, 12 | { id: 6, titulo: 'Crimen y Castigo', publicado: 1866 }, 13 | { id: 7, titulo: 'Matar un Ruiseñor', publicado: 1960 }, 14 | { id: 8, titulo: 'Don Quijote de la Mancha', publicado: 1605 }, 15 | ]; 16 | 17 | return ( 18 | <> 19 | 20 |
21 | {libros.map( 22 | (libro) => ( 23 | 24 | ) 25 | )} 26 |
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default Catalogo; 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | ## Issue Overview 9 | 10 | 11 | ## Describe your environment 12 | 13 | 14 | ## Steps to Reproduce 15 | 16 | 1. 17 | 2. 18 | 3. 19 | 4. 20 | 21 | ## Expected Behavior 22 | 23 | 24 | ## Current Behavior 25 | 26 | 27 | ## Possible Solution 28 | 29 | 30 | ## Screenshots / Video 31 | 32 | 33 | ## Related Issues 34 | 35 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react'; 2 | import './App.css' 3 | import ComponenteA from './components/ComponenteA' 4 | import ComponenteB from './components/ComponenteB' 5 | 6 | function App() { 7 | 8 | const miEmoji = "🛫"; 9 | const miBoton = "Buscar Destino" 10 | 11 | const [mensaje, setMensaje] = useState("Viajes Aventura") 12 | 13 | 14 | const handleButtonClick = () => { 15 | // alert('Botón Click'); 16 | setMensaje("Buscando") 17 | }; 18 | 19 | const callback = useCallback( 20 | 21 | (data) => { 22 | // alert('Botón Click2'); 23 | setMensaje(data) 24 | },[mensaje] 25 | 26 | ); 27 | 28 | return ( 29 | <> 30 | 31 |
32 | 36 | 40 | 41 | 45 |
46 | 47 | 48 | ) 49 | } 50 | 51 | export default App 52 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/src/components/Catalogo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ProductoItem from './ProductoItem'; 3 | 4 | const Catalogo = () => { 5 | 6 | const productos = [ 7 | { id: 1, nombre: 'Camiseta' , precio:20.99 }, 8 | { id: 2, nombre: 'Pantalón', precio: 35.50 }, 9 | { id: 3, nombre: 'Zapatos', precio: 60.00 }, 10 | { id: 4, nombre: 'Bolso', precio: 25.75 }, 11 | { id: 5, nombre: 'Gorra', precio: 15.00 }, 12 | { id: 6, nombre: 'Calcetines', precio: 5.00 }, 13 | ] 14 | 15 | return ( 16 | <> 17 |

Catálogo de Productos

18 | 19 | {productos.length === 0 ?( 20 |

No hay productos disponibles en el catálogo.

21 | ) : ( 22 | 23 |
24 | {productos.map( 25 | (producto ) => ( 26 | 27 | ) 28 | )} 29 |
30 | )} 31 | 32 | ); 33 | }; 34 | 35 | export default Catalogo; 36 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css' 3 | import { BrowserRouter, Link, NavLink, Route, Routes, useNavigate } from 'react-router-dom' 4 | import Home from './components/Home' 5 | import About from './components/About' 6 | import Producto from './components/Producto'; 7 | 8 | function App() { 9 | return ( 10 | 11 | 12 | 13 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | } /> 30 | } /> 31 | } /> 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ) 44 | } 45 | 46 | export default App 47 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/public/productos.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "nombre": "Smartphone", 5 | "precio": 599.99, 6 | "descripcion": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 7 | "status":"selected" 8 | }, 9 | { 10 | "id": 2, 11 | "nombre": "Laptop", 12 | "precio": 999.00, 13 | "descripcion": "Lorem ipsum dolor sit amet, consectetur adipiscing elit aute irure reprehenderit" 14 | }, 15 | { 16 | "id": 3, 17 | "nombre": "SmartTV", 18 | "precio": 349.50, 19 | "descripcion": "Lorem ipsum dolor sit amet, aute irure dolor in reprehenderit consectetur adipiscing elit" 20 | }, 21 | { 22 | "id": 4, 23 | "nombre": "Altavoces", 24 | "precio": 89.95, 25 | "descripcion": "Lorem ipsum dolor sit amet, consectetur aute irure dolor in reprehenderitadipiscing elit" 26 | }, 27 | { 28 | "id": 5, 29 | "nombre": "Tablet", 30 | "precio": 899.00, 31 | "descripcion": "Lorem ipsum dolor sit amet, aute irure dolor in reprehenderit aute irure dolor in reprehenderit" 32 | }, 33 | { 34 | "id": 6, 35 | "nombre": "Audífonos", 36 | "precio": 79.99, 37 | "descripcion": "Lorem ipsum dolor sit amet, aute irure dolor in reprehenderit, consectetur adipiscing elit" 38 | } 39 | ] -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/components/ListaProductos.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import { DataContext } from './DataContext' 3 | 4 | 5 | 6 | function ListaProductos() { 7 | 8 | const { data, setData } = useContext(DataContext) 9 | 10 | const manejarClick = (event)=>{ 11 | const id = event.id; 12 | setData(prevData => prevData.map(item => 13 | item.id === id ? { ...item, status: 'selected' } : item 14 | )); 15 | } 16 | 17 | return ( 18 |
19 |

Productos

20 |
21 | 22 | {data.map(producto => ( 23 | 24 |
25 |
26 |
27 |
{producto.nombre}
28 |

${producto.precio}

29 | 32 |
33 |
34 |
35 | 36 | ))} 37 | 38 |
39 |
40 | ) 41 | } 42 | 43 | export default ListaProductos -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/src/index.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 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | @media (prefers-color-scheme: light) { 59 | :root { 60 | color: #213547; 61 | background-color: #ffffff; 62 | } 63 | a:hover { 64 | color: #747bff; 65 | } 66 | button { 67 | background-color: #f9f9f9; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/index.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 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | @media (prefers-color-scheme: light) { 59 | :root { 60 | color: #213547; 61 | background-color: #ffffff; 62 | } 63 | a:hover { 64 | color: #747bff; 65 | } 66 | button { 67 | background-color: #f9f9f9; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/src/index.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 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | @media (prefers-color-scheme: light) { 59 | :root { 60 | color: #213547; 61 | background-color: #ffffff; 62 | } 63 | a:hover { 64 | color: #747bff; 65 | } 66 | button { 67 | background-color: #f9f9f9; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React esencial 2 | 3 | Este es el repositorio del curso de LinkedIn Learning `React esencial`. El curso completo está disponible en [LinkedIn Learning][lil-course-url]. 4 | 5 | ![Nombre completo del curso][lil-thumbnail-url] 6 | 7 | Consulta el archivo Readme en la rama main para obtener instrucciones e información actualizadas. 8 | 9 | Descubre el poder de React con nuestro curso esencial. Desde principiantes hasta desarrolladores experimentados, este curso te enseñará los conceptos fundamentales para construir aplicaciones web en React. Aprende a crear componentes, gestionar el estado y trabajar con datos, integrar librerías externas y desplegar tus aplicaciones de manera profesional. Amplía tus habilidades en el desarrollo web y domina la tecnología más popular del momento. ¡Impulsa tu carrera como desarrollador o desarrolladora con React! 10 | 11 | ## Instrucciones 12 | 13 | Este repositorio tiene ramas (branches) para cada uno de los vídeos del curso. Puedes usar el menú emergente de la rama en GitHub para cambiar a una rama específica y echar un vistazo al curso en esa etapa, o puedes añadir `/tree/nombre_de_la_rama` a la URL para ir a la rama a la que quieres acceder. 14 | 15 | ## Ramas 16 | 17 | Las ramas están estructuradas para corresponder a los vídeos del curso. La convención de nomenclatura es Capítulo#_Vídeo#. Por ejemplo, la rama denominada `02_03` corresponde al segundo capítulo y al tercer vídeo de ese capítulo. Algunas ramas tendrán un estado inicial y otro final. Están marcadas con las letras i («inicio») y f («fin»). La branch i tiene el mismo código que al principio del vídeo. La branch f tiene el mismo código que al final del vídeo. La rama master tiene el estado final del código que aparece en el curso. 18 | 19 | ## Instalación 20 | 21 | 1. Para utilizar estos archivos de ejercicios, debes tener descargado lo siguiente: 22 | - NodeJs 23 | - Visual Studio Code o tu editor de código favorito 24 | 25 | 2. Clona este repositorio en tu máquina local usando la Terminal (macOS) o CMD (Windows), o una herramienta GUI como SourceTree. 26 | 3. Selecciona la carpeta con el ejercicio que deseas utilizar y antes de usarla por primera vez ejecuta: 27 | `npm install` 28 | 4. Para ejecutar un proyecto en modo local, selecciona la carpeta con el ejercicio que deseas utilizar y ejecuta: 29 | `npm run dev` 30 | 31 | ### Docente 32 | 33 | **Carlos Solís** 34 | 35 | Echa un vistazo a mis otros cursos en [LinkedIn Learning](https://www.linkedin.com/learning/instructors/carlos-solis). 36 | 37 | [0]: # (Replace these placeholder URLs with actual course URLs) 38 | [lil-course-url]: https://www.linkedin.com/learning/react-esencial-22877511/desplegar-tus-proyectos-de-forma-profesional-con-react 39 | [lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQHqWB--jAR7ug/learning-public-crop_675_1200/0/1695966422807?e=2147483647&v=beta&t=bTtZ-NYPzhQLG50oN8iEaTt72_RsxWGnl9utZrG5hXU 40 | 41 | [1]: # (End of ES-Instruction ###############################################################################################) 42 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/src/components/MiFormulario.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { useState } from 'react' 3 | 4 | const MiFormulario = () => { 5 | 6 | const [formData, setFormData] = useState({ 7 | username: '', 8 | email: 'ejemplo@ejemplo.com', 9 | password: '', 10 | }) 11 | 12 | const [formErrors, setFormErrors] = useState({ 13 | username: '', 14 | email: '', 15 | password: '', 16 | }); 17 | 18 | 19 | const procesarCambio = (evento) => { 20 | const { name, value } = evento.target; 21 | setFormData((prevFormData) => ({ 22 | ...prevFormData, 23 | [name]: value, 24 | })) 25 | 26 | setFormErrors((prevFormErrors) => ({ 27 | ...prevFormErrors, 28 | [name]: '', 29 | })); 30 | 31 | } 32 | 33 | const procesarSubmit = (evento) => { 34 | evento.preventDefault(); 35 | console.log(formData); 36 | 37 | const newFormErrors = {}; 38 | 39 | if(formData.username.trim() === ''){ 40 | newFormErrors.username = 'El usuario es requerido.'; 41 | } 42 | 43 | if (formData.email.trim() === '') { 44 | newFormErrors.email = 'El email es requerido.'; 45 | } 46 | 47 | if (formData.password.trim() === '') { 48 | newFormErrors.password = 'La contraseña es requerida.'; 49 | } 50 | 51 | if (Object.keys(newFormErrors).length > 0) { 52 | setFormErrors(newFormErrors); 53 | } else { 54 | console.log('Formulario válido. Datos:', formData); 55 | } 56 | }; 57 | 58 | 59 | return ( 60 |
61 |
62 |
63 | 64 | 71 | 72 | {formErrors.username && {formErrors.username}} 73 | 74 |
75 |
76 | 77 | 84 | {formErrors.email && {formErrors.email}} 85 |
86 |
87 | 88 | 95 | {formErrors.password && {formErrors.password}} 96 |
97 | 98 |
99 |
100 | ); 101 | }; 102 | 103 | 104 | 105 | export default MiFormulario; 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /07-Enrutamiento/Manejo de rutas/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-Fundamentos de React/componentes y propiedades/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-Construccion de componentes/componentes en React/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-Listas y estructuras de datos/Listas en react/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-Gestion de eventos y formularios/manejo de Formularios/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /06-gestion de Interfaz de usuario/Gestion de interfases en React/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-gestion de estado y carga de datos/Manejo de Estados y carga de datos/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | LinkedIn Learning Exercise Files License Agreement 2 | ================================================== 3 | 4 | This License Agreement (the "Agreement") is a binding legal agreement 5 | between you (as an individual or entity, as applicable) and LinkedIn 6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning 7 | exercise files in this repository (“Licensed Materials”), you agree to 8 | be bound by the terms of this Agreement. If you do not agree to these 9 | terms, do not download or use the Licensed Materials. 10 | 11 | 1. License. 12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn 13 | members during their LinkedIn Learning subscription a non-exclusive, 14 | non-transferable copyright license, for internal use only, to 1) make a 15 | reasonable number of copies of the Licensed Materials, and 2) make 16 | derivative works of the Licensed Materials for the sole purpose of 17 | practicing skills taught in LinkedIn Learning courses. 18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject 19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members 20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable 21 | copyright license to distribute the Licensed Materials, except the 22 | Licensed Materials may not be included in any product or service (or 23 | otherwise used) to instruct or educate others. 24 | 25 | 2. Restrictions and Intellectual Property. 26 | - a. You may not to use, modify, copy, make derivative works of, publish, 27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the 28 | Licensed Materials, except as expressly set forth above in Section 1. 29 | - b. Linkedin (and its licensors) retains its intellectual property rights 30 | in the Licensed Materials. Except as expressly set forth in Section 1, 31 | LinkedIn grants no licenses. 32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any 33 | alleged infringement or misappropriation of any intellectual property rights 34 | of any third party based on modifications you make to the Licensed Materials, 35 | ii) any claims arising from your use or distribution of all or part of the 36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold 37 | harmless, and indemnify LinkedIn and its affiliates (and our and their 38 | respective employees, shareholders, and directors) from any claim or action 39 | brought by a third party, including all damages, liabilities, costs and 40 | expenses, including reasonable attorneys’ fees, to the extent resulting from, 41 | alleged to have resulted from, or in connection with: (a) your breach of your 42 | obligations herein; or (b) your use or distribution of any Licensed Materials. 43 | 44 | 3. Open source. This code may include open source software, which may be 45 | subject to other license terms as provided in the files. 46 | 47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS” 48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY, 49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY 50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR 51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR 52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS 53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING 54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A 55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT. 56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND 57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE 58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA. NO ADVICE OR 59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR 60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT 61 | EXPRESSLY STATED IN THESE TERMS. 62 | 63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT, 64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING 65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER 66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU 67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL: 68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT, 69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT 70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS 71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND 72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR 73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE 74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS. 75 | 76 | 6. Termination. This Agreement automatically terminates upon your breach of 77 | this Agreement or termination of your LinkedIn Learning subscription. On 78 | termination, all licenses granted under this Agreement will terminate 79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this 80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue 81 | the availability of some or all of the Licensed Materials at any time for any 82 | reason. 83 | 84 | 7. Miscellaneous. This Agreement will be governed by and construed in 85 | accordance with the laws of the State of California without regard to conflict 86 | of laws principles. The exclusive forum for any disputes arising out of or 87 | relating to this Agreement shall be an appropriate federal or state court 88 | sitting in the County of Santa Clara, State of California. If LinkedIn does 89 | not act to enforce a breach of this Agreement, that does not mean that 90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does 91 | not create a partnership, agency relationship, or joint venture between the 92 | parties. Neither party has the power or authority to bind the other or to 93 | create any obligation or responsibility on behalf of the other. You may not, 94 | without LinkedIn’s prior written consent, assign or delegate any rights or 95 | obligations under these terms, including in connection with a change of 96 | control. Any purported assignment and delegation shall be ineffective. The 97 | Agreement shall bind and inure to the benefit of the parties, their respective 98 | successors and permitted assigns. If any provision of the Agreement is 99 | unenforceable, that provision will be modified to render it enforceable to the 100 | extent possible to give effect to the parties’ intentions and the remaining 101 | provisions will not be affected. This Agreement is the only agreement between 102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior 103 | agreements relating to the Licensed Materials. 104 | 105 | Last Updated: March 2019 106 | --------------------------------------------------------------------------------