O que eu preciso saber antes de iniciar no React?

Essa é uma dúvida muito comum de quem já conhece o básico de HTML, CSS e JavaScript e quer iniciar em um Framework, neste caso o React. Então se você é uma dessas pessoas vem comigo que neste post vou te mostrar o que você precisa saber inicialmente para iniciar seus estudos em React.

---

HTML, CSS

Você precisa está muito familiarizado em escrever código HTML e CSS, pois essa é a base para construir qualquer aplicação web. Então antes de avançar para qualquer framework recomendo que você se certifique de dominar HTML e CSS para não sofre lá na frente se perguntando qual tag é mais semântica ou como posicionar uma <div/> (risos).

JavaScript

Após dominar o HTML e o CSS você naturalmente precisa aprender e praticar o JavaScript. O React ao contrário do que muitos pensam não é um framework, mas sim uma biblioteca JavaScript para construção de interfaces de usuário. E para ajudar você que quer iniciar no React, vou listar alguns desses assuntos super importantes que você precisa dominar e dividir o resto da seção com os tópicos mais importantes para que você possa estudar exaustivamente até conseguir desenvolver uma primeira aplicação React com tranquilidade.

• Uso de var/let/const
• Escopo de blocos
• Classes
• Objetos e Arrays
• Fetch, async/await e Promises
• EcmaScript6

Functions

Atualmente a forma mais comum de escrever componentes React é com o uso de Funções, os chamados Functions Components. No React podemos usar funções como componentes. Essas funções podem receber parâmetros ou não e basicamente renderizam um componente na tela.

Um exemplo de como definir um componente React escrevendo uma função:

function Welcome() {
  return <h1>Welcome</h1>;
}

Então é super importante você conhecer e dominar funções, pois será muito comum trabalhar com elas no dia-a-dia como desenvolvedor React.

Ainda sobre funções é importante que você saiba também:

• Arrow functions
• Escopo, fluxo e binding
• Hoisting
• Higher Order Components

Destructuring e Spread Operators

Lembra que falei que componentes podem receber parâmetros ou não? Olha só como isso funciona:

//sem destructuring
function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

Esse componente React recebe um parâmetro chamado props que pode ser passado de um componente Pai. Dessa forma, no return do componente eu estou renderizando um texto que dá as boas vindas para determinado nome que veio como propriedade (sacou as props agora?).

Com o destructuring podemos ter uma forma mais direta de acessar essas propriedades, deixando seu código mais fácil de ler. Por exemplo:

//com destructuring
function Welcome({name}) {
  return <h1>Welcome, {name}</h1>;
}

OK, já entendi o destructuring, mas e o spread operator?

Imagine que você tenha várias propriedades sendo recebidas em seu componente e essas propriedades estejam vindo como um objeto. Contudo você quer apenas uma delas e não quer separar as outras. Você pode utilizar o spread operator para isso. Por exemplo:

function Welcome(props) {
  const { name, ...others } = props;
  return <h1>Welcome, {name}</h1>;
}

No exemplo acima estou separando a propriedade name mas mantendo todas as outras no objeto others.

Template Literals

Provavelmente você aprendeu a concatenar strings utilizando o operador +, mas com este recurso do ES6 a forma antiga vai parecer realmente ultrapassada. Por exemplo, para concatenar valores de variáveis dentro de strings é só utilizar uma notação de aspas invertidas e escrever a variável assim : ${variável}. Exemplo:

function Welcome() {
  const name = "John Doe";
  return <h1>`Welcome, ${name}`</h1>;
}

Map, filter, reduce

Você vai utilizar muito esses métodos do JavaScript para trabalhar com arrays no React. Se quiser, por exemplo, retornar items da maneira que quiser podes usar o map, se quiser filtrar informações baseadas em algum parâmetro filter, ou realizar operações em cima de um conjunto de valores para retornar somente um já trabalhado, pode usar o reduce.

imports e exports

Por fim mas não menos importante, você deve entender bem como trabalhar com imports e exports. No React precisamos importar coisas como imagens, arquivos css, módulos e até outros componentes que fazem parte da interface de usuário. Então só para que você fique curioso e queira saber mais, existem duas formas comuns de exportar os arquivos e elas apresentam vantagens e desvantagens. Mas vou deixar essa para você pesquisar hehehe.

Conclusão

Espero que este pequeno guia te ajude a organizar melhor seus estudos, direcionando-os para o objetivo que é compreender e aprender como utilizar o React para desenvolver suas aplicações.

Até a próxima!

Fontes:

-O que saber sobre JavaScript antes de começar no React
-Documentação React
-Fundamentos JavaScript antes de aprender React