1

00:00:00,920  -->  00:00:05,340
In the last section we spoke about that app that we're going to be building inside of this chapter and

2

00:00:05,340  -->  00:00:11,970
we also cloned our starter repo and install the dependencies at the terminal I took the liberty of running

3

00:00:12,030  -->  00:00:15,780
NPM start here just to start our development server up.

4

00:00:15,990  -->  00:00:20,940
And as you can see I've got it launched in my browser over here as well and I see just reacts simple

5

00:00:20,940  -->  00:00:22,040
starter.

6

00:00:22,660  -->  00:00:23,320
OK.

7

00:00:23,610  -->  00:00:28,950
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

00:00:28,950  -->  00:00:31,440
re-act components are going to form our application.

9

00:00:31,470  -->  00:00:36,090
So this is always a great step to take you know take the mockups that we have and say all right the

10

00:00:36,090  -->  00:00:38,550
search bar at the top is going to be its own component.

11

00:00:38,550  -->  00:00:41,530
And then the table is going to be its own components so on and so on.

12

00:00:41,880  -->  00:00:47,520
So I took our mockup and I divided it up into a bunch of different sections to give us kind of a plan

13

00:00:47,520  -->  00:00:49,990
of how we're going to divide the supplication out.

14

00:00:50,700  -->  00:00:56,880
So at the very top very simple one is going to be the search bar search bar is going to be responsible

15

00:00:56,880  -->  00:01:00,860
for showing the search input and a search button.

16

00:01:00,870  -->  00:01:02,450
Pretty simple component.

17

00:01:02,460  -->  00:01:08,140
It's also going to be responsible for kicking off a X calling an action Creator in redux.

18

00:01:08,340  -->  00:01:13,560
Whenever we enter you know a city name and then click on search and try to submit that search it needs

19

00:01:13,560  -->  00:01:17,730
to have the ability to tell Reebok's like hey something just happened you need to go fetch some data

20

00:01:17,730  -->  00:01:18,570
.

21

00:01:18,900  -->  00:01:24,110
Next we've got the forecast list and we might end up changing the name of it a little bit.

22

00:01:24,120  -->  00:01:29,130
But you can kind of just imagine that you know it's the general overall chart component here that the

23

00:01:29,130  -->  00:01:31,130
general overall table component.

24

00:01:31,790  -->  00:01:37,890
In previous sections when we rendered lists we had a list component and then kind of a list item component

25

00:01:37,890  -->  00:01:43,770
that represented a single row this time since the overall list is pretty simple we're just going to

26

00:01:43,770  -->  00:01:46,010
combine the two into a single component.

27

00:01:46,230  -->  00:01:52,710
So one component that shows the overall table and knows how to render each of the line items inside

28

00:01:52,740  -->  00:01:55,490
of it as well.

29

00:01:55,500  -->  00:01:58,260
Third we're going to have a separate chart component.

30

00:01:58,380  -->  00:02:02,400
So the char you know for each row that we make we have three charts.

31

00:02:02,400  -->  00:02:06,400
We're not going to want to like copy paste that code over and over for creating a chart.

32

00:02:06,690  -->  00:02:11,970
We want to just have a single straightforward chart component that we can pass our data to and have

33

00:02:11,970  -->  00:02:15,680
a reasonable expectation that hey I'm going to get a chart out of this thing.

34

00:02:15,990  -->  00:02:16,690
So this is a start.

35

00:02:16,800  -->  00:02:22,140
Starting to get into where we make truly reusable components that we can use even across projects if

36

00:02:22,140  -->  00:02:24,230
you want to write a chart like this.

37

00:02:24,230  -->  00:02:28,530
You know we could probably think of a couple of dozen different apps that end up using a chart that

38

00:02:28,530  -->  00:02:31,230
looked just like this.

39

00:02:31,260  -->  00:02:34,940
Finally as before we're going to have the overall application component.

40

00:02:35,190  -->  00:02:40,200
So the component that says like Okay take the search bar take the forecast list and just render them

41

00:02:40,200  -->  00:02:41,310
onto page.

42

00:02:41,340  -->  00:02:44,740
So it's kind of like that glue component that ties everything together.

43

00:02:45,300  -->  00:02:45,620
All right.

44

00:02:45,660  -->  00:02:49,500
So we're going to end up referring back to this diagram a couple of times.

45

00:02:49,510  -->  00:02:50,780
So I'm going to keep it up.

46

00:02:50,790  -->  00:02:53,990
But on a second monitor over here.

47

00:02:55,260  -->  00:02:55,650
OK.

48

00:02:55,680  -->  00:03:00,030
So to get started we're going to focus on that search bar.

49

00:03:00,270  -->  00:03:01,920
You don't open up my code editor here

50

00:03:06,720  -->  00:03:08,030
and there we go.

51

00:03:08,070  -->  00:03:10,170
We've got our source directory right there.

52

00:03:10,680  -->  00:03:15,190
So by working on the search bar I wanted to first ask ourselves a quick question here.

53

00:03:15,220  -->  00:03:19,280
You know what does the search bar do is it going to be a component or a container.

54

00:03:19,320  -->  00:03:22,020
But that's the first question we always need to ask ourselves.

55

00:03:22,410  -->  00:03:27,630
Well as we were just discussing the search bar needs to have the ability to modify the state of our

56

