O conteúdo aqui apresentado é para exemplificar como reutilizamos componentes no react.
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>Reutilizando Componentes - Artist App - Demo</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: #ad5389; | |
| background: -webkit-linear-gradient(to right, #3c1053, #ad5389); | |
| background: linear-gradient(to right, #3c1053, #ad5389); | |
| } | |
| h1 { | |
| font-size: 60px; | |
| display: block; | |
| } | |
| span { | |
| font-size: 45px; | |
| display: block; | |
| } | |
| </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 Artist(props) { | |
| return <span>{props.name} plays {props.instrument}.</span>; | |
| } | |
| function App(props) { | |
| return ( | |
| <div> | |
| <h1>{props.title}</h1> | |
| <Artist name="Flea" instrument="Bass" /> | |
| <Artist name="Markus Grosskopf" instrument="Bass" /> | |
| <Artist name="Steeve Harris" instrument="Bass" /> | |
| </div> | |
| ); | |
| } | |
| const element = <App title="List of Bass Players"/>; | |
| ReactDOM.render(element, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |
