React
O que é React e pra que serve?
Apesar de muitos confundirem, o React não é um framework e sim uma biblioteca.
Tá, mas qual a diferença entre framework e biblioteca?
Framework é um conjunto de funções e módulos que resolvem vários problemas diferentes, por exemplo: o Angular resolve problemas de rotas e views ao mesmo tempo e mais uma porrada de outras necessidades... Diferentemente do React que foca em resolver o "problema" de renderização da View. Ué mas e se eu quiser usar rotas no React? — Simples, você terá que importar uma biblioteca que resolve o problema de rota.
FONTE: Palavras da Deva Laryssa Magalhães nesse artigo aqui!
React é uma biblioteca criada pelo Facebook e é usado basicamente para construir páginas web, tipo essa aqui que você está lendo esse conteúdo. O legal é que ele constroi páginas de forma declarativa, isso significa que basicamente declaramos como que a nossa página vai reagir a um estado ou a como um dado se comporta.
O que é o Virtual DOM?
Antes de falar sobre virtual DOM vamos relembrar sobre o DOM. Vimos na sessão do DOM como alterar a nossa página adicionando, alterando ou removendo os elementos dela, porém esse processo de realizar essas mudanças diretamente no DOM causa lentidão para renderizar novamente o elemento por não ser um processo muito performático.
Virtual DOM é uma técnica que o React usa pra atualizar a tela onde é construido os dados a ser apresentado na tela, ele nada mais é que um objeto virtual que representa o DOM real. Você pode ler esse artigo que explica detalhadamente todo esse processo de DOM e Virtual Dom.
Mão na massa
Para entendermos os próximos conceitos vamos criar juntas essa pequena aplicação usando React.
O que é componente?
As aplicações em React são baseadas em componentes que são pequenos blocos de códigos que podem ser reutilizados. Esses blocos são funções que podem receber dados de entrada como parâmetros, retornam um elemento React através do JSX
e no final esses são transformados no DOM Virtual e mostrados na tela através do DOM
.
Agora vamos tentar entender tudo isso através da nossa aplicação que conterá os seguintes componentes:
Componente
<Message />
que retorna um<h1>
com uma mensagem.Componente
<Figure />
que retorna um<img>
com uma imagem.Componente
<Button />
que retorna um<button>
com um texto.Existe uma lista de palavras que são reservadas do javascript que não conseguimos utilizá-las no retorno do nosso componente React, por exemplo
class
que usamos para por estilo no nosso componente é substituída porclassName
.Componente
<App />
que retorna uma<div>
com todos os componentes que criamos e na ordem que eles devem ser apresentados na tela.Por fim teremos o
index.js
que terá o método para de fato renderizar nosso componente<App/>
noDOM
e fazer com que o usuário possa visualizar nossa aplicação.
Abaixo está uma representação da nossa aplicação dividida por componentes, se olharmos com atenção podemos fazer uma analogia dos componentes que são pequenos blocos de códigos à pequenos blocos de lego que quando unimos os componentes montamos nossa aplicação, da mesma forma como conseguimos montar qualquer coisa com os pequenos blocos de lego.
1. Criando o componente<Message />
<Message />
Como já falamos, componentes são funções que retornam um elemento React
, então bora tentar criar uma função para representar nosso componente Message
.
Antes de iniciar a desenvolver nosso componente vamos ter alguns pontos de atenção, não se preocupe se não entender todos os conceitos agora, iremos entrar em detalhes sobre todos mais tarde:
Todo componente React deve iniciar com a letra maiúscula.
No retorno do nosso componente, códigos javascript só funcionam se forem envolvidos por chaves
{}
.Todo componente React precisa importar a função
React
.Todo componente deve retornar um único elemento, então fazendo uma analogia com o que aprendemos no
HTML
, o retorno de um componente React não pode conter irmãos nesse caso devemos envolvê-lo em um outro elemento, ou seja, no retorno de um componente React todos elementos tem sempre um únicopai
, veja o exemplo abaixo:
Aqui está nosso componente Message
, que nada mais é que uma função que retorna uma mensagem:
2. Usando o componente<Message />
e criando o componente <App />
<Message />
e criando o componente <App />
Beleza, já temos nosso componente Message
, agora em todas as páginas que a gente precisar mostrar essa mensagem é só importar nosso componente e usá-lo, veja o exemplo abaixo onde estamos usando ele no componente App
:
3. O que é JSX
?
JSX
?Vamos dá uma pausa na nossa aplicação para entendermos o que é JSX
.
Para construir o virtual DOM é preciso criar uma sequência de instruções pra manipular a árvore do DOM
. Construir com javascript a estrutura do HTML é um processo bem complexo, passamos por isso quando estudamos sobre a API do DOM. Por isso o time do React desenvolveu uma forma de escrever algo parecido com HTML
porém que fosse traduzido facilmente para javascript, e isso é o JSX
, ele tem uma estrutura muito parecida com HTML
mas não é HTML
, ele é convertido pra javascript que gera o virtual DOM.
Você não consegue utilizar algumas palavras que são reservadas do javascript nos componentes React, por exemplo o atributo class
no JSX a gente usa a palavra className
porque no javascript class
é reservada pra criação de classes. Veja nesse link todas as palavras que são reservadas no javascript e qual as palavras que usamos para representá-las no React.
Usamos o JSX
no método return
do nosso componente e sempre que for preciso usar código javascript dentro do JSX
, o javascript precisa está envolvido por chaves{}
. É comum usamos javascript misturado com JSX
pra retornarmos por exemplo valores dinâmicos usando variáveis, não se preocupe se até agora as coisas não estão fazendo muito sentido, veremos tudo isso na criação da nossa aplicação.
Vejamos no exemplo abaixo um componente com e sem o JSX:
Aqui vai algumas respostas dos itens que pontuamos na sessão: Criando o componente<Message />
Todo componente React deve iniciar com a letra maiúscula.
1.1 Esse é a forma usada para identificar um elemento React e usar a função
createElement()
para criar um elemento React.Todo componente deve retornar um único elemento.
2.1 É assim que os parâmetros da função
createElement()
é definido, você pode brincar aqui nesse link e verificar como ficaria complexo a criação de componentes React sem o uso doJSX
No retorno do nosso componente, códigos javascript só funcionam se forem envolvidos por chaves
{}
.3.1 Essa é a forma que a função
createElement()
usa para diferenciar javascript de simples textos.
4. Usando o ReactDOM.render()
ReactDOM.render()
Até o momento só declaramos alguns componentes porém ainda não conseguimos fazer com que os dados de fato apareça na página. Pra isso, devemos usar o método ReactDOM.render()
que renderiza um elemento do React no DOM, você pode ler mais sobre ReactDOM nesse link.
O método ReactDOM.render()
recebe dois parâmetros, o primeiro é o conteúdo que vai ser que vai ser apresentado na página e o segundo é onde no DOM
esse conteúdo será inserido para então ser de fato apresentado na página.
Aplicando a teoria acima na nossa aplicação, vamos usar o método ReactDOM.render()
no arquivo index.js
que é o primeiro arquivo a ser executado quando uma aplicação é inicializada, veja como utilizamos a chamada no exemplo abaixo:
Esse elemento que estamos acessando através do id
está num arquivo chamado index.html
e esse é o único aruivo HTML
que temos na nossa aplicação e é nele que é inserido todos os componentes que criamos até agora.
Veja um exemplo da parte no nosso index.html
onde temos a o id
que estamos acessando no código acima:
5. Criando o component
Continuando no desenvolvimento da nossa aplicação vamos criar o componente <Figure />
que nada mais é que uma função que retorna uma imagem, veja abaixo a estrutura do nosso componente:
Só um ponto de atenção de como a gente usa imagens no React
, ela precisa ser importada recebendo um nome, que seria uma variável que vai representar o caminho da imagem, depois usamos essa variável
no atributo src
da tag img
. Note que o valor repassado para o atributo deve ser entre chaves{}
, já que se trata de um conteúdo javascript
sendo utilizado dentro do JSX
.
6. O que é Props
no React?
Props
no React?Props
é a abreviação pra propriedades e são representadas por um objeto. É a forma que usamos para compartilhar informações entre os componentes React. Para entender melhor esse conceito vamos criar o componente <Button />
da nossa aplicação:
Agora vamos usar esse componente que criamos lá no nosso <App />
Alterando nosso componente <Message />
para receber a prop name
:
Se você prestar atenção vai ver que usamos as props da mesma forma que atributos nas tags HTML
, podemos dá qualquer nome para prop, mas o ideal é que seja algo que faça sentido com o que essa prop vai representar na sua página. No caso da nossa aplicação teremos três botões e cada um vai apresentar um nome de uma tecnologia. Essa é a forma que podemos passar dinamicamente valores entre os nossos componentes, se precisarmos usar esse mesmo botão em alguma outra página com o valor de Angular por exemplo, poderíamos usá-lo assim: <Button tech="Angular" />
e magicamente teríamos um botão com um valor diferente na nossa página.
Podemos acessar a prop no componente recebendo elas por parâmetros nos componentes de função ou através do this.props
no componente de classe. As props não se limitam a receber apenas strings, podemos passar qualquer tipo de valor pra ela, como array, objeto, função, número ou seja, qualquer valor que precisarmos compartilhar.
Props possuem valores estáticos que são passados hierarquicamente do "pai" para o "filho" e não são alterados. No nosso exemplo o componente pai seria o <App />
e não conseguimos passar um dado do componente <Message />
para ele por exemplo.
7. Componente de função x componente de classe?
Até agora todos os componentes que criamos são componentes de função e tem um motivo por trás de tudo isso, se você prestar atenção, até agora só criamos componentes que mostram algo na tela, algo que nunca muda, algo que o usuário não interage escrevendo, clicando ou tentando alterar qualquer coisa na nossa aplicação. Esse é a responsabilidade de um componente de função, ele é usado pra criar componentes estáticos e que não tem alteração após apresentar os dados na página.
Os componentes de função também são chamados de Stateless Components, ou componentes sem estado. Os componentes de classe também são chamados de Stateful Components, ou componentes com estados.
O que muda num componente de classe?
Componente de classe é representado em javascript por uma classe, ele deve estender Componente
do pacote React
. Quando criamos um componente de classe temos acesso a vários métodos da biblioteca React, sendo que somente o método render()
é obrigatório.
Componentes de classe é útil quando precisamos alterar algo na página após o conteúdo ser apresentado. No nosso exemplo, vamos realizar as seguinte mudanças:
Mudar o componente
<App />
para que agora seja um componente de class.Mudar o componente
<Message />
para que agora ele receba umaprop
que vai substituir o nome da tecnologia, a mensagem agora ficaria:Hello {props.tech}
.Adicionar um estado no componente
<App />
que vai gerenciar a mudança da tecnologia passada na mensagem.Adicionar uma função no componente
<Button />
que vai receber a seguinte ação: quando o usuário clicar no botão a mensagem mostrará:Hello + tecnologia do botão clicado
.
Transformando nosso componente <App />
em um componente de classe:
8. O que é state
o React?
state
o React?Diferente das props
, o state
ou estado
não é repassado ao componente e sim configurado dentro dele. Pense no estado como as propriedades de nossa classe que devem ser armazenadas para renderizarmos o componente da forma correta. Os estados só podem existir em componentes de classe e seus valores podem ser alterados, essas mudanças de valores são gerenciados pro vários métodos disponíveis em um componente do tipo classe e são guardados dentro da classe em um objeto usando essa sintaxe state= {chave: 'valor'}
.
Vamos tentar aplicar esse conceito à nossa aplicação, vamos alterar o componente <Message />
para receber a prop name, e o valor dessa prop será repassado pelo state da classe <App />
, ficou meio confuso, mas tente entender as palavras acima examinando as mudanças no código abaixo:
Para acessar os valores do nosso estado usamos a variável this.state.nome_da_propriedade
, no nosso exemplo acima, criamos uma propriedade chamada value
(que poderia ser qualquer nome) e essa propriedade recebe o valor React
, então em qualquer parte do código que eu precise usar esse valor eu posso acessá-lo assim: this.state.value
9. Alterando o estado do nosso componente <App />
<App />
Estamos quase no final da construção da nossa aplicação, o que precisamos fazer é:
Quando um botão for clicado
A mensagem irá alterar para
Hello + o nome do botão clicado
Então se clicarmos em
JSX
A mensagem será:
Hello JSX
Para fazer a ação acima vamos realizar as alterações abaixo no nosso componente <App />
:
Criar uma função que recebe como parâmetro o valor do botão clicado;
Dentro dessa função alterar o valor do estado
value
, que agora receberá o valor desse botão;Passar essa função como prop para o componente
<Button />
;Usar essa prop no evento
onClick
do componente<Button />
;
O React não permite alterar o estado de um componente da mesma forma que alteramos uma variável comum, isso porque o estado é imutável, ou seja, ele nunca deve ser alterado e sempre deve ser sobreposto, pra isso o React tem a função this.setState({ propriedade: valor})
, onde a propriedade é nome da propriedade que queremos alterar no nosso estado e o valor é a nova informação que queremos repassar para nossa propriedade.
Aplicando o conceito acima no nosso componente <App />
:
Chamando a função no <Buttom />
através da nova propriedade:
Prontinho, agora temos uma pequena aplicação com os conceitos básicos do React, agora sua atividade é criar qualquer coisa usando os conceitos aplicado aqui para praticar tudo o que foi passado, você pode acessar o código completo aqui
Listas e keys
no React
keys
no ReactAinda olhando pra nossa aplicação, o componente <Button />
é chamado 3x no componente <App />
, vamos fazer as alterações abaixo pra aplicar os conceitos de listas no React:
Criar uma nova propriedade no estado da classe lista que vai receber um array de tecnologias
Usar o método
map
do javascript pra interar esse array retornando pra cada item um componente<Button />
que receberá o valor do array como valor da proptech
.
Quando usamos uma lista no retorno de componente React é necessário passar uma key
para cada item da lista. Ela é um atributo string especial que ajuda o React a identificar qual item da lista foi alterado, adicionado ou removido. A key
deve ser atribuída ao item dentro do array que está sendo manipulado, para dar uma identidade estável aos elementos e ela deve ser única.
Vejamos abaixo como ficaram essas alterações:
Ciclos de vida de um componente
Podemos dizer que um ciclo de vida de um componente inicia quando ele é montado na tela, sofre algumas alterações e depois ele é desmontado. Um componente de classe possui vários métodos especiais para gerenciar o ciclo de vida de um componente, não vamos entrar em detalhes sobre eles nesse tutorial mas você pode ler mais sobre nesse artigo..
Abaixo uma imagem dos métodos utilizados para manipular o ciclo de vida de um componente React.
O que é React Hooks?
Hooks são um conjunto de novas funcionalidades adicionadas ao React a partir da versão 16.8. Uma das novidades é que agora conseguimos manipular estados em componente de função usando Hooks
e de uma forma mais simples do que o que vimos acima nos componentes de classe.
Os Hooks são classificados em básicos e adicionais da seguinte forma:
Hooks básicos:
useState
useEffect
useContext
Hooks adicionais:
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect
Transformando nosso componente <App />
em um componente de classe e usando o useState
<App />
em um componente de classe e usando o useState
Veja abaixo como ficou nosso componente usando hooks
, aqui está o novo código com as alterações.
Referências
Last updated