1
00:00:00,750 --> 00:00:04,160
In the last section we did some initial setup with re-act Rotterdam.

2
00:00:04,230 --> 00:00:09,220
We imported two helpers from the library and then we also created four dummy components.

3
00:00:09,240 --> 00:00:14,010
Now without further ado let's figure out how we actually make use of re-act writer Dom inside of our

4
00:00:14,010 --> 00:00:15,770
app component.

5
00:00:15,810 --> 00:00:20,490
The first thing I can do inside of here is clean out the hi there text that we currently have on the

6
00:00:20,490 --> 00:00:21,540
screen.

7
00:00:21,540 --> 00:00:27,000
I am going to leave this div inside of the app component for now because we are going to come back later

8
00:00:27,060 --> 00:00:33,490
and make use of this top level div right here to get some CSSA working properly inside of our application.

9
00:00:33,540 --> 00:00:40,260
So this div that we're going to leave right here solely about CSSA inside this div I'm going to place

10
00:00:40,590 --> 00:00:47,340
the browser router component so both the browser router and the outcome objects right here they are

11
00:00:47,340 --> 00:00:52,730
re-act components that we can freely return from any component that we create.

12
00:00:52,740 --> 00:01:01,350
So right here inside the app component I'll make browser router and I'm going to close the tag off like

13
00:01:01,350 --> 00:01:09,370
so that inside of your we are going to place a collection of different routes each route is going to

14
00:01:09,400 --> 00:01:15,280
specify a rule or kind of a relation between a possible address that a user can visit inside of our

15
00:01:15,280 --> 00:01:19,480
application and a component to actually display on the screen.

16
00:01:19,480 --> 00:01:25,160
Now before we start adding these routes in there is one tiny little gotcha.

17
00:01:25,240 --> 00:01:31,390
This browser router component right here expects to have at most one child at most.

18
00:01:31,450 --> 00:01:32,660
And when I'm talking about child.

19
00:01:32,830 --> 00:01:39,160
When I say at most one I'm talking about the components that we pass directly to the browser router

20
00:01:39,790 --> 00:01:41,780
we could not do something like this right here.

21
00:01:41,800 --> 00:01:44,220
These are two self-closing divs.

22
00:01:44,380 --> 00:01:48,480
They are two separate children that are being passed to browse router.

23
00:01:48,790 --> 00:01:52,990
If we attempted to run an application like this we would see an error message that said something like

24
00:01:53,350 --> 00:01:57,340
Hey the browser out only expects to get at most one child.

25
00:01:57,340 --> 00:02:04,720
So what that means is that we have to pass in just one component like so now due to triple.

26
00:02:04,760 --> 00:02:07,360
Like really look at this device here.

27
00:02:07,360 --> 00:02:10,460
Notice that when I have the two these are self-closing device.

28
00:02:10,600 --> 00:02:12,550
So we don't usually place self-closing divs.

29
00:02:12,550 --> 00:02:15,330
We usually have something little bit closer to this.

30
00:02:15,340 --> 00:02:20,140
I just wanted to do a quick example of two children so I'm going to delete the second one.

31
00:02:20,140 --> 00:02:22,030
We still have one child right here.

32
00:02:22,030 --> 00:02:26,740
Even though it has an opening and closing tag it still is exactly one child's component.

33
00:02:26,740 --> 00:02:28,500
Just to be clear.

34
00:02:28,650 --> 00:02:33,700
So now inside of this div is where we are going to set up some of the different routing rules of our

35
00:02:33,700 --> 00:02:34,720
application.

36
00:02:34,720 --> 00:02:42,070
With this route component we'll set up our first route to display the landing page to our users.

37
00:02:42,160 --> 00:02:44,530
So that's the first route I want to put together.

38
00:02:44,650 --> 00:02:51,640
So I'm going to place a route component and I'm going to give it configuration to tie together a possible

39
00:02:51,640 --> 00:02:58,090
route or a possible address a possible u r l that a user might visit inside of application and the component

40
00:02:58,090 --> 00:03:00,750
to display on the screen when the user goes there.

41
00:03:01,060 --> 00:03:06,850
So for this first route that I want to have displaying the landing component and remember I want to

42
00:03:06,850 --> 00:03:15,070
show that landing component when ever the user visits the route email the dot com just like Slash like

43
00:03:15,070 --> 00:03:16,360
basically e-mail the dot com.

44
00:03:16,360 --> 00:03:23,080
So basically the landing page of our application so to set that relationship up I'm going to pass in

45
00:03:23,110 --> 00:03:36,130
a prop of path equal to forward slash and component's equal to with curly braces landing like so and

46
00:03:36,130 --> 00:03:42,220
then we'll close it off with a self-closing tag with reactor router the forward slash like this just

47
00:03:42,220 --> 00:03:45,810
by itself is assumed to mean the root route of the application.

48
00:03:45,850 --> 00:03:50,800
So this would be this route right here would come into effect whenever the user went to an address like

49
00:03:50,920 --> 00:03:52,220
email dot com.

50
00:03:52,360 --> 00:03:58,540
Assuming that our application is hosted that e-mail dot com we never specify the actual domain name

51
00:03:58,540 --> 00:03:58,980
in here.

52
00:03:58,990 --> 00:04:05,700
So we are not doing something like email or dot com or Heroku app dot com or whatever our domain is.

53
00:04:05,770 --> 00:04:09,370
It is just the route portion of the URL.

54
00:04:09,490 --> 00:04:15,040
So whenever a user goes to our route shows land component that's it that's all that's going on here.

55
00:04:15,550 --> 00:04:18,080
So I think we could probably test this out inside the browser.

56
00:04:18,080 --> 00:04:24,700
I'm going to see this component and it'll change back over to the browser and wait for the refresh.

57
00:04:24,710 --> 00:04:32,910
OK so here's localhost 3000 and we'll wait for our little refresh up here.

58
00:04:32,940 --> 00:04:36,060
Now when the page refreshes you're going to see a warning message.

59
00:04:36,060 --> 00:04:41,790
If you have the console open and it says hey you have some unused variables all this means to say is

60
00:04:41,790 --> 00:04:47,930
that inside of our jails file we created a couple of different variables but we never actually use them.

61
00:04:47,940 --> 00:04:49,260
This is just a warning right here.

62
00:04:49,260 --> 00:04:54,750
It is not an error message it's just saying hey just so you know you have some unused variables you

63
00:04:54,750 --> 00:04:56,030
might want to clean those up.

64
00:04:56,070 --> 00:04:58,900
So it's just giving us a little bit of help.

65
00:04:58,920 --> 00:05:03,510
Now what's more relevant is the fact that we see the text on the screen of landing.

66
00:05:03,660 --> 00:05:04,170
Great.

67
00:05:04,200 --> 00:05:05,250
That's basically what we want.

68
00:05:05,250 --> 00:05:08,470
We just want to see the landing component appear on the screen.

69
00:05:08,730 --> 00:05:15,630
So we now have at least one component that shows up when a user visits the routes route of our application.

70
00:05:15,630 --> 00:05:19,950
Let's continue in the next section and we're going to start to add on a couple more routes to this thing

71
00:05:20,230 --> 00:05:25,260
that uses the dashboard and a survey new components and we add those additional routes on.

72
00:05:25,260 --> 00:05:30,960
We're going to start to see some slightly mysterious behavior so let's continue the next section and

73
00:05:30,960 --> 00:05:36,780
we're going to see what happens and we'll figure out how re-act router handles some of its more advanced

74
00:05:36,870 --> 00:05:37,750
routing rules.

75
00:05:37,860 --> 00:05:39,890
So I'll see you in just a second.