1
00:00:00,930 --> 00:00:06,540
In the last section we installed the re-act need of router flux library and it had a little discussion

2
00:00:06,540 --> 00:00:09,170
about scenes and they decided to get right to work.

3
00:00:09,420 --> 00:00:14,700
Again this is really a library where getting your hands on practice with it is much more rewarding than

4
00:00:14,760 --> 00:00:15,710
a long lecture.

5
00:00:15,870 --> 00:00:19,800
So let's just dive right it inside my SIRC directory.

6
00:00:19,830 --> 00:00:22,580
I'm going to make a new file called rowdier.

7
00:00:22,640 --> 00:00:25,210
So make a new file inside their router.

8
00:00:25,250 --> 00:00:26,390
J.S..

9
00:00:26,460 --> 00:00:31,680
The purpose of this file is to have one single location where I can tweak all the different components

10
00:00:31,740 --> 00:00:34,800
that a user can navigate to inside of our application.

11
00:00:34,800 --> 00:00:41,670
So in this file where we are going to define all the different routes that a user can visit we will

12
00:00:41,670 --> 00:00:43,550
be creating a component inside of here.

13
00:00:43,620 --> 00:00:47,810
So let's add some boilerplate for making a component at the top.

14
00:00:47,810 --> 00:00:56,740
We will import re-act from re-act underneath that we will define a new component called router component.

15
00:00:57,730 --> 00:00:59,870
That will be a functional component.

16
00:01:00,340 --> 00:01:02,530
Right now I'll leave an empty return statement.

17
00:01:02,530 --> 00:01:04,450
We'll come back to that in just one second.

18
00:01:04,630 --> 00:01:12,310
And then at the bottom will place our export default router component like so now we're going to add

19
00:01:12,310 --> 00:01:14,310
some more import statements at the top here.

20
00:01:14,320 --> 00:01:19,960
We're going to import two things from the re-act need of retroflex library and we're also going to import

21
00:01:20,020 --> 00:01:22,480
our log in form as well.

22
00:01:22,480 --> 00:01:33,370
So we'll import scene and router from re-act native router flux and we'll also import loggin form from

23
00:01:34,000 --> 00:01:37,960
components log in form like so.

24
00:01:37,960 --> 00:01:38,160
All right.

25
00:01:38,160 --> 00:01:40,230
Now here's the way that we use this router.

26
00:01:40,390 --> 00:01:44,620
This is going to be the top level component inside of our application.

27
00:01:44,890 --> 00:01:48,520
So inside of our return statement we are going to place our router

28
00:01:51,520 --> 00:01:56,830
and then inside of your we are going to place a couple of different scene components.

29
00:01:56,950 --> 00:02:01,750
So each of these scenes right here are going to represent some distinct route that a user can navigate

30
00:02:01,750 --> 00:02:03,820
to inside of our application.

31
00:02:03,820 --> 00:02:09,850
Now there is one requirement of re-act native router flux and that is that it must have one singular

32
00:02:09,970 --> 00:02:11,900
parent scene.

33
00:02:12,040 --> 00:02:19,480
So immediately inside of the router I'm going to place a scene this scene right here will be referred

34
00:02:19,480 --> 00:02:25,810
to as our route seen or our parent seen all the different routes that we are going to create are going

35
00:02:25,810 --> 00:02:29,260
to be children of this parents seen right here.

36
00:02:29,260 --> 00:02:32,670
Every single scene that we create has to have a key assigned to it.

37
00:02:32,680 --> 00:02:36,080
And remember in the last section we spoke very briefly about keys.

38
00:02:36,100 --> 00:02:42,730
So for this parent or root scene that we just created I'm going to pass it a prop of key and that's

39
00:02:42,730 --> 00:02:45,120
going to be a string route like so.

40
00:02:45,160 --> 00:02:51,780
So that is identifying this particular scene that inside of here we are going to create one more scene.

41
00:02:52,360 --> 00:02:57,320
This next scene that we are going to create will be responsible for showing our log and form component.

42
00:02:57,340 --> 00:03:00,840
So inside the scene component will place scene.

43
00:03:01,720 --> 00:03:06,930
We are going to give this one a key of log in whenever this scene is shown on the screen.

44
00:03:06,940 --> 00:03:13,660
We are going to attempt to show the component log in form and then we're also going to give this thing

45
00:03:13,690 --> 00:03:18,190
a title of Please log in.

46
00:03:18,190 --> 00:03:24,050
And then finally we're going to close off the scene tag at the very far right hand side like so all

47
00:03:24,090 --> 00:03:28,860
right now the last thing we have to do is to use this router inside of our application.

48
00:03:29,010 --> 00:03:32,790
We're going to wire this thing up and make sure that our router component is actually showed inside

49
00:03:32,790 --> 00:03:36,680
of our app and then we'll do a little bit of testing inside of our simulator.

50
00:03:37,050 --> 00:03:44,820
So right now let's go back on over to our outtalk J.S. file inside of us we will import the router that

51
00:03:44,820 --> 00:03:46,070
we just created.

52
00:03:46,410 --> 00:03:55,930
So import router from router then down inside of our render method I'll find the log and form that we

53
00:03:55,930 --> 00:03:57,130
were showing previously.

54
00:03:57,130 --> 00:04:03,130
So no longer do we always want to be showing the log in form now instead we want to be showing the router

55
00:04:03,220 --> 00:04:08,260
and allowing the router to decide what set of components to show us something to replace the log in

56
00:04:08,260 --> 00:04:13,400
form here with router hoops router like so.

57
00:04:14,200 --> 00:04:18,800
All right let's flip on over to our simulator and just see what happens.

58
00:04:18,850 --> 00:04:21,090
Let's do a little bit of testing see how things go.

59
00:04:21,280 --> 00:04:23,590
So refresh the simulator.

60
00:04:23,590 --> 00:04:25,350
It's going to take a moment to load up.

61
00:04:25,350 --> 00:04:30,440
Just because we are importing the re-act native router flux library for the first time.

62
00:04:30,520 --> 00:04:35,680
So if you pull up in your packager you might actually see the progress and it looks like it's all done

63
00:04:35,680 --> 00:04:36,340
here.

64
00:04:36,520 --> 00:04:41,710
And so now on the screen we can see very simply at the top we have some text that says Please log in.

65
00:04:41,830 --> 00:04:44,970
And then underneath that we've got our actual log in form.

66
00:04:45,010 --> 00:04:45,330
Cool.

67
00:04:45,340 --> 00:04:48,530
So as you can see this is at least a good start.

68
00:04:48,730 --> 00:04:51,990
Let's take a break right now and we're going to continue in the next section.