Loaders de Webpack para Preprocesadores CSS

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? 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

¿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.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 12

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Sneyder Alfonso Barreto Buitrago

hace 4 años

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 4 años

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

andrés eduardo betancourt bescanza

hace 4 años

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

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