隆Bienvenida! Este es un curso especial de React Hooks
驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?
驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?
Introducci贸n a React Hooks
useState: estado en componentes creados como funciones
useEffect: olvida el ciclo de vida, ahora piensa en efectos
useContext: la fusi贸n de React Hooks y React Context
useReducer: como useState, pero m谩s escalable
驴Qu茅 es memoization? Programaci贸n funcional en JavaScript
useMemo: evita c谩lculos innecesarios en componentes
useRef: manejo profesional de inputs y formularios
useCallback: evita c谩lculos innecesarios en funciones
Optimizaci贸n de componentes en React con React.memo
Custom hooks: abstracci贸n en la l贸gica de tus componentes
Third Party Custom Hooks de Redux y React Router
Configura un entorno de desarrollo profesional
Proyecto: an谩lisis y retos de Platzi Conf Store
Git Hooks con Husky
Instalaci贸n de Webpack y Babel: presets, plugins y loaders
Configuraci贸n de Webpack 5 y webpack-dev-server
Configuraci贸n de Webpack 5 con loaders y estilos
Loaders de Webpack para Preprocesadores CSS
Flujo de desarrollo seguro y consistente con ESLint y Prettier
Estructura y creaci贸n de componentes para Platzi Conf Store
Arquitectura de vistas y componentes con React Router DOM
Maquetaci贸n y estilos del home
Maquetaci贸n y estilos de la lista de productos
Maquetaci贸n y estilos del formulario de checkout
Maquetaci贸n y estilos de la informaci贸n del usuario
Maquetaci贸n y estilos del flujo de pago
Integraci贸n de 铆conos y conexi贸n con React Router
Integraci贸n de React Hooks en Platzi Conf Merch
Creando nuestro primer custom hook
Implementando useContext en Platzi Conf Merch
useContext en la p谩gina de checkout
useRef en la p谩gina de checkout
Integrando third party custom hooks en Platzi Conf Merch
Configura mapas y pagos con PayPal y Google Maps
Paso a paso para conectar tu aplicaci贸n con la API de PayPal
Integraci贸n de pagos con la API de PayPal
Completando la integraci贸n de pagos con la API de PayPal
Paso a paso para conectar tu aplicaci贸n con la API de Google Maps
Integraci贸n de Google Maps en el mapa de checkout
Creando un Custom Hook para Google Maps
Estrategias de deployment profesional
Continuous integration y continuous delivery con GitHub Actions
Compra del dominio y despliega con Cloudflare
Optimizaci贸n de aplicaciones web con React
Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas
An谩lisis de performance con Google Lighthouse
Convierte tu aplicaci贸n de React en PWA
Bonus: trabaja con Strapi CMS para crear tu propia API
Crea una API con Strapi CMS y cons煤mela con React.js
驴Qu茅 sigue en tu carrera profesional?
Pr贸ximos pasos para especializarte en frontend
You don't have access to this class
Keep learning! Join and start boosting your career
Contributions 17
Questions 5
Comando para instalar webpack:
npm install webpack webpack-cli webpack-dev-server --save-dev
Comando para instalar el plugin de html:
npm install html-webpack-plugin html-loader --save-dev
Comando para instalar babel:
npm install babel-loader @babel/preset-env @babel/preset-react @babel/core --save-dev
Para los que est茅n viendo este curso en 2021, la parte de contenBase en la configuraci贸n del devServer est谩 deprecada. En lugar de contentBase va static
Muy bueno el video la verdad, me gustaria ver algo igual con Typescript sobre todo como obtener una buena combinacion entre tsconfig.js y .babelrc
npm install @babel/core @babel/preset-env @babel/preset-react --save-dev
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader html-loader html-webpack-plugin --save-dev
Tips random:
Pregunta:
Si yo hago eso de pasar paquetes de dependencies a devDependencies o viceversa. 驴驴No tendria que borrar node_modules y volver a hacer install??
4:37 esto puede llegar a tardar un poco
Oscar Barajas : 4s
Yo: 8 min
Les comparto mi repositorio donde la configuraci贸n est谩 realizada, por si alguno le cuesta todo este proceso. Link del repo
Hola, Si les salen errores hay la posibilidad que sea el webpack-dev-server , en especial si estan usando WSL2, para ello a mi me sirvio instalar esta versi贸n.
npm install webpack-dev-server@4.0.0-beta.3
les dejo en enlace del issue que me ayudo , https://github.com/webpack/webpack-dev-server/issues/3444
La instalaci贸n de Babel, webpack y html loader en una sola linea:
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin html-loader babel-loader @babel/preset-env @babel/preset-react @babel/core
Si a alguien le aparecen problemas de permisos persistentes en windows con el subsistem de linux, lo que a mi me funciono, despues de probar muchas formas de hacerlo fue: No crear la carpeta del proyecto desde la terminal, borre todo y cree la carpeta desde el explorador de archivos (cabe anotar que antes tenia mi terminal como administrador y con los permisos de sudo aun as铆 nada de eso funciono)
les comparto el link de la p谩gina de webpack para que puedan profundizar m谩s en c贸mo funciona
The sctript now is
麓麓麓
webpack serve --mode=development
麓麓麓
creo que a estas alturas lo mejor seria usar create-react-app y aprender como funciona react luego si optimizar estos detalles
驴Alguien sabe la configuraci贸n con typescript?
que chistoso si lo pones a 0.5x
Menos mal conoc铆 a vite y la vida cambi贸
En consola:
npm i -D babel babel-loader @babel/core @babel/preset-env @babel/preset-react html-loader html-webpack-plugin webpack webpack-cli webpack-dev-server
Want to see more contributions, questions and answers from the community?