隆Bienvenida! Este es un curso especial de React Hooks

1

驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?

2

驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?

Introducci贸n a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusi贸n de React Hooks y React Context

6

useReducer: como useState, pero m谩s escalable

7

驴Qu茅 es memoization? Programaci贸n funcional en JavaScript

8

useMemo: evita c谩lculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita c谩lculos innecesarios en funciones

11

Optimizaci贸n de componentes en React con React.memo

12

Custom hooks: abstracci贸n en la l贸gica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: an谩lisis y retos de Platzi Conf Store

15

Instalaci贸n de Webpack y Babel: presets, plugins y loaders

16

Configuraci贸n de Webpack 5 y webpack-dev-server

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creaci贸n de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetaci贸n y estilos del home

23

Maquetaci贸n y estilos de la lista de productos

24

Maquetaci贸n y estilos del formulario de checkout

25

Maquetaci贸n y estilos de la informaci贸n del usuario

26

Maquetaci贸n y estilos del flujo de pago

27

Integraci贸n de 铆conos y conexi贸n con React Router

Integraci贸n de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la p谩gina de checkout

31

useRef en la p谩gina de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicaci贸n con la API de PayPal

34

Integraci贸n de pagos con la API de PayPal

35

Completando la integraci贸n de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

37

Integraci贸n de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimizaci贸n de aplicaciones web con React

41

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

42

An谩lisis de performance con Google Lighthouse

43

Convierte tu aplicaci贸n de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y cons煤mela con React.js

驴Qu茅 sigue en tu carrera profesional?

45

Pr贸ximos pasos para especializarte en frontend

Loaders de Webpack para Preprocesadores CSS

18/45

Lectura

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.

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. 馃槈

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

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

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

Me surge una duda, se puede usar el loader del preprocesador sin tener que usar el MiniCssExtractPlugin o siempre deben ir juntos?

Con esta regla podremos trabajar con archivos .scss y .sass por igual

+10 profesor

Les comparto una configuraci贸n propia de Webpack para React y SASS, espero les sirva y puedan mejorarla.
webpack-react

Alguien sabe c贸mo puedo configurar PurgeCss en webpack? la documentaci贸n oficial solo aplica utilizando create-react-app. Estoy usando bootstrap

Genial

Excelente! Gracias!

Y para styled components no necesito hacer nada mas, 驴cierto?

b