Padrões para construir componentes com React

O que é um componente

De acordo com o reactjs.org, “componentes permitem que você quebre a interface em pedaços independentes e reutilizáveis, e permitem vários níveis de isolamento destes componentes”.

npm install react

Um container faz a requisição para obter os dados e renderiza seus sub-componentes, e é isto” — Jason Bonta

O azul no diagrama acima representa o container component e em cinza o presentational component.
Componentes de apresentação recebem dados e callbacks somente do parâmetro props, que pode provê dados para o container ou o componente pai.
O azul representa o componente de apresentação no React e o cinza o container. Juntos, container e componentes de apresentação encapsula a lógica para os componentes envolvidos.
Como você pôde ver, eu removi a parte de apresentação da classe Greeting para um componente funcional sem estado. Claro, este é um exemplo simples — para apps mais complexas, isto é fundamental.

Com o Gitpay você pode trabalhar contribuindo com um projeto open source construído com o React. Veja nossas issues, cadastre-se na plataforma e veja as tarefas disponíveis para começar a criar soluções com o React , aprender e ser recompensado!

--

--

Citizen Scientist and Software Engineer, looking for the limits beyond mind and machine exploring the world

Love podcasts or audiobooks? Learn on the go with our new app.

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