におけるJikan APIを用いたアニメリストの取得

ライブアニメ

ギタブレポ

ステップ1

を作成するアプリケーションを使用して反応npx create-react-app animeseum
コマンドを実行した後、以下のようなフォルダやファイルを作成します.

または希望するファイル名を変更することができます.

ステップ2

説明のコードのコメントを読む

アプリで.js

import { useState, useEffect } from "react";

// importing other components 
import Header from "./components/Header.js";
import Footer from "./components/Footer.js";
import Home from "./pages/Home.js";


function App() {
// Creating state variables using useState Hooks :
// "animeList" variable will be used for the searched anime 
// "topAnime" variable will be used for all the popular anime
// "search" variable will be used for search terms
  const [animeList, setAnimeList] = useState([]);
  const [topAnime, setTopAnime] = useState([]);
  const [search, setSearch] = useState("");

  // Fetching top anime (by popularity) from jikan API
  // In place of simple fetch method you can axios library 
  // async function is used so don't to the keyword await

  const getTopAnime = async () => {
    const data = await fetch(
      `https://api.jikan.moe/v3/top/anime/1/bypopularity`
    ).then((res) => res.json());

    setTopAnime(data.top);
  };

  const handleSearch = (e) => {
    e.preventDefault();

    fetchAnime(search);
  };

  // Fetching searched anime from jikan API
  const fetchAnime = async (anime_name) => {
    const data = await fetch(
      `https://api.jikan.moe/v3/search/anime?q=${anime_name}&order_by=title&sort=asc&limit=10`
    ).then((res) => res.json());

    setAnimeList(data.results);
  };

  // get getTopAnime() as the site render useEffect is used
  useEffect(() => {
    getTopAnime();
  }, []);

  return (
    <>
    <div className="App" >
      <Header />

      {/*  Main Content  */}
      <Home
        // passing props to the Home Component 
        handleSearch={handleSearch}
        search={search}
        setSearch={setSearch}
        animeList={animeList}
        topAnime={topAnime}
      />

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

export default App;

インホーム.js

import "../styles/Home.css";
import AnimeCard from "../components/AnimeCard";

// you can get the props "function Home(props)" in this manner 
/* OR you can destructure it "function Home({handleSearch, search, setSearch, topAnime, animeList })" and use "search" instead of "props.search"   */

function Home(props) {
  return (
    <main>
      <div className="home">
        <form className="search-box" onSubmit={props.handleSearch}>
          <input
            type="search"
            placeholder="Search ..."
            required
            value={props.search}
            onChange={(e) => props.setSearch(e.target.value)}
          />
        </form>
      </div>

{/* if there is no text in the search bar it will show top anime(by popularity)
 and on searching it will show search results
use map() function to get all element in the array
 */}
      {!props.search ? (
        <div className="card-main">
          {props.topAnime.map((anime) => (
            <AnimeCard anime={anime} key={anime.mal_id} />
          ))}
        </div>
      ) : (
        <div className="card-main">
          {props.animeList.map((anime) => (
            <AnimeCard anime={anime} key={anime.mal_id} />
          ))}
        </div>
      )}

    </main>
  );
}

export default Home;

アニマルカードで.js

import "../styles/AnimeCard.css"

/* You can add anime synopsis you can check all elements using "console.log(getTopAnime)" in useEffect (App.js) if you want */

function AnimeCard({anime}) {
  // Anime Cards
    return (
        <a className="card-body" href={anime.url} alt={anime.title}>
        <figure className="card-fig">
          <img className="card-image" src={anime.image_url} alt="Anime Image" />
        </figure>
        <h3 className="card-title">{anime.title}</h3>
      </a>
    )
}

export default AnimeCard

ヘッダーで.js

import "../styles/Header.css";

function Header() {
  return (
    <header className="header">
      <h1 className="title">Anime-Suem</h1>
    </header>
  );
}

export default Header;

フッタで.js

import "../styles/Footer.css";
import GitHubIcon from "@material-ui/icons/GitHub";
import LinkedInIcon from "@material-ui/icons/LinkedIn";

// I have used material-ui icons you can use whatever you wish
// "npm i @material-ui/icons" to install 

function Footer() {
  return (
    <footer>
   <div className="footer">

      <p>Created by: Sandeep Kumar Patel</p>

      <a href="https://github.com/sandyabhi/anime-suem" className="foots">
        <GitHubIcon /> Github
      </a>

      <a href="https://www.linkedin.com/in/sandeep-kumar-patel47/" className="foots">
        <LinkedInIcon /> Linkedin
      </a>

   </div>

    </footer>
  );
}

export default Footer;

完了

CSSパーツのために、あなたは私のgithubレポに行くことができます。

それとも、自分でそれを行うことができますまたはブートストラップ、材料UI、意味のUI、風変わりなCSSなどを使用します

拡張モジュール( vs code )

──
- ES 7反応/redux/graphql/反応ネイティブスニペット
タグの自動変更