1
00:00:00,790 --> 00:00:05,230
In the last section we spoke a little bit about the different route configuration that we'll have for

2
00:00:05,260 --> 00:00:08,080
each of our different screens and our application.

3
00:00:08,080 --> 00:00:11,740
I want to take this time now to start working on our first screen.

4
00:00:11,800 --> 00:00:18,900
So we're going to create a post index component and associated with the route of our application for

5
00:00:18,900 --> 00:00:19,010
it.

6
00:00:19,030 --> 00:00:23,650
Now the Post's index component that we're going to make is just going to contain a little bit of boilerplate.

7
00:00:23,650 --> 00:00:28,310
So we're not going to put any special configuration or GSX inside of there just yet.

8
00:00:28,390 --> 00:00:32,530
We're going to take care of the routing first and then come back to that side of things.

9
00:00:32,650 --> 00:00:36,070
So let's get to it inside of my code editor.

10
00:00:36,160 --> 00:00:41,170
I'm going to find my component's directory and I'm going to make a new file in there to house my posts

11
00:00:41,260 --> 00:00:42,790
index component.

12
00:00:43,030 --> 00:00:45,390
So I'll say PPOs index Dot.

13
00:00:45,450 --> 00:00:46,160
Yes.

14
00:00:46,480 --> 00:00:51,750
As a new file and then inside of your will import react in the Component class.

15
00:00:51,870 --> 00:00:54,140
Create our component and then export it.

16
00:00:54,610 --> 00:01:03,740
So import reacts and components from react within create our POWs index components.

17
00:01:06,040 --> 00:01:11,350
Which is going to extend the component class and then again for right now we don't really need any specially

18
00:01:11,410 --> 00:01:12,650
special implementation.

19
00:01:12,670 --> 00:01:17,780
I just want to return something that lets me know that this component showing up on the screen.

20
00:01:17,860 --> 00:01:25,930
So how about a div that says Post index like so that I'm at the bottom the file we can export default

21
00:01:26,440 --> 00:01:28,170
posts index.

22
00:01:28,550 --> 00:01:33,490
OK so that looks like something that we can at least get started with for now I'm going to close this

23
00:01:33,490 --> 00:01:37,620
file out now and we're going to go back to the index dot G-S file.

24
00:01:37,660 --> 00:01:42,850
Now before we actually import that post index component I want to do a little bit of cleanup inside

25
00:01:42,850 --> 00:01:43,820
of this file.

26
00:01:43,870 --> 00:01:48,400
So I want to clean up some of the test code that we added in in the previous section.

27
00:01:48,540 --> 00:01:52,840
I'm going to start by cleaning up the two test components that we create inside of here which is the

28
00:01:52,840 --> 00:01:55,210
hello and goodbye components.

29
00:01:55,240 --> 00:01:58,890
So let's take care of both of those.

30
00:01:58,900 --> 00:02:02,470
Then inside of the browser router tag you can find that div.

31
00:02:02,470 --> 00:02:03,460
Here it is right here.

32
00:02:03,640 --> 00:02:08,800
And I'm going to delete the hard coded header text and the two existing routes that we have.

33
00:02:08,810 --> 00:02:10,850
So let's take those out like so.

34
00:02:11,410 --> 00:02:15,740
Now one last piece of wrap up or clean up I should say that I want to do inside of here.

35
00:02:15,940 --> 00:02:19,090
You'll notice that we're still importing this app component.

36
00:02:19,090 --> 00:02:25,150
So in the past we used the app component as a sort of wrapper or main location of bootstrapping or starting

37
00:02:25,150 --> 00:02:26,890
up our application.

38
00:02:26,890 --> 00:02:31,660
Now that we have re-act router we don't really have any central single component going on.

39
00:02:31,750 --> 00:02:37,000
So I don't really need this app component anymore so I'm going to do a little bit of cleanup by removing

40
00:02:37,000 --> 00:02:43,630
the import statement for it and then I'm also going to delete the output of J.S. file and delete that

41
00:02:43,630 --> 00:02:44,350
as well.

42
00:02:45,980 --> 00:02:46,370
OK.

43
00:02:46,480 --> 00:02:47,800
So it looks good.

44
00:02:48,490 --> 00:02:53,770
So now we can start by importing the Post's index component and all place that import statement right

45
00:02:53,770 --> 00:03:02,920
underneath the import statement of our reducers still say import posts index from component's slash

