O conteúdo aqui apresentado é para exemplificar que ao criar componentes com react, devemos sempre separar em componentes menores.
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>Extraindo Componentes - React Album - Demo 1</title> | |
| <style type="text/css"> | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #root { | |
| width: 100%; | |
| height: 100%; | |
| font-family: sans-serif; | |
| color: #FFFFFF; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| background: #CB356B; | |
| background: -webkit-linear-gradient(to right, #BD3F32, #CB356B); | |
| background: linear-gradient(to right, #BD3F32, #CB356B); | |
| } | |
| .album { | |
| width: 90%; | |
| } | |
| .album-title { | |
| font-size: 60px; | |
| } | |
| .album-band { | |
| font-size: 45px; | |
| color: rgba(255, 255, 255, 0.75); | |
| } | |
| .album-cover { | |
| padding-top: 20px; | |
| } | |
| .album-info { | |
| display: flex; | |
| } | |
| .album-tracks { | |
| padding-left: 20px; | |
| font-size: 40px; | |
| } | |
| .album-track { | |
| padding: 10px 0; | |
| } | |
| .album-track:nth-child(even) { | |
| color: rgba(255, 255, 255, 0.75); | |
| } | |
| .album-track:nth-child(odd) { | |
| color: white; | |
| } | |
| </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 App() { | |
| const albumCoverUrl = 'https://upload.wikimedia.org/wikipedia/en/3/32/IronMaiden_NumberOfBeast.jpg'; | |
| return ( | |
| <div className="album"> | |
| <div className="album-title">The Number of the Beast</div> | |
| <div className="album-band">Iron Maiden</div> | |
| <div className="album-info"> | |
| <div className="album-cover"> | |
| <img src={albumCoverUrl} alt="Run To The Hills" /> | |
| </div> | |
| <div className="album-tracks"> | |
| <div className="album-track">1 - Invaders</div> | |
| <div className="album-track">2 - Children of the Damned</div> | |
| <div className="album-track">3 - The Prisioner</div> | |
| <div className="album-track">4 - 22 Acacia Avenue</div> | |
| <div className="album-track">5 - The Number of the Beast</div> | |
| <div className="album-track">6 - Run to the Hills</div> | |
| <div className="album-track">7 - Gangland</div> | |
| <div className="album-track">8 - Halloweed Be Thy Name</div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| const element = <App/>; | |
| ReactDOM.render(element, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |
