¡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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 17
Preguntas 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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.