隆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

Git Hooks con Husky

16

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

17

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

18

Configuraci贸n de Webpack 5 con loaders y estilos

19

Loaders de Webpack para Preprocesadores CSS

20

Flujo de desarrollo seguro y consistente con ESLint y Prettier

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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
7 Hrs
43 Min
15 Seg

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

16/45
Resources

Contributions 17

Questions 5

Sort by:

Want to see more contributions, questions and answers from the community?

Comando para instalar webpack:

npm install webpack webpack-cli webpack-dev-server --save-dev

Comando para instalar el plugin de html:

npm install html-webpack-plugin html-loader --save-dev

Comando para instalar babel:

npm install babel-loader  @babel/preset-env @babel/preset-react @babel/core --save-dev

Para los que est茅n viendo este curso en 2021, la parte de contenBase en la configuraci贸n del devServer est谩 deprecada. En lugar de contentBase va static

Muy bueno el video la verdad, me gustaria ver algo igual con Typescript sobre todo como obtener una buena combinacion entre tsconfig.js y .babelrc

Instalar Babel:

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev 

Instalar Webpack

npm install webpack webpack-cli webpack-dev-server --save-dev

Instalar Plugin y Loader Webpack Y Babel

npm install babel-loader html-loader html-webpack-plugin --save-dev

Tips random:

    • En Vscode abrimos una terminal con Ctrl+J
    • Podemos usar shortcuts asi: npm i webpack -D

Pregunta:
Si yo hago eso de pasar paquetes de dependencies a devDependencies o viceversa. 驴驴No tendria que borrar node_modules y volver a hacer install??

4:37 esto puede llegar a tardar un poco
Oscar Barajas : 4s

Yo: 8 min

Les comparto mi repositorio donde la configuraci贸n est谩 realizada, por si alguno le cuesta todo este proceso. Link del repo

Hola, Si les salen errores hay la posibilidad que sea el webpack-dev-server , en especial si estan usando WSL2, para ello a mi me sirvio instalar esta versi贸n.

npm install webpack-dev-server@4.0.0-beta.3

les dejo en enlace del issue que me ayudo , https://github.com/webpack/webpack-dev-server/issues/3444

La instalaci贸n de Babel, webpack y html loader en una sola linea:

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin html-loader babel-loader  @babel/preset-env @babel/preset-react @babel/core 

Si a alguien le aparecen problemas de permisos persistentes en windows con el subsistem de linux, lo que a mi me funciono, despues de probar muchas formas de hacerlo fue: No crear la carpeta del proyecto desde la terminal, borre todo y cree la carpeta desde el explorador de archivos (cabe anotar que antes tenia mi terminal como administrador y con los permisos de sudo aun as铆 nada de eso funciono)

les comparto el link de la p谩gina de webpack para que puedan profundizar m谩s en c贸mo funciona

The sctript now is

麓麓麓
webpack serve --mode=development
麓麓麓

creo que a estas alturas lo mejor seria usar create-react-app y aprender como funciona react luego si optimizar estos detalles

驴Alguien sabe la configuraci贸n con typescript?

que chistoso si lo pones a 0.5x

Menos mal conoc铆 a vite y la vida cambi贸

En consola:

npm i -D babel babel-loader @babel/core @babel/preset-env @babel/preset-react html-loader html-webpack-plugin webpack webpack-cli webpack-dev-server