ReactJS para iniciantes — Criando um clone do instagram

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

Photo by Nomad Coders

Pré-requisito

O que é um componente

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Stateless Components

Componente errado: ele retorna 2 root elements, uma div e um span
Componente correto, retornando apenas 1 root element (div) com 2 child elements (div e span)

Props — parâmetros do componente

Criando seu primeiro componente

Resultado final

Mãos à obra

Marcação básica do componente
  • 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 />
src/App.css

Resultado final

Nosso primeiro componente em ReactJS

Código completo com Redux

--

--

Engineering Manager

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store