¡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

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

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

Loaders de Webpack para preprocesadores CSS

¿Quieres utilizar tu preprocesador favorito (como Sass, Less o Stylus) para crear los estilos en tus aplicaciones con React.js? En esta lectura aprenderás cómo implementarlos dentro de tu proyecto con Webpack.

Configuración de tu proyecto con Sass

Primero debemos de instalar las dependencias necesarias para darle soporte a Sass dentro de nuestro proyecto:

npm install --save-dev sass-loader node-sass

Una vez agregadas las dependencias necesarias, debemos agregar una nueva regla a la configuración de Webpack en la parte de rules:

{
	test: /\.scss$/,
	loader: [
		MiniCSSExtractPlugin.loader,
		'css-loader',
		'sass-loader'
	]
}

Ahora puedes agregar archivos Sass a cada componente y tendrás el mismo resultado que configurar directamente CSS en Platzi Conf Merch.

Configuración de tu proyecto con Less

Para darle soporte a Less dentro del proyecto debemos repetir los pasos anteriores, pero con la configuración apropiada para utilizar Less.

npm install --save-dev less less-loader

Agregar la configuración de Less a Webpack

{
	test: /\.less$/,
	loader: [
		MiniCSSExtractPlugin.loader,
		'css-loader',
		'less-loader'
	]
}

Configuración de tu proyecto con Stylus

Siguiendo el ejemplo de las configuraciones previas para Sass y Less vamos a repetir los pasos para agregar soporte a Stylus.

npm install --save-dev stylus stylus-loader

Ahora agregamos la configuración de Stylus a Webpack:

{
	test: /\.styl$/,
	loader: [
		MiniCSSExtractPlugin.loader,
		'css-loader',
		'stylus-loader'
	]
}

La configuración que elijas te ayudará a utilizar un preprocesador en tu proyecto y con esto utilizar todas las ventajas que te brinda el uso de un preprocesador de CSS. Si no conocías los preprocesadores, también puedes tomar el Curso de Preprocesadores CSS para que comiences a utilizarlos en tus proyectos.

Te veo en la próxima clase donde aprenderás a configurar tu proyecto para un flujo de desarrollo seguro y consistente con herramientas como ESLint y Prettier.

Aportes 12

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Sneyder Alfonso Barreto Buitrago

hace un año

Al usar Sass, recomiendo instalar la versión de Dart Sass y no la de Node Sass. Principalmente porque Node Sass no soporta las últimas implementaciones del lenguaje, por ahora.

En la instalación solo deben cambiar node-sass por sass:

npm install sass sass-loader --save-dev

Incluso esta versión es la que recomiendan en la documentación de webpack.
Saludos. 😉

Seba Cardoso

hace 2 años

Donde dice loader hay que poner use. Tuve problemas por eso.

andrés eduardo betancourt bescanza

hace un año

Con esta regla pueden decirle que lea todos los archivos scss y css.

{
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader",
          "sass-loader",
        ],
      },