Skip to content

Instantly share code, notes, and snippets.

@emersonbrogadev

emersonbrogadev/README.MD

Created August 31, 2019 00:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save emersonbrogadev/9ad5d1bd3d2dce06334ec66fd98c4884 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save emersonbrogadev/9ad5d1bd3d2dce06334ec66fd98c4884 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. emersonbrogadev created this gist Aug 31, 2019.
    33 changes: 33 additions & 0 deletions README.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    # React Album - Extraindo Componentes

    ### DEMO 2

    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.

    ### Rodando o Projeto

    Baixe o html abaixo e abra no browser.

    ### Imagem do projeto rodando
    ![React Album - Extraindo Componentes](http://s3.emerson.link/prints/2019-08-30-205137-0rrw1.png)

    #### Se ainda não segue, conheça as nossas Redes Sociais

    [➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/)

    [➜ Assita nosso canal no YouTube](https://www.youtube.com/c/emersonbroga/)

    [➜ Curta nossa página no Facebook](https://www.facebook.com/emersonbrogadev/)

    [➜ Não perca as atualizações no Twitter](https://www.twitter.com/emersonbrogadev/)

    [➜ Veja os repositórios no Github](https://www.github.com/emersonbrogadev/)

    <a href="https://emersonbroga.com">
    <img src="https://emersonbroga.com/e/assets/emersonbroga-logo-name-black.png" height="60" / alt="EmersonBroga.com">
    </a>

    122 changes: 122 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,122 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Extraindo Componentes - React Album - Demo 2</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 AlbumTitle({title}) {
    return (<div className="album-title">{title}</div>);
    }

    function AlbumBand({bandName}) {
    return (<div className="album-band">{bandName}</div>);
    }

    function AlbumCover({title, imageUrl}){
    return (
    <div className="album-cover">
    <img src={imageUrl} alt={title} />
    </div>
    );
    }

    function AlbumTrack({trackName}){
    return (<div className="album-track">{trackName}</div>);
    }

    function Album() {
    const albumCoverUrl = 'https://upload.wikimedia.org/wikipedia/en/3/32/IronMaiden_NumberOfBeast.jpg';

    return (
    <div className="album">
    <AlbumTitle title="The Number of the Beast" />
    <AlbumBand bandName="Iron Maiden" />
    <div className="album-info">
    <AlbumCover title="The Number of the Beast" imageUrl={albumCoverUrl} />
    <div className="album-tracks">
    <AlbumTrack trackName="1 - Invaders" />
    <AlbumTrack trackName="2 - Children of the Damned" />
    <AlbumTrack trackName="3 - The Prisioner" />
    <AlbumTrack trackName="4 - 22 Acacia Avenue" />
    <AlbumTrack trackName="5 - The Number of the Beast" />
    <AlbumTrack trackName="6 - Run to the Hills" />
    <AlbumTrack trackName="7 - Gangland" />
    <AlbumTrack trackName="8 - Halloweed Be Thy Name" />
    </div>
    </div>
    </div>
    );
    }

    function App() {
    return (<Album />);
    }

    const element = <App/>;
    ReactDOM.render(element, document.getElementById('root'));
    </script>
    </body>
    </html>