Apps

015-Poke picture book｜Step4_Cardコンポーネントを作成しポケモンをグリッドで表示する

はじめに

取得したポケモンのデータを、見やすく表示するためにカード形式でデザインします。

本記事では、Card コンポーネントを作成し、Material UIを活用してポケモンの情報をグリッドレイアウトで表示する方法を解説します。

Cardコンポーネントを作成

App.js

import { useEffect, useState } from 'react';
#省略
import Card from './components/Card/Card';

function App() {

#省略

  return (
    <div className="App">
      {loading ? (
        <h1>ロード中・・・</h1>
      ) : (
        <>
          <div className='pokemonCardContainer'>
            {pokemonData.map((pokemon, i) => {
              return <Card key={i} pokemon={pokemon} />
            })}

          </div>
        </>
      )}
    </div>
  );
}

export default App;

src/components/Card/Card.js

import React from 'react'

const Card = ({ pokemon }) => {
  return (
    <div>Card</div>
  )
}

export default Card

ポケモンデータをページに表示する

ポケモンの画像データがどこにあるのか確認

Card.js

import React from 'react'

const Card = ({ pokemon }) => {
  return (
    <div className='card'>
        <div className='cardImg'>
            <img src={pokemon.sprites.front_default} alt=''/>
        </div>
        <h3 className='cardName'>{pokemon.name}</h3>
        <div className='cardTypes'>
            <div>タイプ</div>
            {pokemon.types.map((type) => {
                return <div>
                    <span className='typeName'>{type.type.name}</span>
                </div>
            })}
        </div>
        <div className='cardInfo'>
            <div className='cardData'>
                <p className='title'>重さ：{pokemon.weight}</p>
            </div>
        </div>
        <div className='cardInfo'>
            <div className='cardData'>
                <p className='title'>高さ：{pokemon.height}</p>
            </div>
        </div>
        <div className='cardInfo'>
            <div className='cardData'>
                <p className='title'>アビリティ：{pokemon.abilities[0].ability.name}</p>
            </div>
        </div>
    </div>
  )
}

export default Card

ポケモンをグリッドで表示する

App.css

.App {
  text-align: center;
  width: 100%;
  height: 100vh;

}

.pokemonCardContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  place-items: center;
  gap: 20px;
  margin-top: 60px;

}

Card.js

import "./Card.css";

src/components/Card.css

CSSボックスシャドウジェネレーター

Card.css

.card {
    width: 290px;
    box-shadow: 6px 9px 15px -5px #777777;
    border-radius: 20px;
    background-color: rgba(255, 255, 226, 0.712);
}

.cardName {
    padding: 0;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 0;
}

.cardInfo {
    text-align: center;
}

index.css

body {
#省略
  background-color: rgb(219, 191, 157);　#背景カラーを作成
}
#省略

動作確認

ヘッダーを作成

App.js

import Navbar from './components/Navbar/Navbar';

  return (
    <>
      <Navbar />
　　#省略

src/components/Navbar/Navbar.js

import React from 'react';
import "./Navbar.css";


const Navbar = () => {
  return (
    <nav>ポケモン図鑑</nav>
  )
}

export default Navbar

src/components/Navbar/Navbar.css

nav {
    background-color: bisque;
    color: rgba(0, 0, 0, 0.836);
    height: 65px;
    font-weight: 600;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

-Apps