cft

Anime list reactjs+Jikan API

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


user

Sandeep Patel

a year 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

Upvote


user
Created by

Sandeep Patel

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


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles