Psst… aquí están las 8 mejores hojas de trucos para desarrolladores de React

Este artículo fue publicado originalmente en .cult por Ashutosh Mishra. .cult es una plataforma comunitaria para desarrolladores con sede en Berlín. Escribimos sobre todo lo relacionado con la carrera, hacemos documentales originales y compartimos muchas otras historias no contadas de desarrolladores de todo el mundo.

La práctica es la clave para dominar cualquier habilidad o área de conocimiento. No se aprenden 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, también es muy amplio y lleva tiempo aprenderlo bien. Entonces, en lugar de llorar frente al espejo cuando olvida conceptos o sintaxis, busque las soluciones.

Asumo aquí que tienes al menos un conocimiento básico de React, porque si no lo tienes, tengo otro regalo para ti, ábrelo aquí.

Bien, parece que ya tienes algo de experiencia con React, pero los conceptos y la sintaxis están más allá de ti. En ese caso, aquí están las 9 excelentes hojas de trucos que podrían ayudarlo en su viaje:

Notar: Las hojas de trucos son útiles no solo para desarrolladores principiantes, sino también para desarrolladores experimentados. La programación se trata de encontrar soluciones, no de memorizar la sintaxis, por lo que cuanto más familiarizado esté con los conceptos básicos, más ayuda.

1. Hoja de trucos para desarrolladores

Developer Cheatsheets es un sitio web de hoja de trucos de desarrollo web creado por Leon Gilyadov. Este sitio web de diseño minimalista contiene hojas de trucos sobre:

Historia del desarrollo web

• Reaccionar
• Reaccionar enrutador
• redux
• ES6

Esta hoja de trucos de React no tiene mucha profundidad, pero proporciona un contenido superficial lo suficientemente bueno como para hojear fragmentos y sintaxis. Consúltelo para ponerse al día rápidamente con la sintaxis cuando tenga prisa.

A partir de abril de 2022, esta hoja de trucos tiene una sintaxis para (contando solo los componentes funcionales):

• Crear una aplicación Reaccionar
• componente sin estado
• Props en componente sin estado
• Niños
• UseRef Gancho
• anzuelo useState
• componente de orden superior
• Accesorios de renderizado

2. Consejos de desarrollo

Devhint.io es otro sitio web lleno de hojas de trucos para varias tecnologías. La hoja de trucos de React de DevHint tiene más contenido que las hojas de trucos del desarrollador.

Sin embargo, la mayor parte de su contenido se basa en componentes de clase que probablemente no necesitará a menos que esté trabajando en una base de código heredada.

Aún así, esta hoja de trucos contiene algunos fragmentos útiles del mundo de los componentes funcionales. Estos son la declaración del componente funcional, la declaración y los ejemplos del enlace useState, el enlace useEffect y, lo que es más importante, cómo crear un enlace personalizado.

3. Barcaza de caña

Esta hoja de trucos es un artículo de freecodecamp de Reed Barger. Esta es una de mis favoritas y la mejor hoja de trucos de React para principiantes. Se lanzó en febrero de 2022, por lo que también es la más reciente entre las otras hojas de trucos mencionadas en este artículo.

Lo bueno de esta hoja de trucos es que no es solo una hoja de trucos solo de sintaxis, sino que también le brinda el contexto detrás de la sintaxis y le enseña un poco sobre esos conceptos. Entonces, si estás en el nivel de principiante, esto te vendrá bien.

Esta hoja de trucos contiene contenido sobre los conceptos básicos como React Elements, Attributes, Styles, Fragments, Components, Props, etc. a varios ganchos como useState, useEffect, useRef, useContext, useCallback y useMemo.

El contenido está bien escrito, es apto para principiantes y es lo suficientemente profundo como para mantenerlo aquí para la mayoría de los problemas.

Personalmente, no creo que haya una razón por la que este sitio no esté en sus marcadores.

4. Eric el codificador

Esta hoja de trucos es un artículo de dev.to de Eric The Coder. Escribió este artículo en junio de 2021 como una hoja de trucos cuando olvida los conceptos y la sintaxis de React.

