1
00:00:00,860 --> 00:00:06,300
In the less section we discussed why authentication is going to make a difference and exactly how our

2
00:00:06,300 --> 00:00:08,000
application behaves.

3
00:00:08,100 --> 00:00:13,530
We're not going to continue by tackling some of our re-act router setup and getting some different components

4
00:00:13,530 --> 00:00:18,270
to display on the screen depending on what route a user is currently visiting.

5
00:00:18,270 --> 00:00:23,640
After we do this initial setup of routes will then be able to add some different logic that toggles

6
00:00:23,640 --> 00:00:26,950
what a user is able to access inside of our application.

7
00:00:27,300 --> 00:00:32,280
So again I've said this Farleigh three times now if you're in this course kind of assuming that you

8
00:00:32,280 --> 00:00:35,290
know re-act kind of assume you know redux reactor router.

9
00:00:35,310 --> 00:00:37,960
Yeah I kind of assume you're somewhat familiar with that as well.

10
00:00:38,040 --> 00:00:42,180
But I'm going to cover re-act rudder assuming that you know very little or at least have never really

11
00:00:42,180 --> 00:00:44,140
used it in a large application.

12
00:00:44,220 --> 00:00:46,020
So let's get to it.

13
00:00:46,020 --> 00:00:50,040
The first thing I want to talk to you about regarding re-act router is I want to again point out to

14
00:00:50,040 --> 00:00:56,580
you that based on the route that a user is visiting inside of our application we want to show different

15
00:00:56,580 --> 00:00:57,950
content on the screen.

16
00:00:58,230 --> 00:01:05,550
So for the landing page over here if the user is at this route like email dot com slash I want to show

17
00:01:05,640 --> 00:01:11,370
our landing page or essentially some marketing stuff that tells our users exactly what this application

18
00:01:11,370 --> 00:01:14,460
is for when a user then navigates to the route.

19
00:01:14,500 --> 00:01:16,940
Email dot com slash surveys.

20
00:01:16,980 --> 00:01:22,200
I then want to show some different set of components on the screen and then the same thing for Surveys

21
00:01:22,200 --> 00:01:24,210
slash new as well.

22
00:01:24,300 --> 00:01:28,380
So we're going to set up a couple different routes inside of our application.

23
00:01:28,530 --> 00:01:35,190
A route is a pairing or kind of a rule you can think of between the address that user is looking at

24
00:01:35,520 --> 00:01:40,580
and the components that should be displayed on the screen at any given time.

25
00:01:40,620 --> 00:01:45,540
So let's flip over to our code editor and we're going to start doing some the setup with re-act router

26
00:01:48,500 --> 00:01:53,120
we're going to put all the configuration around the different navigation states of our application into

27
00:01:53,120 --> 00:01:54,830
the app G-S file.

28
00:01:54,980 --> 00:02:01,100
Remember the update js file is really responsible for all that initial due layer set up whereas our

29
00:02:01,100 --> 00:02:07,850
top level index J.S. file is responsible for all of our redux setup where all that kind of data set

30
00:02:07,850 --> 00:02:09,660
up of our application.

31
00:02:09,680 --> 00:02:16,660
So inside the data file We're going to start off by first importing the re-act router Dom library.

32
00:02:17,000 --> 00:02:23,960
So at the top we'll import and we're going to put it crudely brace there right now from re-act dash

33
00:02:23,960 --> 00:02:31,250
router dash DOM like so now if you've used earlier versions of re-act router like version 2 or Version

34
00:02:31,250 --> 00:02:32,870
3 that's totally fine.

35
00:02:32,930 --> 00:02:36,820
You might notice that the library name here has changed just to let a little bit.

36
00:02:36,860 --> 00:02:40,920
So there's now three distinct re-act Radford libraries.

37
00:02:41,210 --> 00:02:46,490
There's re-act rather Domm which is what we're using right here reactor outer Dohm contains a set of

38
00:02:46,490 --> 00:02:52,640
reactor outer helper's specifically themed around allowing you to navigate around the dorm or at least

39
00:02:52,640 --> 00:02:55,290
an environment that uses the browser Dom.

