Dev JS para React - Pt 3
Fala galera, bora para a terceira parte.
⚠️ Se você não viu a segunda parte, comece por aqui ⚠️
Hoje vamos falar sobre como passar dados entre componentes utilizando o props.
E para isso vamos utilizar nosso último código e duplicar o post que exibimos
<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 >)}function BodyComponent() {return (<div class="body-component"><PostComponent/><PostComponent/></div >)}ReactDOM.render(<BodyComponent/>, instagramPostApp)</script></body></html>
Perfeito, agora se você abrir esse arquivo no browser você deve visualizar o seguinte:
Porém isso esta estranho correto, pois agora você tem dois posts on tudo esta igual, logo precisamos enviar dados para esses componentes em ordem que possamos construir algo mais dinâmico.
No HTML os elementos têm atributos que podemos utilizar para passar informações que alteram o comportamento desses elementos. Por exemplo, alterar o atributo src de um elemento <img> altera a imagem exibida. Alterar o atributo href de uma tag <a> altera o destino.
Da mesma forma, você pode passar informações como propriedades para componentes React. Estes são os tão chamados props.
Em nosso componente "PostComponent", podemos passar um prop de username personalizado para o componente Username, assim como você passaria atributos elementos HTML:
<!-- ... --->function AvatarImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/256-512.webp" width="75" />}function Username({username}) {return <span><strong>{username}</strong></span>}<!-- ... --->function PostComponent(props) {return (<div class="post-component"><div class="post-header-component"><div class="user-avatar"><AvatarImage /></div ><div class="user-name-description"><Username username={props.username} /><UserDescription /></div ></div ><div class="post-body-component"><PostImage /></div ><div class="post-description-component"><Username username={props.username} />: <PostDescription /></div ></div >)}function BodyComponent() {return (<div class="body-component"><PostComponent username="Jose da Silva" /><PostComponent username="Roberto Pereira"/></div >)}ReactDOM.render(<BodyComponent/>, instagramPostApp)<!-- ... --->
Parabéns você criou seu primeiro "Componente com props" em React.
E agora como você já está começando a caminhar sozinho em React, vou propor um desafio.
Vamos lá.
Neste modelo que vou deixar aqui no github você precisa definir um Username padrão para quando nosso componente não receber uma prop, e aqui está tudo liberado, pode criar uma função para validar, pode usar ternário só não pode desistir.
E se você quiser testar ainda mais seus conhecimentos e andar aquela milha extra, que tal passar todos os dados para todos os componentes através de props.
E se você quiser testar ainda mais seus conhecimentos e andar aquela milha extra, que tal passar todos os dados para todos os componentes através de props.
Depois comenta aqui com sua solução no github que eu dou uma estrelinha.
Por hoje é só pessoal, espero que tenham gostado, na próxima parte vamos criar algumas iteração por listas, para criar mais coisas com menor repetição de código.
Comentários
Postar um comentário