React JS Tutorial #8: Calling an API

Let's dive into fetching from an API and displaying that data in React JS using useEffect, useState & the JavaScript Map array method, using the Pokemon API! This tutorial is a bit more of a "real life" example of data fetching in React JS.

In this tutorial, we'll talk about fetching an API of Pokemon, displaying those Pokemon results and adding a new component for each result. In that new component, we'll do another fetch to show the Pokemon's abilities, based on a button called "Show more details". This way, we're relying on React state to determine whether or not to fetch more details for each item in the React list. We also talk about the importance of keys in map and much more.

This tutorial is a great place to find out how to fetch data in React and how to display it properly. A great place to turn to for beginners in React!

Links mentioned

useEffect Tutorial:    • React JS Tutorial #7: the useEffect Hook  

Map Tutorial:    • Learn JavaScript Map in Just 3 Minutes!  

Destructuring Tutorial:    • JavaScript Destructuring & The Rest Operator  

Link to the playlist for the full React JS tutorial series:    • React JS Full Tutorial  

Oh, and if you're new to JavaScript as well, don't worry! Code Emily has got you covered with a comprehensive JavaScript tutorial series. Whether you're a React enthusiast or a JavaScript novice, we've got the resources you need to enhance your skills and become a proficient web developer. Check out our JavaScript tutorial series here:    • JavaScript Tutorials  

00:00 Intro: Fetching Data from an API & Displaying it in a React Component
00:20 Exploring the Vite app that is up and running; going through useEffect & fetch
01:30 Mapping out the list of Pokemon data fetched from the Pokemon API
04:00 Adding a component for the Pokemon results
04:57 Building out the Pokemon component: Adding state for the showMore button click
07:01 Building out the Pokemon component: Fetching abilities using useEffect
08:21 Building out the Pokemon component: basing useEffect on the showMore state
09:10 Building out the Pokemon component: Mapping out the abilities for each Pokemon using Map
010:10 Outro & Thank you!