Psst… aqui estão os 8 melhores cheatsheets para desenvolvedores React

este artigo foi publicado originalmente em .culto por Ashutosh Mishra. .cult é uma plataforma de comunidade baseada em Berlim para desenvolvedores. Escrevemos sobre todas as coisas relacionadas à carreira, fazemos documentários originais e compartilhamos muitas outras histórias não contadas de desenvolvedores de todo o mundo.

A prática é a chave para o domínio em qualquer habilidade ou campo de conhecimento. Você não aprende as coisas em um dia. Você precisa de semanas, meses e às vezes até anos de prática consistente para ser bom em alguma coisa.

React, em geral, também é vasto e leva pace para aprender bem. Então, em vez de chorar na frente do espelho quando você esquece conceitos ou sintaxe, procure as soluções.

Estou supondo aqui que você tenha pelo menos uma familiaridade básica com React, porque se não tiver, tenho outro presente para você, abra-o aqui.

Adequate, parece que você já tem alguma experiência com React, mas os conceitos e a sintaxe estão escapando da sua memória. Nesse caso, a seguir estão as 9 ótimas dicas que podem ajudá-lo em sua jornada:

Observação: Cheatsheets são úteis não apenas para desenvolvedores iniciantes, mas também para experientes. Programar é encontrar soluções sem memorizar a sintaxe, portanto, quanto mais familiarizado você estiver com o básico, mais será útil.

1. Folha de dicas do desenvolvedor

Cheatsheets do desenvolvedor é um web page de dicas de desenvolvimento internet por Leon Giliadov. Este web page minimamente projetado contém dicas sobre:

História do desenvolvedor internet

• Reagir
• Reagir Roteador
• Restaurado
• ES6

Esta folha de dicas do React não tem muita profundidade, mas fornece conteúdo de nível superficial bom o suficiente para percorrer os trechos e a sintaxe. Confira para acompanhar rapidamente a sintaxe quando estiver com pressa.

A partir de abril de 2022, esta folha de dicas tem sintaxe para (contando apenas componentes funcionais):

• Criar aplicativo React
• Componente sem estado
• Adereços no componente sem estado
• Crianças
• use o Gancho de Referência
• use State Hook
• Componente de ordem awesome
• Adereços de renderização

2. Dicas de desenvolvimento

Devhint.io é outro web page cheio de cheatsheets para várias tecnologias. A folha de dicas do React do DevHint contém mais conteúdo do que as Folhas de dicas do desenvolvedor.

No entanto, a maior parte de seu conteúdo é baseada em componentes de classe que você provavelmente não precisará, a menos que trabalhe em uma base de código herdada.

Ainda assim, esta folha de dicas contém alguns trechos úteis do mundo dos componentes funcionais. Estas são a declaração de componente funcional, declaração e exemplos de gancho useState, gancho useEffect e, mais importante, como criar um gancho personalizado.

3. Barcaça de junco

Esta folha de dicas é um artigo freecodecamp de Reed Barger. É um dos meus favoritos e a melhor folha de dicas do React para iniciantes. Foi publicado em fevereiro de 2022, por isso também é o mais recente entre outros cheatsheets mencionados neste artigo.

A parte boa desta folha de dicas é que ela não é apenas uma folha de dicas de sintaxe, mas também fornece o contexto por trás da sintaxe e ensina um pouco sobre esses conceitos. Portanto, se você estiver no nível iniciante, isso será útil.

Esta folha de dicas contém conteúdo sobre o básico, como React Parts, atributos, estilos, fragmentos, componentes, props, and many others para vários ganchos como useState, useEffect, useRef, useContext, useCallback e useMemo.

O conteúdo é bem escrito, amigável para iniciantes e tem profundidade suficiente para mantê-lo aqui para a maioria dos problemas.

Pessoalmente, não acho que haja motivo para este web page não estar nos seus favoritos.

4. Eric O Codificador

Esta folha de dicas é um artigo dev.to de Eric The Coder. Ele escreveu este artigo em junho de 2021 como um auxiliar de memória quando ele esquece os conceitos e a sintaxe do React.

