Listas e Chaves - React Discography - DEMO

README.MD

React Discography - Listas e Chaves - DEMO

DEMO

O conteúdo aqui apresentado é para exemplificar listas e chaves (lists/key) 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.

Rodando o Projeto

Crie uma aplicação react usando o create-react-app. Dentro da pasta src, altere o conteúdo do arquivo App.js para o conteúdo do arquivo App.js aqui dessa página. Crie um arquivo chamado Discography.css dentro da pasta src e coloque o conteúdo do arquivo Discography.css aqui dessa página. Crie um arquivo chamado Album.js dentro da pasta src e coloque o conteúdo do arquivo Album.js aqui dessa página.

Imagem do projeto rodando

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

➜ Veja as dicas no Instagram

➜ 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

Album.js

import React, { Component } from 'react';

class Album extends Component {
  render() {
    const { link, image, title, release_date } = this.props.item;

    return (
      <div className="album" >
        <a href={link} target="_blank" rel="noopener noreferrer">
          <div className="cover"><img src={image} alt={title} /></div>
          <div className="title"><h2>{title}</h2></div>
          <div className="release-date">{release_date}</div>
        </a>
      </div>
    );
  }
}

export default Album;

albums.json

{
  "data": [
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-the-book-of-souls.jpg",
      "title": "The Book of Souls",
      "link": "https://ironmaiden.com/discography/details/the-book-of-souls",
      "release_date": "04/09/2015"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-final-frontier.jpg",
      "title": "The Final Frontier",
      "link": "https://ironmaiden.com/discography/details/the-final-frontier",
      "release_date": "16/08/2010"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-a-matter-of-life-and-death.jpg",
      "title": "A Matter of Life and Death",
      "link": "https://ironmaiden.com/discography/details/a-matter-of-life-and-death",
      "release_date": "28/08/2006"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-dance-of-death.jpg",
      "title": "Dance of Death",
      "link": "https://ironmaiden.com/discography/details/dance-of-death",
      "release_date": "08/09/2003"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-brave-new-world.jpg",
      "title": "Brave New World",
      "link": "https://ironmaiden.com/discography/details/brave-new-world",
      "release_date": "29/05/2000"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-virtual-xi.jpg",
      "title": "Virtual XI",
      "link": "https://ironmaiden.com/discography/details/virtual-xi",
      "release_date": "23/03/1998"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-the-x-factor.jpg",
      "title": "The X Factor",
      "link": "https://ironmaiden.com/discography/details/the-x-factor",
      "release_date": "02/10/1995"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-fear-of-the-dark.jpg",
      "title": "Fear of the Dark",
      "link": "https://ironmaiden.com/discography/details/fear-of-the-dark",
      "release_date": "11/05/1992"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-no-prayer-for-the-dying.jpg",
      "title": "No Prayer for the Dying",
      "link": "https://ironmaiden.com/discography/details/no-prayer-for-the-dying",
      "release_date": "01/10/1990"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-seventh-son.jpg",
      "title": "Seventh Son of a Seventh Son",
      "link": "https://ironmaiden.com/discography/details/seventh-son-of-a-seventh-son",
      "release_date": "11/04/1988"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-somewhere-in-time.jpg",
      "title": "Somewhere in Time",
      "link": "https://ironmaiden.com/discography/details/somewhere-in-time",
      "release_date": "29/09/1986"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-power-slave.jpg",
      "title": "Powerslave",
      "link": "https://ironmaiden.com/discography/details/powerslave",
      "release_date": "03/09/1984"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-piece-of-mind.jpg",
      "title": "Piece of Mind",
      "link": "https://ironmaiden.com/discography/details/piece-of-mind",
      "release_date": "16/05/1983"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-number-of-the-beast.jpg",
      "title": "The Number of the Beast",
      "link": "https://ironmaiden.com/discography/details/the-number-of-the-beast-album",
      "release_date": "22/03/1982"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/album-killers.jpg",
      "title": "Killers",
      "link": "https://ironmaiden.com/discography/details/killers",
      "release_date": "02/02/1981"
    },
    {
      "image": "https://ironmaiden.com/media/discography/thumbnail/iron-maiden-extended-art-packshot-764.JPG",
      "title": "Iron Maiden",
      "link": "https://ironmaiden.com/discography/details/iron-maiden",
      "release_date": "14/04/1980"
    }
  ]
}

App.js

import React, { Component } from 'react';
import Album from './Album';
import './Discography.css';

class Discography extends Component {

  constructor(props) {
    super(props);

    this.state = { data: [] };
  }

  componentDidMount() {
    const discographyUrl = 'https://gist.githubusercontent.com/emersonbrogadev/74da958938b36ee5baf14a08a81aa337/raw/d53f60755543ff0fa677d1dee31d2b226e65d7db/albums.json';

    fetch(discographyUrl)
      .then(result => result.json())
      .then((result) => {
        this.setState({ data: result.data || [] })
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    const { data } = this.state;

    if (!data || !data.length) return (<h2>Loading...</h2>);

    return (
      <div>
        <h2>Discography</h2>
        <div className="discography">
          {data.map(album => <Album key={album.title} item={album} />)}
        </div>
      </div>
    );
  }
}

export default Discography;

Discography.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  --main-bg-color: #343D46;
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #F9F1A2;
}

#root {
  width: 100%;
  font-family: "Lato",sans-serif;
  font-size: 38px;
  color: var(--primary-text-color);
  background: var(--main-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading {
  color: var(--secondary-text-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.h2 {
  width: 100%;
  text-align: center;
  clear: both;
  color: var(--secondary-text-color);
}

.discography {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items:stretch;
  width: 960px;
}



.album {
  width: 25%;
  text-align: center;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  height: 290px;
}

.album a { color: var(--primary-text-color); text-decoration: none; display: block; }
.album h2 { font-size: 26px; margin: 0; transition: color .5s ease-in-out; }
.album:hover h2 { color: var(--secondary-text-color); }
.album .release-date { 
  opacity: 0; 
  color: var(--primary-text-color);
  font-size: 18px; 
  -webkit-transition: opacity .5s; 
  transition: opacity .5s;

}
.album:hover .release-date { opacity: 1; }
.album .cover { }
.album .cover img { width: 200px; transition: transform .5s ease-in-out;  }
.album .cover:hover img {  -webkit-transform: scale(1.1); transform: scale(1.1); }

@media screen and (max-width: 992px) {
  .discography { width: 100%; }
  .album { width: 50%; height: auto; margin-bottom: 40px; }
  .album a { color: var(--secondary-text-color); }
  .album h2 { font-size: 32px; }
  .album .cover img { width: 90%; }
  .album .release-date { opacity: 1; font-size: 26px; }
}