Aqui vou apresentar um guia prático sobre React JS, o famoso “framework onipresente”, como a comunidade gosta de chamar, por está tão presente em aplicações do nosso dia-a-dia.
Mas antes de colocar a mão na massa e partir para o código em qualquer framework ou biblioteca precisamos saber o que é, o que ele veio resolver, como ele funciona, seus benefícios, o que precisamos para começar a “codar” e etc.
Uma frase bem conhecida na comunidade React e presente no próprio site é “Learn Once, Write Anywhere” que no português é “aprender uma vez, escrever em todo lugar”.
Interessante né ? Com certeza chama muita atenção e você vai entender que é bem isso mesmo.
Esse artigo tem como principal função, como o próprio nome já diz, lhe propor um guia para você sobre essa ferramenta, sem mais delongas vamos ao que nos interessa.
10 livros de programação que vão mudar sua carreira
O que é realmente o React JS?
Em poucas palavras, é uma biblioteca JavaScript para criação de interfaces para o usuário, desenvolvida e mantida pelo Facebook, sua primeira release saiu em 2013.
É uma lib open-source com mais de 1k de colaboradores ativos no GitHub.
Ele está presente no nosso dia-a-dia mais do que você imagina, em empresas grandes como Facebook, Instagram, AirBnB, NFL, Yahoo e muito mais. O mercado para essa biblioteca só cresce.
Sem sombras de dúvida uma das características que esta fazendo a comunidade adotar o React para o desenvolvimento de suas aplicações cada vez mais é a facilidade de aprendizagem.
A forma como seus códigos são declarativos, facilitando na visualização e a manutenção do código.
>>Leitura Recomendada:
Leia nosso guia de introdução à linguagem JavaScript
O que o React JS veio resolver?
Se formos parar pra pensar bem, a principal função do React é organizar o conteúdo que será mostrado ao usuário.
Sendo assim, ele veio para resolver problemas da camada visual, facilitando trabalhar com componentes interativos e reutilizáveis para interfaces de usuário.
Como o próprio criador do React diz: é uma biblioteca para criar interfaces visuais (UI).
JSX
É uma extensão do JavaScript muito semelhante a uma string ou um pedaço de HTML.
O React não obriga o uso de JSX, porém ele nos auxilia muito com o modo visual, o que nos permite trabalhar com o código dentro do JavaScript.
Sem sombra de dúvidas é necessário utilizar o JSX durante o desenvolvimento com React, ele nos permite trabalhar com if, for, atribuir trechos de código a variável, passar por funções e muito mais.
Pegamos alguns exemplos do site do React de código com JSX e sem JSX pra você entender melhor os benefícios que eles nos traz.
Sem JSX
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, { toWhat: 'World' }, null),
document.getElementById('root')
)
Com JSX
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
)
Ele vai muito além disso, é realmente bem poderoso.
Se você quiser se aprofundar no assunto, no site oficial do React tem uma página que fala só sobre JSX, vale a pena dar uma olhada lá depois, mantenha essa curiosidade ativa 😃
>>Leitura Recomendada:
Meus desafios e evolução como fullstack
DOM & DOM Virtual
Antes de explicarmos o que é o famoso DOM Virtual do React, precisamos entender primeiro o que é o DOM.
O Modelo de Documento por Objetos (do inglês Document Object Model), como o próprio nome já diz, é uma representação do documento.
Assim que a página é carregada, o navegador cria o HTML DOM.
O documento é construído na estrutura de uma árvore, e seus objetos são os nós presentes nessa estrutura.
Quando um elemento precisa ser atualizado, você tem a opção de percorrer toda árvore ou procurar por um nó específico.
O problema é que o DOM não foi criado pra isso e ficar utilizando a API do DOM para modificar dados direto, em documentos grandes, nos causaria um problema, custaria caro.
O DOM Virtual é um conceito que já existia, porém depois do React ficou bem mais conhecido.
Ele atua como uma cópia do DOM, que pode ser atualizada com frequência sem nos acarretar problemas, e sem utilizar a API do DOM original.
Depois que todas as alterações — que devem ser persistidas no DOM — são finalizadas, ela será feita no DOM original da melhor maneira possível, nos evitando custos desnecessário, de maneira otimizada.
>>Leitura Recomendada:
Leia nosso primeiro artigo sobre Flutter, o framework da Google.
Componentes do React JS
Um componente no React tem como finalidade separar as preocupações, acoplando cada vez mais as funcionalidades, e retornar um elemento React.
É necessário entender o que é e como funciona um componente para compreender melhor o funcionamento do React e aproveitar de todos seus benefícios.
Os componentes irão representar a parte da interface do usuário. Existem dois tipos de componentes, são eles: Stateless e Stateful.
Stateless
São componentes que não tem estados e podem receber propriedades.
As propriedades podem ser passadas durante sua declaração, pelo componente pai ou através do uso da arquitetura flux. Ele também pode passar propriedades para seus componentes filhos.
Stateful
É bem semelhante ao Stateless. Sua principal diferença é que ele possui um objeto de estado, apenas o componente onde o estado está presente que tem acesso e controle em cima dele.
Em resumo: o Stateless possui apenas um objeto de propriedades enquanto o Stateful possui um objeto de propriedades e um de estado.
Deixo aqui uma simples tabela pra você entender melhor o conceito de propriedades e estado de um componente e entender melhor quando usar cada um.
| PROPS | STATE |
| Imutável | Mutável |
| Uma melhor performance | Escopo local |
| Pode ser passado para componentes filhos | Pertence apenas ao componente |
| Mudanças de estados podem ser assíncronas | |
| Podem ser passado como propriedades para os componentes filhos. |
>>Leitura Recomendada:
Componentes React – componentes de classe e funcional sem estado
Skills necessária para começar com React JS
Antes de começar você deve ter um conhecimento sólido em algumas skills, para que você utilize a biblioteca ao seu favor e não se torne refém dela.
Sempre vai haver momentos em que você vai precisar de conhecimentos por fora da biblioteca que você está usando, independente de qual for.
Então se você quiser entrar nesse mundo, você precisa ter conhecimentos sobre HTML, CSS e JavaScript.
A base para iniciar com React é saber essas três peças fundamentais.
Ela é uma biblioteca simples, uma semana de estudo ou menos você entende como funciona e o resto depende da sua imaginação.
Existem muitos conteúdos gratuitos no internet sobre essas 3 bases, mas se eu pudesse lhe indicar alguma seria o curso grátis na plataforma da Rocketseat.
Ferramentas úteis para React JS
Existem muita ferramentas atualmente que podem lhe ajudar durante desenvolvimento com React, sendo eles libs externas, plugins, monitoramento de eventos e muitos outros.
Irei listar algumas das que uso no meu dia-a-dia durante o trabalho que trazem muita melhoria para meu código, legibilidade e vários outros benefícios.
Mas antes de sair usando essas ferramentas, é essencial que você saiba trabalhar com React sem elas.
Styled Components
CSS-in-JS é uma abordagem de estilo que abstrai o modelo CSS para o nível do componente, em vez do nível do documento.
Redux
É uma simples biblioteca open-souce que nos auxilia a trabalhar com um estado compartilhado no aplicativo, seu uso não é exclusivo apenas para Rect, sendo usado também com Angular, Vue e etc.
React DevTools
É uma extensão do Chrome para a biblioteca React. Ela permite que você inspecione as hierarquias do componente React nas ferramentas do desenvolvedor.
Você consegue ver propriedades, modificar os estados e várias outras coisas. Ela é particularmente útil quando precisamos debugar algo.
Dev Docs
É um aplicativo muito show para desktop. Ele nos permite pesquisar por documentação de várias linguagens, bibliotecas, frameworks, ferramentas e muito mais, tudo em um mesmo canto, nos poupa trabalho e tempo e é bem organizado os resultados.
Reactotron
É um outro app desktop que nos auxilia a inspecionar o React, é uma mão na roda quando trabalhamos com Redux, e se encaixa perfeitamente quando integrado com aplicações React Native.
É isso galera, qualquer dúvida ou sugestão podem comentar aqui ou me chamar nas redes sociais. Espero que tenham gostado.
Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. São mais de 1000 vagas abertas, inclusive Vagas React e Vagas React Native.
