ReactJS para iniciantes — Criando um clone do instagram

Conceitos básicos de React para quem está começando

Hugo Dias
4 min readMay 25, 2018
Photo by Nomad Coders

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:

Componente errado: ele retorna 2 root elements, uma div e um span

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:

Componente correto, retornando apenas 1 root element (div) com 2 child elements (div e span)

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!

Resultado final

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

Marcação básica do componente

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

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

Nosso primeiro componente em ReactJS

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.

--

--

Hugo Dias
Hugo Dias

No responses yet