Anime list reactjs+Jikan API

It is an anime database. Users can see all the top anime and can search for any anime.

Sandeep Patel

3 years ago | 4 min read

Fetching Anime List using Jikan API in reactjs

LIVE: Anime-suem

GitHub : Repo

Step 1

create react app using command npx create-react-app animeseum

After the command create the folders and files like image given below:

OR you can change files name as you desire.

Step 2

Read the comments in the code for explanation

In App.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;

In Home.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;

In AnimeCard.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

In Header.js

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

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

export default Header;

In Footer.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;

Done

For the CSS part, you can go to my Github Repo.

OR you can do it yourself or use bootstrap, material ui, semantic ui, Tailwind CSS, etc

Extension (VS CODE)

-Prettier
-ES7 React/Redux/GraphQL/React-Native snippets
-Auto Rename Tag

Web Development

Upvote

Created by

Sandeep Patel

Pursuing Btech(CSE) || Love web technology , watercolour painting and anime