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",
"...": "..."
}
}
¡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
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.
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 14
Preguntas 0
Ordenar por:
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
Si quieren agregar typescript al proyecto: https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
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 🐺😅
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í
Wow! No conocía esta herramienta. La voy a empezar a implementar
¿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!
En algunos articulos me aparece “lint-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 “lint-staged”?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.