React Filtered Movies App by Dev Ed

 

Early bird just learned the react tutorial from Dev Ed. I love his course, he always slowly explains the knowledge step by step(sometimes feeling overwhelmed by others’ tutorials with many knowledge points).

Here is his youtube tutorial.

But I still gonna record what I learned here.

Step1:

building a react project with npx (nodejs environment)

npx create-react-app my-app

For the motion, use the framer React library here.

npm install framer-motion

Step2:

fetch the movies data from TMDB. Sign up for the account to get the API key and finding at https://www.themoviedb.org/settings/api .

App.js

fetch API data

“movies” is an array with results inside.

When loading the page, show all the popular movies.

App.js import

We need two components: Movie.js and Filter.js

Move.js

Every movie card contains a title and an image.

the image URL is https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg

Those pieces are a base_url, a file_size and a file_path.

Filter.js useEffect()

When the activeGenre is 0, means not selected, showing all the popular movies. When the active genre number is equal to the data in all popular movies, the active ones are filtered.

Filtered.js

When the number is 0, means “all”.

When the number is 35, means “comedy”.

When the number is 28, means “action”.

Add className “active” and setActiveGenre().

You must notice how to use “framer” above.<motion.div></motion.dev> with some attributes such as layout,animate,initial,exit,etc.

Animations in Framer Motion are controlled via the motion component's flexible animate property.

AnimatePresence allows components to animate out when they're removed from the React tree. More Framer Motion documents.

It’s so powerful, which can do 3D with three.js and React three Fiber tech.

Github code