46
00:03:03,010 --> 00:03:06,460
PPOs index OK.

47
00:03:06,480 --> 00:03:09,930
So now here comes the hard part at least as far as re-act writer is concerned.

48
00:03:10,170 --> 00:03:18,300
We want to associate the post index component with the slash path in our application so to do so we're

49
00:03:18,300 --> 00:03:21,140
going to start off by defining a route.

50
00:03:21,630 --> 00:03:27,010
I'll say when every user goes to the path of just slash by itself just slash.

51
00:03:27,150 --> 00:03:36,660
I want to show the component component posts index and I'll close the tag off at the end as well.

52
00:03:37,360 --> 00:03:38,960
OK so this looks like a good start.

53
00:03:39,000 --> 00:03:44,280
At least something we can test out inside the browser and make sure that we are able to navigate to

54
00:03:44,280 --> 00:03:48,080
the root root of our application and see this component appear on the screen.

55
00:03:48,180 --> 00:03:53,190
Now before we go any further before we do anything else I want to tell you that the way that we're putting

56
00:03:53,190 --> 00:04:00,240
together our routing right now is going to introduce a very subtle very small little bug guy so I know

57
00:04:00,240 --> 00:04:04,370
it's really frustrating when I show you something that's like not the way to do it right.

58
00:04:04,380 --> 00:04:07,790
Because when you're sitting there like well what's the right way what's the wrong way.

59
00:04:07,800 --> 00:04:13,710
The reason that I'm going to let this bug kind of display itself or appear in a later section is that

60
00:04:13,710 --> 00:04:18,810
this is something that I guarantee you you're going to run into yourself the first time you use re-act

61
00:04:18,810 --> 00:04:19,620
router.

62
00:04:19,620 --> 00:04:25,350
And so I want to walk through this very common mistake that everyone runs into when they first use re-act

63
00:04:25,350 --> 00:04:25,910
router.

64
00:04:26,070 --> 00:04:32,490
So again I tell you something that we're doing here is just slightly just very very slightly off but

65
00:04:32,490 --> 00:04:37,260
we're going to fix it in a later section once it becomes apparent what that problem is.

66
00:04:37,320 --> 00:04:42,210
And just to kind of cut to the chase here it's really just one additional word that we're going to provide

67
00:04:42,240 --> 00:04:44,100
as a prompt to this route component right here.

68
00:04:44,100 --> 00:04:46,070
So it's going to be a very small change.

69
00:04:46,080 --> 00:04:51,750
But again I really want to just very naturally run into this problem so that you know what to do when

70
00:04:51,750 --> 00:04:53,550
you see it on your own application.

71
00:04:54,290 --> 00:04:54,530
OK.

72
00:04:54,690 --> 00:04:59,540
So with that little caveat or disclaimer out of the way let's flip back to the browser and test the

73
00:04:59,540 --> 00:05:00,750
thing out.

74
00:05:00,780 --> 00:05:03,380
So let's go back to browser.

75
00:05:03,450 --> 00:05:05,890
I'm going to refresh the page.

76
00:05:05,990 --> 00:05:08,760
You'll notice that I'm on localhost 80 80 right now.

77
00:05:08,760 --> 00:05:16,790
And so if we're just ADHD by itself re-act Roger interprets this as being really localhost ADHD slash

78
00:05:16,940 --> 00:05:20,450
and so the only route character that's in there is slash right now.

79
00:05:20,500 --> 00:05:24,590
And so that matches up correctly against the post index component.

80
00:05:25,090 --> 00:05:25,410
Okay.

81
00:05:25,430 --> 00:05:30,110
So it looks like we're at least off to a good start for putting together our first route inside of our

82
00:05:30,110 --> 00:05:31,280
application.

83
00:05:31,280 --> 00:05:35,990
We're going to kind of pause on re-act router for now and we're going to work on the post index page

84
00:05:36,260 --> 00:05:40,550
and make sure that we wire up the redux side of things correctly from here on out.

85
00:05:40,580 --> 00:05:42,880
So we're going to take a little bit of break on the reactor router side.

86
00:05:42,880 --> 00:05:47,030
We're going to take care of some of the data fetching stuff and then we're going to come back and finish

87
00:05:47,030 --> 00:05:50,940
up some of the other route definitions inside of this file right here.

88
00:05:51,140 --> 00:05:55,250
So I'll see in the next section where we're going to start doing a little bit more work on the post

89
00:05:55,340 --> 00:05:56,270
inducts component.