00:03:27,630  -->  00:03:33,950
application by dispatching actions right and to call an action creator needs to say like hey someone

57

00:03:33,950  -->  00:03:37,420
has entered a search term we need to make an API request.

58

00:03:37,830  -->  00:03:42,240
So it definitely needs to be able to talk to rebox which means we definitely are going to want to make

59

00:03:42,240  -->  00:03:48,330
it a container because a container has the ability to talk to redux whereas a normal component does

60

00:03:48,330  -->  00:03:52,170
not a normal component just you know shows some content on the screen.

61

00:03:52,210  -->  00:03:54,420
That's all that does.

62

00:03:54,510  -->  00:04:02,760
So we'll get started by adding a new directory here inside of our source folder called Con Tinners.

63

00:04:03,300  -->  00:04:07,880
And then inside of it we will make our search bar so search bar.

64

00:04:08,040  -->  00:04:15,870
JS then inside here we're going to go ahead and start scaffolding out our search bar and we'll start

65

00:04:15,870  -->  00:04:20,750
nice and simple just you know get something to show up on the screen.

66

00:04:21,030  -->  00:04:25,290
So at the top we'll import react and our component

67

00:04:28,800  -->  00:04:39,720
from react and then we'll export our default class search bar which will extend component and inside

68

00:04:39,720  -->  00:04:44,600
of your will and from implement implement the default render method.

69

00:04:44,600  -->  00:04:51,830
And for right now we're going to have to show a form with a class name of inputs group

70

00:04:56,640  -->  00:05:02,940
and then we'll just show a simple text and put inside of that the class name here is solely from Bootstrap

71

00:05:03,450  -->  00:05:07,120
CSSA which is already hooked up inside the boiler plate package.

72

00:05:07,140  -->  00:05:10,200
So this is just a class thing that's coming over from Bootstrap here.

73

00:05:10,200  -->  00:05:12,720
Nothing beyond that special to it.

74

00:05:13,290  -->  00:05:17,400
So this is you know a good enough start for us to actually just show something on the page just to get

75

00:05:17,400  -->  00:05:20,160
something to render up so I can save this.

76

00:05:20,160  -->  00:05:24,420
And then we need to make sure that we actually insert this into our app component as well so it can

77

00:05:24,420  -->  00:05:26,500
actually show up on the screen.

78

00:05:26,640  -->  00:05:28,330
So going to flip over to abduct.

79

00:05:28,400  -->  00:05:28,980
Yes.

80

00:05:29,010  -->  00:05:40,700
Which is inside of the components directory and at the top we will import search bar from.

81

00:05:42,000  -->  00:05:44,400
And we are inside of the components directory right now.

82

00:05:44,400  -->  00:05:49,440
So we're going to walk up to source go into containers and then get search bar.

83

00:05:49,440  -->  00:06:00,000
So we'll walk up go into containers and it will get a search bar and then instead of the silly little

84

00:06:00,000  -->  00:06:05,770
text that we have in here right now we will just replace it with search bar.

85

00:06:05,850  -->  00:06:07,280
OK.

86

00:06:08,560  -->  00:06:14,930
You know flip over to my browser now and will refresh the page.

87

00:06:15,120  -->  00:06:21,690
Just make sure everything is set up correctly and it looks like we've got input here.

88

00:06:21,690  -->  00:06:22,460
Very good.

89

00:06:22,800  -->  00:06:25,430
So we're going to go on that end.

90

00:06:26,980  -->  00:06:27,420
OK.

91

00:06:27,450  -->  00:06:29,580
So now that we know that we're showing the search bar correctly.

92

00:06:29,760  -->  00:06:34,370
Let's do a little bit more work on it before we go into the next section.

93

00:06:34,470  -->  00:06:38,810
The input in this case is not alone.

94

00:06:38,820  -->  00:06:40,120
It's not sitting by itself.

95

00:06:40,140  -->  00:06:42,290
We've also got the search button on here as well.

96

00:06:42,300  -->  00:06:47,430
So let's add a button on here and call it good for this section.

97

00:06:47,760  -->  00:06:50,110
So I'm going to add a span here.

98

00:06:50,130  -->  00:06:53,730
Again we're going to make use of some built in Bootstrap styling.

99

00:06:53,730  -->  00:06:59,310
So if you're ever curious about you know where are these the structure of this HTL are the class names

100

00:06:59,310  -->  00:07:00,470
are coming from.

101

00:07:00,510  -->  00:07:05,010
You can always go and check out the bootstrap documentation which will tell you everything you could

102

00:07:05,010  -->  00:07:06,670
possibly want to know.

103

00:07:06,900  -->  00:07:16,320
In our case we're going to have this span with a class name of input group button and then that span

104

00:07:16,500  -->  00:07:30,870
is going to wrap a button of type submit with a class name of button space button secondary closed button

105

00:07:31,800  -->  00:07:35,480
and inside of it we'll just have the text submit.

106

00:07:36,330  -->  00:07:36,770
OK.

107

00:07:36,810  -->  00:07:43,390
So let's save this and refresh and OK.

108

00:07:44,040  -->  00:07:45,520
So looks pretty good so far.

109

00:07:45,810  -->  00:07:51,790
Well doesn't look super good but we've at least got our input and our button here as well.

110

00:07:53,400  -->  00:07:56,580
Let's go ahead and continue inside the next section