Dev JS para React - Pt 2
Fala galera, bora para a segunda parte.
⚠️ Se você não viu a primeira parte, comece por aqui ⚠️
Hoje vamos falar sobre como construir uma interface através de componentes.
E para passar uma visão bem simples do que seriam componentes em uma UI vou utilizar um POST do instagram de modelo para explicar isso.
Olha na imagem acima conseguimos perceber que um post do instagram pode ser um componente UI que possui os seguintes elementos:
- Componente Post
- Avatar Image
- Username
- User Description
- Post Image
- Post Description
Ou seja um componente é como se fosse uma peça de lego, que é criado por diversas outras peças.
E agora que tal colocarmos um pouco de mãos na massa para entender no código.
Primeiro vamos abrir o arquivo que criamos no último post e vamos utiliza-lo para que se pareça com o de baixo.
Obs: Eu coloquei um css apenas para dar um certo estilo mínimo.
<html><head><style>.post-component{text-align: center;}.post-header-component{display: flex;justify-content: center;}.user-name-description,.post-description-component{padding-left: 9px;padding-top: 9px;}</style></head><body><div id="instagramPostApp"></div><script src="https://unpkg.com/react@17/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><!-- Babel Script --><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/jsx">const instagramPostApp = document.getElementById("instagramPostApp")function AvatarImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/256-512.webp" width="75" />}function Username() {return <span><strong>Nome do Usuário</strong></span>}function UserDescription() {return <p><small>Lorem ipsum summet</small></p>}function PostImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/istockphoto-1226328537-170667a.jpeg" />}function PostDescription() {return <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus...</span>}function PostComponent() {return (<div class="post-component"><div class="post-header-component"><div class="user-avatar"><AvatarImage /></div ><div class="user-name-description"><Username /><UserDescription /></div ></div ><div class="post-body-component"><PostImage /></div ><div class="post-description-component"><Username />: <PostDescription /></div ></div >)}ReactDOM.render(<PostComponent />, instagramPostApp)</script></body></html>
Perfeito, agora se você abrir esse arquivo no browser você deve visualizar o seguinte:
Parabéns você criou seu primeiro "Componente" em React, mas novamente você deve estar se perguntando
No React, componentes são funções (functions), que estão dentro de nossa tag script:
O QUE EU FIZ?
Vou explicar
No React, componentes são funções (functions), que estão dentro de nossa tag script:
E como vocês podem ver em nossa função "PostComponent" ela retorna elementos de nossa interface, e a parte legal é que podemos retornar JSX de nossa função.
E para renderizar nosso componente no DOM, podemos passar ele como primeiro argumento para o ReactDOM.render()
Importante:
- Todo o componente read tem que possuir a primeira letra maiúscula, para distinguir ele de HTML e JS
- No React utilizamos os componentes da mesma maneira que utilizamos tag HTML, utilizando os sinais < >
- Apps React geralmente incluem mais conteúdo do que um único componente. Ou seja você pode mesclar componentes React dentro uns dos outros como faria com elementos HTML normais, foi isso que fizemos colocando todos os outros componente dentro de nosso componente "PostComponent".
<!-- .... -->function AvatarImage() {return <img src="https://posts-decripta..." width="75" />}function Username() {return <span><strong>Nome do Usuário</strong></span>}function UserDescription() {return <p><small>Lorem ipsum summet</small></p>}function PostImage() {return <img src="https://posts-decripta..." />}function PostDescription() {return <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus...</span>}function PostComponent() {return (<div class="post-component"><div class="post-header-component"><div class="user-avatar"><AvatarImage /></div ><div class="user-name-description"><Username /><UserDescription /></div ></div ><div class="post-body-component"><PostImage /></div ><div class="post-description-component"><Username />: <PostDescription /></div ></div >)}ReactDOM.render(<PostComponent />, instagramPostApp)<!-- .... --
Por hoje é tudo pessoal, mas no próximo post vamos criar as coisas mais dinâmicas falando um pouco sobre como passar dados entre componentes utilizando o props.
Comentários
Postar um comentário