Find the best way to learn a new framework is to actually build something. And now that we've got the fundamentals covered, I want to walk you through creating your first react app. So what are we building for our first app, we're going to be creating a simple Google clone. But instead of being able to search for anything, our Google is going to search for dad jokes, and only dad jokes. If I go ahead and enter cat, click search, I get back a list of five prime cat related dad jokes. And if I enter a new search term, and click search, I can see the search results are refreshed with new dad jokes.

And lastly, I like Google's I'm feeling lucky button, we have the I'm feeling funny button, which will return a single dad joke in this case, although this app may seem pretty straightforward, we're going to cover a lot of ground on creating it. So let's get started. We're going to keep using code sandbox the creator app. But before we begin, I want to kind of start with a clean slate. So I'm going to go ahead and delete our previous work and start with a nice blank app component and disregard the error that appears for now to start with, we're going to keep things really simple. We're going to have a single button that when clicked generates a single dad job.

So I'm going to start by going ahead and creating that button. And I'm going to label it with Tell me a joke. So you can see we have our new Tell me a joke button being rendered on screen here. But when I click on it, not a whole lot is happening. To handle click events and react, use the on click event. Let's go ahead and add one to our button here.

The onclick event actually takes a function as its value. So we're going to go ahead and add a simple function that logs out of value and clicked. Okay, so let's just go ahead and open our console here. Now you can see that every time we click the Tell me a joke button, the word click is logged to the console for each of those clicks. Now that we know our on click event is actually working, I want to go ahead and move our on click handler into its own function. I'm going to go ahead and call it on tail job.

And it is going to log out click just like it's doing right now. So I'm going to take this new on tell joke. I'm going to replace the inline function we created earlier, and I'm just gonna go ahead and save. And now when I click Tell me a joke. should still see the click logged out. Now this job button still isn't doing very much.

When we click on it, what we really want to happen is every time you click the joke button, you get a joke back a dad joke specifically. But before we could do that, we need a place to get some dad jokes. Since there's an API for everything. These days, we'll be using a free API from I can has dad joke comm for all our dad joke needs. Let's take a closer look at API Doc's to see what we're dealing with person knows that no authentication is actually required for these calls, which is one less thing to worry about. Next, you'll see the API actually supports multiple response formats.

In our case, we're only concerned with the JSON option and as what we'll be using for our tutorial, or tell me a joke button. We're going to be using the fetcher random dad joke and point, the way this will work is that every time the button is clicked, a new random joke will be generated and sent back to us. We can see a sample of the response that will be returned here, which is an object that contains the joke along with a unique ID and an HTTP status code. Now that we have our endpoint, let's go back and hook up our job button in order to call the random joke endpoint and we'll be using JavaScript fetch a API, which allows for fetching resources across the network, we will be passing fetch two parameters. The first is the resource URL, which in our case is the fetch random joke endpoint.

The second parameter is an options object, but we will set the HTTP method to get since this is a get request. Next, we will set the Accept header to application JSON type to ensure your data comes back in JSON format. Calling fetch returns a promise that resolves to a response object. In our then method, we'll use the response objects built in JSON method to parse a response data. Since the JSON method also returns a promise, we can just chain on another method. This time the callback will be passed the parse JSON data when the promise resolves, and just to make sure things are working with log the results out.

Now let's go ahead and open the console up. And now when I click on the job button, you can see that the response from the dad joke API is being logged out. And since we're using the random joke endpoint, we get a different joke back if I click the button again, now Don't joke button is working. That wraps up this lesson. Next up we'll be looking at the key react feature components state