In the last section we spoke about that app that we're going to be building inside of this chapter and 2
we also cloned our starter repo and install the dependencies at the terminal I took the liberty of running 3
NPM start here just to start our development server up. 4
And as you can see I've got it launched in my browser over here as well and I see just reacts simple 5
starter. 6
OK. 7
So we spoke about a lot of what this app is going to do in this section let's plan out all the different 8
re-act components are going to form our application. 9
So this is always a great step to take you know take the mockups that we have and say all right the 10
search bar at the top is going to be its own component. 11
And then the table is going to be its own components so on and so on. 12
So I took our mockup and I divided it up into a bunch of different sections to give us kind of a plan 13
of how we're going to divide the supplication out. 14
So at the very top very simple one is going to be the search bar search bar is going to be responsible 15
for showing the search input and a search button. 16
Pretty simple component. 17
It's also going to be responsible for kicking off a X calling an action Creator in redux. 18
Whenever we enter you know a city name and then click on search and try to submit that search it needs 19
to have the ability to tell Reebok's like hey something just happened you need to go fetch some data 20
. 21
Next we've got the forecast list and we might end up changing the name of it a little bit. 22
But you can kind of just imagine that you know it's the general overall chart component here that the 23
general overall table component. 24
In previous sections when we rendered lists we had a list component and then kind of a list item component 25
that represented a single row this time since the overall list is pretty simple we're just going to 26
combine the two into a single component. 27
So one component that shows the overall table and knows how to render each of the line items inside 28
of it as well. 29
Third we're going to have a separate chart component. 30
So the char you know for each row that we make we have three charts. 31
We're not going to want to like copy paste that code over and over for creating a chart. 32
We want to just have a single straightforward chart component that we can pass our data to and have 33
a reasonable expectation that hey I'm going to get a chart out of this thing. 34
So this is a start. 35
Starting to get into where we make truly reusable components that we can use even across projects if 36
you want to write a chart like this. 37
You know we could probably think of a couple of dozen different apps that end up using a chart that 38
looked just like this. 39
Finally as before we're going to have the overall application component. 40
So the component that says like Okay take the search bar take the forecast list and just render them 41
onto page. 42
So it's kind of like that glue component that ties everything together. 43
All right. 44
So we're going to end up referring back to this diagram a couple of times. 45
So I'm going to keep it up. 46
But on a second monitor over here. 47
OK. 48
So to get started we're going to focus on that search bar. 49
You don't open up my code editor here 50
and there we go. 51
We've got our source directory right there. 52
So by working on the search bar I wanted to first ask ourselves a quick question here. 53
You know what does the search bar do is it going to be a component or a container. 54
But that's the first question we always need to ask ourselves. 55
Well as we were just discussing the search bar needs to have the ability to modify the state of our 56
application by dispatching actions right and to call an action creator needs to say like hey someone 57
has entered a search term we need to make an API request. 58
So it definitely needs to be able to talk to rebox which means we definitely are going to want to make 59
it a container because a container has the ability to talk to redux whereas a normal component does 60
not a normal component just you know shows some content on the screen. 61
That's all that does. 62
So we'll get started by adding a new directory here inside of our source folder called Con Tinners. 63
And then inside of it we will make our search bar so search bar. 64
JS then inside here we're going to go ahead and start scaffolding out our search bar and we'll start 65
nice and simple just you know get something to show up on the screen. 66
So at the top we'll import react and our component 67
from react and then we'll export our default class search bar which will extend component and inside 68
of your will and from implement implement the default render method. 69
And for right now we're going to have to show a form with a class name of inputs group 70
and then we'll just show a simple text and put inside of that the class name here is solely from Bootstrap 71
CSSA which is already hooked up inside the boiler plate package. 72
So this is just a class thing that's coming over from Bootstrap here. 73
Nothing beyond that special to it. 74
So this is you know a good enough start for us to actually just show something on the page just to get 75
something to render up so I can save this. 76
And then we need to make sure that we actually insert this into our app component as well so it can 77
actually show up on the screen. 78
So going to flip over to abduct. 79
Yes. 80
Which is inside of the components directory and at the top we will import search bar from. 81
And we are inside of the components directory right now. 82
So we're going to walk up to source go into containers and then get search bar. 83
So we'll walk up go into containers and it will get a search bar and then instead of the silly little 84
text that we have in here right now we will just replace it with search bar. 85
OK. 86
You know flip over to my browser now and will refresh the page. 87
Just make sure everything is set up correctly and it looks like we've got input here. 88
Very good. 89
So we're going to go on that end. 90
OK. 91
So now that we know that we're showing the search bar correctly. 92
Let's do a little bit more work on it before we go into the next section. 93
The input in this case is not alone. 94
It's not sitting by itself. 95
We've also got the search button on here as well. 96
So let's add a button on here and call it good for this section. 97
So I'm going to add a span here. 98
Again we're going to make use of some built in Bootstrap styling. 99
So if you're ever curious about you know where are these the structure of this HTL are the class names 100
are coming from. 101
You can always go and check out the bootstrap documentation which will tell you everything you could 102
possibly want to know. 103
In our case we're going to have this span with a class name of input group button and then that span 104
is going to wrap a button of type submit with a class name of button space button secondary closed button 105
and inside of it we'll just have the text submit. 106
OK. 107
So let's save this and refresh and OK. 108
So looks pretty good so far. 109
Well doesn't look super good but we've at least got our input and our button here as well. 110
Let's go ahead and continue inside the next section