Neste post introdutório vou explicar um dos conceitos básicos do React JS, os famosos componentes.
Pré-requisito
Se você nunca teve contato com React, sugiro ler o post do Matheus Clemente, que explica como instalar o React e deixar tudo pronto para criar um app!
O que é um componente
A definição do site oficial do React para um componente é a seguinte:
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Componentes são basicamente funções que recebem parâmetros — no caso do React chamamos de props — e estas retornam elementos do React.
Construir uma interface utilizando componentes possibilita a reutilização do código e a manter o padrão na interface do App.
Existem diversos tipos de componentes no React. Neste post vou focar no mais simples deles, os Stateless Components.
Stateless Components
Este tipo de componente é extremamente simples. Como disse anteriormente, ele é uma função que retorna um elemento do React.
Ao criar componentes você precisa respeitar uma regra básica: O componente deve retornar apenas 1 tag na raiz, ou seja:
Isso está errado:
Como pode ver acima, este componente retorna 2 root elements, uma div e um span. Isso não é possível no React.
O correto é retornar apenas um elemento root e dentro dele você pode colocar quantos elementos quiser.
Sendo assim podemos refatorar o componente da seguinte forma:
Props — parâmetros do componente
Props são os parâmetros que o componente recebe para fazer alguma coisa.
No exemplo acima colocamos a URL e a legenda da imagem hardcoded no componente, o que não é muito interessante porque assim não podemos reutilizar o componente.
Para resolver este problema passamos estes parâmetros como Props.
Criando seu primeiro componente
Agora que você já sabe o que é um componente no ReactJS vamos exercitar os conhecimentos adquiridos acima e criar um do zero!
Mãos à obra
Abra o código do projeto que você criou seguindo o post do Matheus e crie uma nova pasta chamada Components, dentro de src, e dentro desta pasta crie o arquivo Photo.js
Neste componente vamos colocar a marcação para renderizar uma foto parecida com a do instagram.com
Agora dentro do arquivo src/App.js precisamos importar este novo componente. Para isso, abra o arquivo e deixe-o com o código abaixo.
Vamos entender o que aconteceu.
- Adicionamos a linha import Photo from ‘./Components/Photo’; para importar o componente que criamos acima;
- Alteramos todo o conteúdo que estava dentro da div App com o novo componente, <Photo />
Se você observar, a página ficou toda branca. Calma, é isso mesmo. Agora precisamos criar algumas marcações no componente para que ele comece a fazer sentido.
O primeiro passo adicionar uma propriedade para receber a URL da imagem.
Vamos criar uma constante com um endereço fixo no App.js e passar esta propriedade para o componente.
Se deu tudo certo, uma foto deveria estar aparecendo na sua tela! Estamos progredindo.
Agora vamos incrementar o componente de foto colocando mais informações.
Além do endereço da imagem precisamos do nome do usuário, link e foto do perfil.
Para isso vamos criar uma nova estrutura para mostrar estes dados.
Para deixar ele mais apresentável, deixei o CSS pronto para não perdermos tempo. Copie e cole dentro do seu arquivo src/App.css
Agora precisamos mudar as props passadas para este componente, então seu arquivo App.js deve ficar assim:
PS: Não vou entrar em detalhes, mas neste arquivo passamos a utilizar o Spread Operator (<Photo {…imageData} />), caso não saiba como ele funciona, dá uma olhada aqui.
Resultado final
E aí, deu certo?
Se você nunca teve contato com React sei que é muita coisa pra entender.
Tente agora colocar algumas funcionalidades, como curtir e comentar na foto!
Código completo com Redux
Criei um repositório com este exemplo funcionando com React e Redux, se quiser se aprofundar ainda mais, da uma olhada.