40
00:02:55,460 --> 00:03:01,670
There's also re-act rather native which is for use with re-act native and there's also the core re-act

41
00:03:01,670 --> 00:03:02,770
router library.

42
00:03:03,140 --> 00:03:08,630
The core re-act router library Shamash contains some logic that is shared between both re-act Rotterdam

43
00:03:08,990 --> 00:03:11,520
and the reactor at her native libraries.

44
00:03:11,570 --> 00:03:18,620
In the end in practice at this point all we really ever care about and I'm talking about like any application

45
00:03:18,620 --> 00:03:23,690
we probably ever work on we really just care about re-act router Dom and we don't really have to worry

46
00:03:23,690 --> 00:03:26,050
about those other two at all.

47
00:03:26,170 --> 00:03:30,680
And now the reactor router DHand library exports a couple of different helpers that we're going to want

48
00:03:30,680 --> 00:03:35,320
to import into this file or at least I should say just to add this file.

49
00:03:35,450 --> 00:03:40,300
The first thing that we're going to import is an object called browser router.

50
00:03:40,700 --> 00:03:47,870
And the second is an object called route like so the browser router can be thought of as the brains

51
00:03:47,870 --> 00:03:52,730
of re-act router is the thing that tells reactor router how to behave is the thing that looks at the

52
00:03:52,730 --> 00:03:58,990
current you are l and then changes a set of components that are visible on the screen at any given time.

53
00:03:59,210 --> 00:04:05,120
The route object right here is a re-act component that is used to set up a rule between a certain route

54
00:04:05,150 --> 00:04:09,860
that the user might visit inside an application and a set of components that will be actually visible

55
00:04:09,860 --> 00:04:10,770
on the screen.

56
00:04:11,090 --> 00:04:16,230
In practice I think that setting some of these things up is not really the worst thing in the world.

57
00:04:16,310 --> 00:04:21,650
So let's go through some initial set up here with some kind of dummy test components and we'll get a

58
00:04:21,650 --> 00:04:23,500
much better idea of what's going on.

59
00:04:23,570 --> 00:04:24,390
OK.

60
00:04:24,860 --> 00:04:31,070
So again I want to first do a little bit of setup with just some dummy components after we do these

61
00:04:31,070 --> 00:04:36,290
dummy components will then come back later on and create real versions of each of the components we're

62
00:04:36,290 --> 00:04:38,300
going to make be making use of.

63
00:04:38,630 --> 00:04:43,130
So we'll first create a couple of dummy components right above the app one.

64
00:04:43,130 --> 00:04:48,020
So I want to make a dummy component called header.

65
00:04:48,020 --> 00:04:53,210
This is going to be a functional component that's going to return a div and you know what let's make

66
00:04:53,210 --> 00:05:00,500
this nice and big let's make it like an H2 and it's going to contain an age two with the text header.

67
00:05:00,500 --> 00:05:06,450
And I'm going to repeat this same exact process three more times for the second one.

68
00:05:06,470 --> 00:05:11,900
I'm going to change the text to the dashboard dashboard.

69
00:05:12,380 --> 00:05:20,250
I want a survey a new survey new and then I want a landing as well.

70
00:05:20,780 --> 00:05:21,110
OK.

71
00:05:21,140 --> 00:05:27,020
So again we're going to get some dummy components like these right here working together nicely with

72
00:05:27,020 --> 00:05:32,240
re-act router and then over time we'll come back and replace each of these with a very real component

73
00:05:32,240 --> 00:05:34,870
that we create inside of our application.

74
00:05:34,910 --> 00:05:40,370
Now before we dive really into how we use these two objects the browser router and the route I think

75
00:05:40,370 --> 00:05:43,500
that will take a quick break so that this section doesn't run on too long.

76
00:05:43,610 --> 00:05:47,150
When we come back we're going to make use of these helpers from reactor out her door.

77
00:05:47,420 --> 00:05:52,000
Along with these dummy components to get some content to show up inside of our application.

78
00:05:52,000 --> 00:05:56,090
So quick break and I'll see you right back here in just one minute.