Capa por Caspar Camille Rubin no Unsplash

Meu primeiro contato com React, na Semana de Informática da UFV, foi uma experiência traumática. Eu não entendia nada, mesmo sabendo programar. As linhas de código não faziam sentido. Era Redux, React Router, Classes, ComponentDidIsso, ComponentDidAquilo. Levei mais de 1 ano pra ter coragem de tentar aprender novamente.

Pelo que tenho visto no Twitter e em várias comunidades, as dificuldades de outras pessoas são as mesmas que eu tive. Então, para evitar que enfrentem a mesma dificuldade que eu, vamos ao que interessa.

Sumário

• HTML e CSS
• Javascript
• Programação Funcional

HTML e CSS

Parece simples, né? Mas saber HTML e CSS faz muita diferença. Conhecer qual o propósito de cada elemento que pode ser usado num código HTML impacta diretamente na qualidade da sua aplicação. Um HTML e CSS bem construído impactam diretamente na Acessibilidade, SEO, legibilidade e experiência do usuário. Usar divs(ou tables 😬) está longe das melhores práticas.

Onde encontro conteúdo?

• W3Schools - HTML
• W3Schools - CSS
• HTML.com
• LearnLayout - CSS

Javascript

Esse aqui é indispensável. Quando comecei a aprender React, eu não sabia Javascript, então tive muita dificuldade em entender a sintaxe, funções anônimas, os problemas com tipos e alguns operadores. Se eu soubesse JS antes de tentar aprender React, esse processo certamente teria sido bem mais simples e menos traumático.

Do meu ponto de vista, os principais pontos da linguagem são:

• AJAX (Fetch, async/await e Promises)
• Spread Operator
• Strict equality vs Loose equality
• Entender como "undefined" funciona
• Object e Array

Se tiver conhecimentos sólidos sobre o que citei, provavelmente você não terá grandes dificuldades no seu aprendizado.

Onde encontro conteúdo?

• FreeCodeCamp
• CodeAcademy
• Learn JavaScript

Programação Funcional

A partir da versão 16.8 o React migrou a criação de componentes para funções, dando o suporte ao controle de estados e todo o ciclo de vida do componente usando funções.

Nas versões anteriores, os componentes eram declarados como classe, o ciclo de vida era gerenciado através de métodos embutidos(componentDidMount,componentDidUpdate, etc) e os estados eram controlados através de atributos e métodos.

Com a nova versão, é possível controlar todo o componente usando apenas funções. Além disso, foi criada também a "Context API", que veio para suprir a necessidade de uso do Redux para controlar estados "globais" em uma aplicação.

Onde encontro conteúdo?

• Programação Funcional para Iniciantes - Training Center
• O que é programação funciona e qual a sua importância - Fellipe Couto
• Fundamentos da programação funcional - Paula Vaz

Conclusão

Os 3 tópicos acima não necessariamente cobrem tudo o que você precisa saber para entender como o React funciona, mas eles podem te dar um bom direcionamento para aprender a usar essa biblioteca que revolucionou o desenvolvimento front-end. Boa sorte nos seus estudos!

Gostou deste artigo? Deixe suas reações e me siga em outras redes: Twitter | Instagram | Youtube.

Até o próximo artigo!👋🏽