Temario y recursos del Curso Profesional de React Hooks
Temario del Curso Profesional de React Hooks
¡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? Técnicas de optimización en programación funcional
- 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
- 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
- Git Hooks con Husky
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
Para este curso vas a necesitar
6 Horas de contenido
20 Horas de práctica
Para este curso vas a necesitar
6 Horas de contenido
20 Horas de práctica
¡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? Técnicas de optimización en programación funcional
- 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
- 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
- Git Hooks con Husky
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