El contenido de esta hoja de trucos no es muy profundo, pero contiene muchas cosas muy básicas que otras hojas de trucos podrían haber pasado por alto. Esto incluye reglas básicas de JSX, JavaScript en JSX, lista con clave, varios detalles de eventos de clic y más.

En cuanto al gancho, esta hoja de trucos incluye useState, useEffect y useRef.

Eric creó esta hoja de trucos cuando era nuevo en React. Por lo tanto, incluso las cosas más básicas están debidamente documentadas y subrayadas (algo de lo que carecen otras hojas de trucos hasta cierto punto).

5.SheCodes

Shecodes React Cheat Sheet es una hoja de trucos basada en la sintaxis totalmente funcional.

Puede ver todos los fragmentos a la vez o filtrar por categoría. No se proporciona ninguna explicación con los fragmentos de código, por lo que puede usarlo para echar un vistazo rápido a las diferentes sintaxis.

El contenido es similar al de otros sitios web y es fácil y rápidamente accesible, lo que lo convierte en una excelente hoja de trucos para una referencia rápida de sintaxis.

6. Reaccionar mecanografiado

Finalmente, tenemos algo increíble para nuestros desarrolladores de TypeScript.

React Typescript es un proyecto de hoja de trucos de código abierto con licencia del MIT con más de 33 000 estrellas en GitHub y muchos colaboradores increíbles para mantener el proyecto vivo y de alta calidad.

Si te encanta trabajar en React y TypeScript, también te puede gustar esta hoja de trucos. Puede acceder al contenido en su sitio web o GitHub README.

Toda la hoja de trucos se divide en 4 partes:

• Básico: enfocado en ayudar a los desarrolladores de React a comenzar a usar TS en las aplicaciones de React.
• Avanzado: muestra y explica el uso avanzado de tipos genéricos para las personas que escriben utilidades/funciones/accesorios de renderizado/componentes de orden superior y bibliotecas TS+React.
• Migración: ayude a recopilar consejos para migrar gradualmente grandes bases de código de JS o Flow, de personas que lo han hecho.
• HOC: compila todo el conocimiento disponible para escribir componentes de orden superior con React y TypeScript.

La calidad de todo el proyecto está en la parte superior, las explicaciones necesarias se dan donde sea necesario y, sobre todo, esta hoja de trucos es mantenida y actualizada activamente por la comunidad.

7. Trucos de codificación.io

Esta es otra gran hoja de trucos de React basada puramente en componentes funcionales. Si bien no tiene un gran diseño, esta hoja de trucos tiene un gran contenido.

Todos los extractos están disponibles en la página de inicio con una breve explicación de cada uno.

El contenido incluye sintaxis de componentes básicos, accesos directos, manejo de eventos y 6 ganchos diferentes: useState, useEffect, useRef, useMemo, useReducer. utilizar devolución de llamada.

En cada extracto se dan ejemplos apropiados con una breve explicación de cada uno. Definitivamente deberías revisar esta hoja de trucos al menos una vez.

8. Ohans Emmanuel

Esta hoja de trucos es el artículo de LogRocket de Ohans Emmanuel. A diferencia de las otras hojas de trucos de nuestra lista, esta no se centra en los conceptos básicos de React.

Esta es una hoja de trucos de React Hooks que solo trata de explicar React Hooks. Contiene la sintaxis, cómo funcionan los ganchos y las mejores prácticas para 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
• efecto de uso
• useContext
• useLayoutEffect
• usarreductor
• usar devolución de llamada
• useMemo
• useRef

Como desarrollador moderno de React, el conocimiento de Hooks es esencial y esta hoja de trucos lo ayudará a comprender profundamente su núcleo y cómo usarlos en su vida diaria.

Aprender React no es una tarea de un día. Tomará tiempo, pero ser constante, 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 tienes alguna pregunta, mándame un ping a Gorjeo.

Echa un vistazo a mi blog para más.

¡Feliz codificación!