¡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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Configuración de Webpack 5 con loaders y estilos

17/45
Recursos

Aportes 13

Preguntas 7

Ordenar por:

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

Snippet actualizado para css

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"webpack config": {
		"prefix": "wpc",
		"body": [
		  "const path = require(\"path\");",
		  "const HtmlWebpackPlugin = require(\"html-webpack-plugin\");",
		  "const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
		  "",
		  "module.exports = {",
		  "    entry: \"./src/index.js\",",
		  "    output: {",
		  "      path: path.resolve(__dirname, \"dist\"),",
		  "      filename: \"bundle.js\",",
		  "    },",
		  "    resolve: {",
		  "      extensions: [\".js\", \".jsx\"],",
		  "    },",
		  "    module: {",
		  "      rules: [",
		  "        {",
		  "          test: /\\.(js|jsx)$/,",
		  "          exclude: /node_modules/,",
		  "          use: {",
		  "            loader: \"babel-loader\",",
		  "          },",
		  "        },",
		  "        {",
		  "          test: /\\.html$/,",
		  "          use: [",
		  "            {",
		  "              loader: \"html-loader\",",
		  "            },",
		  "          ],",
		  "        },",
		  "        {",
		  "            test: /\\.css$/,",
		  "            use:[",
		  "                {",
		  "                    loader: MiniCssExtractPlugin.loader,",
		  "                },",
		  "                'css-loader'",
		  "            ]",
		  "        }",
		  "      ],",
		  "    },",
		  "    plugins: [",
		  "      new HtmlWebpackPlugin({",
		  "        template: \"./public/index.html\",",
		  "        filename: \"./index.html\",",
		  "      }),",
		  "",
		  "      new MiniCssExtractPlugin({",
		  "          filename: 'assests[name].css',",
		  "      })",
		  "    ],",
		  "    devServer: {",
		  "      contentBase: path.join(__dirname, \"dist\"),",
		  "      compress: true,",
		  "      port: 3005,",
		  "    },",
		  "  };"
		],
		"description": "webpack config html and css"
	  }
}```

Por si desean ponerle Sass:

  1. Instalar node-sass y sass-loader
npm install sass-loader node-sass
  1. Agregar a las reglas de estilos lo siguiente:
{
                test: /\.(s*)css$/,
                use: [ 
                    {

                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'sass-loader',
                ],
            },

Los plugins quedan igual, porque solo se debe cargar el loader de sass.

Comando para instalar el plugin para css:

npm install css-loader mini-css-extract-plugin --save-dev

webpackconfig.js
css

 {
        test: /\.css$/,
        use: [
            {
                loader: MinicssExtractPlugin.loader,
            },
            'css-loader'
        ]
      }
new MinicssExtractPlugin({
        filename: 'assets/[name].css',
    })

Si tienen un error en babel, por el preset ,
Reemplacen el nombre de este archivo
.babelrc
por
babel.config.json

Pueden colocar [hash] para que se agregue un hash automático en el nombre del archivo de la siguiente forma

new MiniCssExtractPlugin({
  filename: 'assets/[name].[hash].css'
})

Porque en las ultimas versiones de react al hacer el proceso del bundle nos sale el warning de que el bundle esta muy pesado ?

Les facilito la documentación de mini-css-extract-plugin para que puedan profundizar en su uso.

para los que quieran sass en su proyecto:

npm i sass
npm i -D sass-loader css-loader mini-css-extract-plugin

Si les da algun error de memoria, pueden agrgar lo siguiente a la configuracion de webpack:

performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },

¡Hola! ¿Cómo puedo integrar en webpack algún proyecto que haya hecho con styled-components en lugar de css?

No me funciona la minificación del css cuando ejecuto npm run build, ¿alguna idea de que puede ser o si a alguien mas le pasa?

n