[MUSIC]

Hey everyone, Guil here, a front-end web development teacher here at Treehouse.

In this workshop, I'll teach you a couple of different ways to fetch external

data with React and how to display the data in your app.

We're going to create this fun GIF searching app

using the Giphy API from giphy.com.

A GIF search engine where users can search for reaction GIFs.

So I'm gonna assume that you know the basics of React like creating and

rendering components, passing props to components and managing state.

If you're not sure what this means, be sure to check the teacher's notes for

links to Treehouse courses and workshops that will get you up to speed with React.

To code along with me, download the project files for this workshop and

open them in your favorite text editor.

I'm using Atom.

In your terminal or console, navigate to the gif-search project folder and

run npm install to install the project dependencies.

Then npm start to run the app in the browser.

So by now you know that React is just a view library

that simply renders components using the state and properties passed to them.

React itself doesn't have a built in way to fetch data from a server.

In fact, since React's only concern is rendering views,

it doesn't even know that there is a server.

So there are several JavaScript methods and

tools you can use to fetch data in a React app.

The two methods I'll cover in this workshop are the Fetch API,

a data fetching interface that's native to the browser.

And axios, a popular tool that's similar to Fetch with a few key differences and

advantages.

Both of these are Promised-based approaches meaning

they use JavaScript Promises to handle the results we get back from the server.

And you can learn a whole lot more about JavaScript Promises by watching

the treehouse workshop I posted in the teacher's notes.

In the app, we'll write all of our data fetching code here in app.js.

This app component is the main container of the app,

it's responsible for rendering the child components of the app like a list of GIFs.

And it's going to pass them the external data state via props.

So the first thing we'll do is define an initial state inside a class.

I already have a constructor set up to initialize state and calling super here.

Lets us use the keyword this inside the constructor within the context of the App

class rather than the parent component class we're extending from React.

So now in the constructor, we can write this.state and set it equal to an object.

Now the state in our app is going to be the GIF data we want to display.

So let's call the state gifs and set it to an empty array by default.

So the gif state now represents a collection of objects that will change and

be updated by components.

Next, right below the constructor, we're going to set up

all of our data fetching inside React's componentDidMount lifecycle method.

ComponentDidMount is called immediately after a component is added to the d DOM.

So if you need to load external data right when a component gets mounted to the DOM.

This is a good place to create the request because at this point in the lifecycle,

the component has a DOM representation.

So inside componentDidMount,

we'll add the fetch method to start the process of fetching our data.

Now fetch provides a simple way to make web requests in the browser and

handle responses.

And in the fetch method, we define the path or

URL to the resource we wanna fetch in our case, the Giphy API.

And the Giphy API is open to the public and they provide a public beta key

to let you try it out and the key is required for all the API endpoints.

You can check out all the different endpoints here in the Giphy API docs.

For this example, I'm going to return data from the trending GIFs endpoint.

So I'll simply copy this URL from the docs which also contains the public

key and pass it to the fetch method as a string.

The fetch API uses JavaScript promises to handle results,

the promises let you chain methods in a sequential order.

In other words, something happens after something else is done.

For example, after the data is returned then convert that data to JSON.

So the fetch method itself returns a promise and you can chain then methods as

call backs that get executed sequentially once the fetch promise is fulfilled.

In this case, the promise is fulfilled when the browser receives the data

from the server.

So I'll go ahead and chain two then methods to fetch.

And you could also place them on separate lines just to make your code

easier to read.

So each of these call backs use the promise created by fetch to return

a promise of their own.

So next we'll make the first callback, return the result in JSON format and

the second we'll update the gif state.

So once the data finishes loading, fetch returns a response object

containing the response and we can access it in the callbacks.

So in the first then method, I'll write a function that takes the response object

and returns an object containing the data in JSON format.

Once this promise is fulfilled,

we'll need to make the JSON data available to the app by setting the state in React.

So in the second then method, I'll update the gif state by passing in a function

that takes the JSON data via the parameter responseData and

returns a new state with this.setState.

Then inside the parentheses, we'll set gifs to responseData.

Now looking at the Giphy API docs, we see a sample response for

the trending GIFS endpoint.

And in the response,

notice this array of data containing an object with all the properties of a GIF.

So we're going to update the state with the objects return in the data array.

To access the data in the array, we'll set the gif state to responseData.data.

Now not all promises are fulfilled, so the fetch gets rejected or

returns in a failed state.

For example, if you're offline or the API server is down,

you can use the catch method to catch and handle any errors.

So let's change the catch method to the sequence and

now catch will be used when we get an error fetching the data.

We'll return an error message along with the rejection reason as a console log.

So let's write an error function that takes the parameter error.

We'll return a consul log with the message Error fetching and

parsing data, then pass in the error.

All right, now let's test our app in the console to make sure we're bringing in

the data correctly.

So in the render method, lets log the gif state,

console.log(this.state.gifs),

I'll give this a save.

And over in the browser, you won't see any gifs yet.

We'll add a code to display them in a later video.

But if you open up the console, you'll see the array of objects fetched from the API.

Each object contains data about a gif like its URL, ID, size and more.

And if you inspect the app component in React dev tools,

you'll see that the gif state now consists of the array of 25 objects.

So great, now we know that the fetch method is fetching the data and

updating state as expected.

The fetch method and

JavaScript Promises are available in the latest generation of most browsers.

So to make sure that your data fetching also works in older browsers, as well as

all modern browsers, you can install the fetch polyfill developed by GitHub.

I've posted the link in the teacher's notes along with up to date

information on browser support for fetch and promises.

So coming up in the next video, you'll learn about axios.

A tool that similar to the fetch API with better browser support and

useful built in features.