隆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

Git Hooks con Husky

20/45

Lectura

Git Hooks con Husky

Husky es una herramienta que nos permite ejecutar Git Hooks de forma m谩s amigable y sencilla con los cuales vamos a garantizar que se corren las pruebas pertinentes en nuestro c贸digo y de esta forma no enviar un bug o inconsistencias al repositorio del proyecto.

Instalar Husky

npm install husky --save-dev

Agregar Husky a nuestro proyecto:

Para integrar Husky a nuestro proyecto y garantizar que cada commit cumple con el est谩ndar deseado debemos de agregar la integraci贸n dentro de nuestro archivo package.json.

 "husky": {
    "hooks": {
      "pre-commit": "npm test", 
      "pre-push": "npm test",
      "...": "..."
    }
  }

Una vez agregada la configuraci贸n podemos estar seguros de que antes de agregar cada commit se ejecutar谩n estos hooks, los cuales validar谩n las pruebas necesarias que agreguemos a nuestro proyecto tenga un resultado positivo.

Si existe un error o las pruebas que incorporamos el proyecto no funcionan, en la consola podremos ver el resultado mostrando el error por el cual no se puede enviar el commit a nuestro repositorio.

Aportes 14

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

En caso que requieran correr dos o mas scripts en un comando estos se separan por el simbolo ampersand &&
Ejemplo

"husky": {
	"hooks: : {
		"pre-commit": "npm run test && npm run eslint",
		"...": "..."
	}
}

Ahora lint-staged utiliza simple-git-hooks en lugar de husky, ya que es una dependencia m谩s ligera.

Para configurarlos: 馃憠 https://github.com/okonet/lint-staged

> npx mrm lint-staged

En package.json se crea una configuraci贸n por defecto, yo la modifico as铆:

  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "src/**/*.{html,ts,js,jsx,json,css,scss}": [
      "eslint --cache --fix",
      "prettier --write",
      "git add"
    ]
  }

Si el hook no se ejecuta al hacer commit, es porque se debe registrar esta configuraci贸n con el siguiente comando:

> npx simple-git-hooks

馃憠 https://github.com/toplenboren/simple-git-hooks

Se instala en el archivo package.json? o en el archivo package-lock.json? package.json no se donde va, y tengo error, obviamente no puedo hacer commits, npm run format ni, npm run lint me arrojan error.

Si lo instalo en archivo package-lock.json en el area de dependencias, ni npm run format ni, npm run lint me arrojan error. (todo correcto) y ahora si puedo hacer commits 馃し馃徎鈥嶁檪锔

Guau, ojal谩 la hubiera conocido antes 馃槀馃槀

No conoc铆a esta tool, comenzar茅 a usarla.

Husky Hooks 馃惡馃槄

Wow! No conoc铆a esta herramienta. La voy a empezar a implementar

Si quieren usar arrow functions para los componentes deben agregar esta regla en el archivo .eslintrc

"react/function-component-definition": [{
      "namedComponents": "arrow-function"
    }],

M谩s opciones Aqu铆

驴Esto funciona tambi茅n para yarn? o como seria.

Me encanta! es una nueva manera de ejecutar los pre commit a mi parece de forma mas limpia y legible

No conoc铆a que 茅sto se pod铆a hacer. A implementarlo!

m

En algunos articulos me aparece 鈥渓int-staged鈥 ya viene for defecto haciendo el linting en los archivos en stage, y que se usa con husky pero no dicen nada acerca de instalarlo. La pregunta es, Lo tengo que instalar si o si para poder usarlo con 鈥渓int-staged鈥?