O conteúdo aqui apresentado é para exemplificar como no react o state dos componentes são passados para os componentes filhos.
Existe um video explicando passo a passo sobre o conteúdo desse repositório.
Esse código é apenas para fins educativos e foi formatado de forma a exemplificar conceitos.
Baixe o html abaixo e abra no browser.
➜ Assita nosso canal no YouTube
➜ Curta nossa página no Facebook
➜ Não perca as atualizações no Twitter
➜ Veja os repositórios no Github
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>State: o certo e o errado - User - Demo 1</title> | |
| <style type="text/css"> | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #root { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| background: #ff9966; | |
| background: -webkit-linear-gradient(to right, #ff5e62, #ff9966); | |
| background: linear-gradient(to right, #ff5e62, #ff9966); | |
| } | |
| .name h1 { | |
| width: 100%; | |
| font-family: sans-serif; | |
| font-size: 80px; | |
| font-variant-numeric: tabular-nums; | |
| color: #000; | |
| text-align: center; | |
| } | |
| .logo { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script type="text/babel"> | |
| function Logo({url, alt}) { | |
| return ( | |
| <div className="logo"> | |
| <img src={url} alt={alt} /> | |
| </div> | |
| ); | |
| } | |
| class User extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| name : 'Emerson Brôga', | |
| image: 'https://emersonbroga.com/e/assets/emersonbroga-logo-b-black.png', | |
| }; | |
| } | |
| render() { | |
| const { name, image } = this.state; | |
| return ( | |
| <div className="name"> | |
| <h1>{name}</h1> | |
| <Logo url={image} alt={name} /> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<User />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |
