Let's start working on this little search widget.
The goal of this search widget is to show a little text input right here where a user can type in some
topic.
We are then going to make that term right there, do a search of the Wikipedia API and then show her
some results immediately underneath it.
If you're not familiar with Wikipedia and check it out at Wikipedia dot org, it's essentially an online
encyclopedia.
So we're going to do a search, let's say, or something like programming.
And then I would expect to see some results.
Kind of like what you see right here, it's not going to look entirely identical API that we're going
to using be using doesn't quite give us back topic based results.
Instead, we're just going to kind of have it kind of like this listing right here.
This is kind of a good representation.
We'll show the title of some article and then the a summary of that article.
Immediately after it.
And we're just going to have a slightly different format.
So it's gonna look kind of like what you see right here.
So that's the general idea.
We first need to understand a little bit more about the API itself and then figure out some architecture.
But this search component or list component together, first off, how do we use the Wikipedia API?
Well, this is probably the easiest API that we're gonna use in this entire course because it does not
require any authentication, any API keys or anything like that.
All we have to do is make a get request where you are.
L like this right here at the very end.
There is a query parameter called s r search and we're going to say s our search equals.
And then whatever we want to search for by put inside of your search term, we will end up replacing
that with whatever the user types into that text input.
The user types and programming.
We would end up making requests to something like this right here.
So s our search equals programming.
You do not have to write out this full.
You are all right here.
I just want to give you an idea of what the request is that we're going to make.
I'm going to really quickly copy this link and put it inside my browser so you can see the kind of data
that we're gonna get back in response.
You can see that we get back some very simple Jason.
As a reminder, I run a little formatter inside my browser to automatically format Jason data.
So if you manually type in this, you are all right here.
You're going to see probably a big blob of text unless you also get that formatting extension.
So in the response we get back.
There is a query property inside, a query.
There is a search property.
And that's a reference to an array of search results for every search results.
We have a title, a page I.D..
And most importantly, a snippet and a snippet is kind of a summary of the article or a kind of a headline
of the article.
So the title of the article is What We Are Going to show.
Right here.
And then the summary of the article or the snippet is what we're going to show right after it.
And that's pretty much it.
But we have to do is take these are input.
Make a request.
Do a map over the results.
Show the results on the screen.
This is extremely similar to what we have done several times throughout this course.
We're really just doing a search, building a list.
The only difference this time around is that we are making use of hooks to implement all this stuff.
That's the only change here.
All right, Lessing, when I mentioned very quickly, is the overall structure now, remember on that
YouTube application?
We had several different components, like a search bar component and an app and a results list or video
list and all those different components in this very simple search or listing application are gonna
put together.
We're going to build everything inside of one single search component.
That's going to be displayed by the app.
It's not going to take any props from the app or anything like that.
So, again, it's gonna be one hundred percent.
So to me, 100 percent self-contained.
The search component itself will have two pieces of state.
First off, we'll have a term which is whatever user is typing into that text input, whenever a user
types into that text input.
We're then going to send that off to the Wikipedia API and do a search.
That's going to give us back some results.
We're going to store those results on some piece of state as well.
So as soon as we change that results piece of state, our component will re render and we should render
that list of results onto the screen and show to the user.
All right.
Well, that's pretty much the summary.
Like I said, it is really similar to what we've done several times throughout this course.
The only difference is that we are introducing some additional hook.
That's it.
So we can really focus on that hook and understand how it works.
Well, enough lecturing.
Let's take a pause and then start putting this search component together in the next video.