O conteúdo desta folha de dicas não é muito profundo, mas contém muitas coisas muito básicas que outras folhas de dicas podem ter perdido. Isso inclui regras básicas de JSX, JavaScript em JSX, Lista com chave, vários detalhes de eventos de clique, and many others.

Quando se trata de gancho, esta folha de dicas inclui useState, useEffect e useRef.

Eric criou esta folha de dicas quando generation iniciante no React. Assim, mesmo as coisas mais básicas são devidamente documentadas e enfatizadas (o que outros cheatsheets perdem até certo ponto).

5. Códigos Ela

Cheatsheet do Shecodes é uma folha de dicas baseada em componentes totalmente funcional e somente de sintaxe.

Você pode conferir todos os snippets de uma só vez ou filtrá-los por categoria. Não há explicação fornecida com os snippets, então você pode usá-lo apenas para dar uma olhada rápida nas várias sintaxes.

O conteúdo é semelhante a outros websites e é fácil e rapidamente acessível, tornando-se uma ótima folha de dicas para referência rápida de sintaxe.

6. Reaja TypeScript

Finalmente, temos algo incrível para nossos desenvolvedores de TypeScript.

Reagir texto datilografado é um projeto de código aberto licenciado pelo MIT com mais de 33 mil estrelas no GitHub e muitos colaboradores incríveis para manter o projeto vivo e com alta qualidade.

Se você gosta de trabalhar em React e TypeScript, com certeza também vai adorar esta folha de dicas. Você pode acessar o conteúdo em seus native na rede Web ou GitHub Leia-me.

Todo o cheatsheet é dividido em 4 partes:

• Básico – Focado em ajudar os desenvolvedores do React a começar a usar o TS em aplicativos React.
• Avançado – Mostra e explica o uso avançado de tipos genéricos para pessoas que escrevem utilitários/funções/prop de renderização/componentes de ordem awesome e bibliotecas TS+React de tipos reutilizáveis.
• Migrando – Ajuda a reunir conselhos para migrar de forma incremental grandes bases de código de JS ou Float, de pessoas que fizeram isso.
• HOC – Compila todo o conhecimento disponível para escrever componentes de ordem awesome com React e TypeScript.

A qualidade de todo o projeto é de primeira qualidade, as explicações necessárias são fornecidas sempre que necessário e, acima de tudo, esta folha de dicas é mantida e atualizada ativamente pela comunidade.

7. Codingcheats.io

Este é outro ótimo apenas baseado em componentes funcionais Folha de dicas do React. Embora não seja excelente em design, esta folha de dicas tem um conteúdo excelente.

Todos os trechos estão disponíveis na página inicial com uma pequena explicação de cada um.

O conteúdo inclui sintaxe básica de componentes, atalhos, manipulação de eventos e 6 ganchos diferentes – useState, useEffect, useRef, useMemo, useReducer. useRetorno de chamada.

Exemplos adequados são fornecidos em cada trecho com uma breve explicação de cada um. Você deve definitivamente verificar esta folha de dicas pelo menos uma vez.

8. Ohans Emmanuel

Esta folha de dicas é o artigo da LogRocket por Ohans Emmanuel. Ao contrário de outros cheatsheets em nossa lista, este não se concentra no básico do React.

É uma folha de dicas do React Hooks que lida apenas com a explicação dos React Hooks. Ele contém sintaxe, como os ganchos funcionam e as melhores práticas a serem lembradas ao trabalhar com Hooks no React. Tudo é explicado com exemplos e o conteúdo é muito bem escrito.

Os seguintes ganchos estão incluídos na folha de dicas:

• useState
• useEfeito
• useContext
• useLayoutEffect
• useReducer
• useRetorno de chamada
• useMemo
• useRef

Como um desenvolvedor moderno do React, o conhecimento de Hooks é essencial e esta folha de dicas ajudará você a entender profundamente seu núcleo e como usá-los em sua vida diária.

Aprender React não é uma tarefa de um dia. Levará pace, mas ser consistente, investir em seu conhecimento e ser inteligente usando cheatsheets o ajudará a permanecer no jogo a longo prazo.

Desejo-lhe boa sorte em sua jornada. Se você tiver alguma dúvida, me ligue Twitter.

Confira meu weblog para mais.

Boa Codificação!