In the last section we signed up for the YouTube API and this section we're going to go off on a little 2
bit of a tangent before we start making use of that API. 3
So instead of working with any of the data from YouTube just yet we're going to start working on the 4
search bar first in setting up the search for search bar. 5
We're going to cover three very important topics ex-party modules classes and state once we've discussed 6
these three concepts We'll come back to working with the data from the YouTube API. 7
So let's work on the search bar for a bit by opening search bar. 8
Jay Yes. 9
So is the purpose of this component again is just to make sure that we have an input at the top that 10
the user can type in and they type into the input. 11
It should update the video list on the right hand side. 12
So basically user types input we need to make an API request to the YouTube API. 13
So you haven't done anything in here just yet but we do know that we need a text input and when a user 14
types something in. 15
We need to do a search of some sort. 16
So let's define our component first in the same way that we define the one inside of index Dot. 17
Yes we'll say Konst search bar and we will define a function and return just an input. 18
We don't need to close the input because you know with like a closing input because we're not going 19
to put anything inside this component so this will generate in its T.M. input that the user can type 20
text into. 21
One other thing even though we're not making reference to a variable called you know react in here we 22
still need to include it so writes in poor re-act from react at the top. 23
We need to do this because remember whenever we can whenever we translate the GSX to normal javascript 24
it turns into a call like Riak dog create element. 25
And so if re-act isn't in the scope of this file Well it's going to throw in there. 26
So we just need to make sure that we import react into all of our components that we write that have 27
GSX. 28
OK. 29
So this is just going to show a no frills input. 30
Now we need something to make sure that the user can see it or we know we need to do something to make 31
sure the user can see it right now. 32
All we've done right now is define V define that component. 33
It's not being rendered to the DOM it's not being rendered inside of index. 34
Yes. 35
So do you remember that re-act components can show other components. 36
So if we get the search bar component over into index yes we can use indexed not just to show the input 37
. 38
Just one problem to render the search bar index needs a reference to this. 39
And remember as we mentioned previously all of our files are siloed from each other unless we explicitly 40
declare a connection between the two of them. 41
So we already learned how to import files that we haven't yet discussed how to export code. 42
Right we haven't. 43
We haven't learned what's happening on the other side of this re-act of this you know import state and 44
right here. 45
So think about it for a second. 46
A given file might have a ton of different coding that but we only want to export a small amount or 47
a subset of the code that we've written in here. 48
So to make sure that the only code that we export from this file is this component right here we're 49
right at the bottom. 50
Export default search bar now any file in our application that imports search bar will get our search 51
bar component. 52
It's kind of confusing words. 53
So let's you know go through it in practice and see what actually it looks like. 54
I'm going to save this file and then we'll flip back over to it. 55
When does it start. 56
Yes. 57
And at the top we'll write in your search bar from search your score bar. 58
So now when search bar is required or steamy imported into this file search bar will be equal to search 59
bar right here which is the component. 60
OK. 61
So the distinction I want to draw here is if we had some other variable inside of here let's say like 62
Konst foo equals five. 63
If we instead wrote export default foo search bar over here would be equal to 5. 64
Not the component. 65
So it's very critical to make sure that we correctly export. 66
You know the component outside of each file so I can delete this and replace it with search bar like 67
so. 68
OK. 69
One more thing. 70
Sure would be great if we could just write you know import search bar from search on her score bar and 71
then next xpect babble to correctly determine that OK they won't search far. 72
They must mean you know a search bar. 73
JS inside of the components folder. 74
Well you know unfortunately it's not quite the case. 75
Whenever we import code from a file that we write as a developer you know in actual javascript file 76
inside of here we have to give an actual file a reference to the file that we're trying to import. 77
We don't have to do that with libraries that we import because their namespace right we really have 78
one installed package called re-act that literally means go you know import re-act from re-act literally 79
means go into the node modules folder and get the directory called re-act same thing with re-act job 80
. 81
Juxtapose that with the search bar file. 82
I could have 10 files inside of my project right here called Search underscore Barcott Jay Yes and babbel 83
would just have no idea which of those you know different files. 84
I was asking for. 85
So whenever we are working with our own files whenever we're importing our own files we have to give 86
an actual file reference. 87
So what that means is we write the actual relative path from the file that we're importing it from. 88
So we're importing search bar into index dot Yes. 89
So all right here is in the current directory represented by a dot and then for a slash go into the 90
components folder come home and go and then find the file called Search under square bar. 91
We don't need to include the file extension on here so long as it is a dot JS file. 92
So again if it's a file that we write that we create ourselves we have to provide a file reference or 93
folder reference a path reference to it. 94
But if it's a library that we installed with no with NPM we can just write the name of the package. 95
OK. 96
So we've now successfully imported our search bar into index dot J us and now we want to show it inside 97
of app. 98
Give me the first time that we show another one component side of another. 99
Fortunately as you might imagine it's really straightforward. 100
I'm going to delete the high statement here and then I'm going to enter a new line. 101
So we'll add our search bar inside of this existing div by just writing search bar like so for a multi 102
line GSX expression like this. 103
Usually we'll use parentheses and put all the GSX inside of it like so. 104
So you can kind of imagine you know that looks this looks something like Hey return this big old glob 105
of GSX right here wrapped in the parentheses. 106
If you want to use the print you definitely don't have to just make sure that this div right here ends 107
up on the first line right here. 108
Otherwise I'll get in there. 109
OK. 110
So we've now declared a new component called search bar that contains just an input. 111
We exported that component from this file we imported it into index dot J Yes and then we rendered it 112
inside of our app component our app component is being rendered into the div inside of our index to 113
its single file with class container. 114
So you can kind of imagine you know this is starting to form a tree of sorts and tree of components 115
. 116
The very top level we have our app and then the first child inside of there is search bar are going 117
to go and save this and then flip back over to my browser let's refresh and it looks like we've got 118
an input here. 119
Cool. 120
This looks good. 121
Let's go ahead and continue inside the next section