Top 5 Cheat sheets Para Desarrolladores React
Aqui va un mega parraro de lo que va a llevar el post
Alvaro Castillo Carreño
Desarrollador Web
La práctica es la clave para dominar cualquier habilidad o campo de conocimiento. No aprendes cosas en un día. Necesitas semanas, meses y, a veces, incluso años de práctica constante para ser bueno en algo.
React, en general,a pesar de tener una curva de aprendizaje relativamente sencilla, es una librería llena de trucos y cosas un poco extrañas y lleva tiempo aprenderlo bien.
Así que en lugar de llorar frente al espejo cuando olvides los conceptos o la sintaxis, regresa a esta guía y busca la Cheat sheets que sea más de tu agrado.
Pero antes de continuar que es una "Cheat sheets", si lo traducimos literalmente seria hoja de trucos, pero esto no nos dice nada, velo como un acordeón, chuleta, chivo, machete o como le digan a tu país a ese truco que se hace en los exámenes para copiar y nos va a servir para condensar grandes cantidades de información en un solo lugar de consulta rápida.
Supongo que tienes al menos una familiaridad básica con React, porque si no lo tienes, tengo Post para ti, Lo basico de react.
Vale, parece que ya tienes algo de experiencia con React, pero los conceptos y la sintaxis se escapan de tu memoria. En ese caso, las siguientes son las 5 grandes hojas de trucos que podrían ayudarte en tu viaje:
Nota: Las hojas de trucos son útiles no solo para los desarrolladores principiantes, sino también para los experimentados. La programación consiste en encontrar soluciones que no memorizar la sintaxis, por lo que cuanto más familiarizado estés con lo básico, más ayuda.
1. Developer Cheatsheet's React Cheatsheet
Developer Cheatsheets. es un sitio web con Cheat sheet de desarrollo web de Leon Gilyadov.
Este sitio web de diseño mínimo contiene hojas de trucos sobre...
- Historia del desarrollo web
- React
- React Router
- Redux
- ES6
Esta Cheatsheet de React no tiene mucha profundidad, pero proporciona contenido a nivel de superficie lo suficientemente bueno como para desnatar los fragmentos y la sintaxis.
Ven aquí para ponerte al día rápidamente con la sintaxis cuando tengas prisa.
A partir de abril de 2022, esta Cheat sheet tiene sintaxis para (componentes funcionales)
- Create React App
- Stateless component
- Props in stateless component
- Children
- useRef Hook
- useState Hook
- Higher-Order Component
- Render Props
2. DevHints' React Cheatsheet
Devhint.io también es otro sitio web lleno de hojas de trucos de varias tecnologías. La hoja de trucos de React de DevHints contiene más contenido que las hojas de trucos de desarrollador .
Sin embargo, la mayor parte de su contenido se basa en componentes de clase que probablemente no necesite a menos que trabaje en una base de código heredada.
Aún así, esta hoja de trucos contiene algunos fragmentos útiles del mundo de los componentes funcionales. Estas son la declaración del componente funcional, la declaración y los ejemplos de useState hook, useEffect hook y, lo que es más importante, cómo crear un hook personalizado.
3. SheCodes' React Cheatsheet
Shecodes' React Cheatsheet es una Cheatsheet de sintaxis basada en componentes completamente funcionales de react.
Puede consultar todos los fragmentos a la vez o filtrarlos por categorías. No se da ninguna explicación con los fragmentos, por lo que puede usarlo solo para echar un vistazo rápido a las diversas sintaxis.
El contenido es similar al de otros sitios web y es fácil y rápidamente accesible a la vez, lo que lo convierte en una excelente hoja de referencia para una referencia rápida de la sintaxis.
4. Ohans Emmanuel's Cheatsheet
Esta Cheatsheet es el artículo de LogRocket de Ohans Emmanuel.
A diferencia de otras hojas de trucos en nuestra lista, esta no se enfoca en los conceptos básicos de React.
Es una hoja de trucos de React Hooks que solo trata de explicar React Hooks. Contiene sintaxis, cómo funcionan los ganchos y las mejores prácticas a tener en cuenta al trabajar con ganchos en React. Todo está explicado con ejemplos y el contenido está muy bien escrito.
Los siguientes ganchos están incluidos en la hoja de trucos:
- useState
- useEffect
- useContext
- useLayoutEffect
- useReducer
- useCallback
- useMemo
- useRef
Como desarrollador de React moderno, el conocimiento de Hooks es esencial y esta hoja de trucos lo ayudará a comprender profundamente el funcionamiento central de estos Hooks y cómo usarlos en su vida diaria como desarrollador de React.
5. Codingcheats.io's React Cheatsheet
Esta es otra gran hoja de trucos de React basada en componentes funcionales . Aunque no tiene un diseño excelente, esta hoja de trucos tiene un contenido excelente.
Todos los fragmentos están disponibles en la página de inicio con una pequeña explicación de cada uno.
El contenido incluye sintaxis de componentes básicos, abreviaturas, manejo de eventos y 6 ganchos diferentes: useState, useEffect, useRef, useMemo, useReducer. usarDevolución de llamada.
Se dan ejemplos adecuados en cada fragmento con una breve explicación de cada uno. Definitivamente deberías revisar esta hoja de trucos al menos una vez.
Conclucion
Aprender React no es una tarea de un día. Tomará tiempo, pero ser consistente, invertir en su conocimiento y ser inteligente al usar hojas de trucos lo ayudará a permanecer en el juego a largo plazo.
Te deseo buena suerte en tu viaje. Si tiene alguna pregunta en mente, envíeme un ping en Twitter .
Echa un vistazo a mi blog para más.