1
00:00:01,080 --> 00:00:04,560
We've now done a whole bunch of discussion about the out there we're going to build you know talked

2
00:00:04,560 --> 00:00:07,950
about challenges around it and I don't think we can put off any longer.

3
00:00:07,950 --> 00:00:11,230
I think it's really time to start working on this application.

4
00:00:11,260 --> 00:00:16,890
So unless I actually did start up the installation of our new app so my installation is complete here

5
00:00:17,670 --> 00:00:22,950
I'm going to change into my project directory and I'm calling the app manager.

6
00:00:22,980 --> 00:00:26,830
So I'm changing into the Manager Project file folder.

7
00:00:27,210 --> 00:00:29,190
I just started my code editor.

8
00:00:29,520 --> 00:00:32,920
Our goal in this section is to get through a whole bunch of set up.

9
00:00:32,990 --> 00:00:36,860
OK so we've kind of got a real big stack of set up to do.

10
00:00:37,020 --> 00:00:40,290
We have to install re-act we have to install redux.

11
00:00:40,290 --> 00:00:42,300
We have to hook up those index files.

12
00:00:42,300 --> 00:00:45,950
We have to bring over our default components.

13
00:00:46,060 --> 00:00:48,470
Definitely a little bit of setup here.

14
00:00:48,510 --> 00:00:53,940
I know that the server can get a little bit tedious but you know there's a lot of just having mastery

15
00:00:53,940 --> 00:00:56,380
over that default setup I think is very valuable.

16
00:00:56,430 --> 00:01:00,690
And so even though this is like the fourth time that we're going through the set up I really think it

17
00:01:00,690 --> 00:01:05,830
is a valuable exercise to just figure out how this stuff is all put together from scratch.

18
00:01:06,390 --> 00:01:09,640
Okay so then mind let's get to it.

19
00:01:10,050 --> 00:01:14,050
I don't really necessarily have any set order of you know what the best way to go about this is I think

20
00:01:14,050 --> 00:01:20,370
we're just going to do this on a you know whatever's whatever is easiest to get it started sort of way.

21
00:01:20,370 --> 00:01:25,530
So I think first we'll install some dependencies then we'll set up our boiler plate and then we'll bring

22
00:01:25,530 --> 00:01:27,720
over some default components.

23
00:01:27,720 --> 00:01:33,110
So the first thing we're going to do is install the redux and re-act redux libraries.

24
00:01:33,150 --> 00:01:34,550
So I'm back at the command line.

25
00:01:34,920 --> 00:01:41,990
I'll run and PM install dash dash save re-act redux and redux.

26
00:01:42,030 --> 00:01:46,880
So remember the re-act redux library is specifically the bindings between react and redux.

27
00:01:46,890 --> 00:01:50,860
That's why we're installing that and of course redux is just redux.

28
00:01:51,210 --> 00:01:53,030
So we don't really need to watch the progress bar here.

29
00:01:53,040 --> 00:01:57,670
We can let it do its thing and flip back over to our codebase.

30
00:01:57,720 --> 00:02:02,130
So next I think we should set up our route component remember the root component is we're going to create

31
00:02:02,130 --> 00:02:03,600
our redux store.

32
00:02:03,600 --> 00:02:09,180
We're going to place that provider tag and they're going to make sure that the two index files point

33
00:02:09,240 --> 00:02:11,520
out that root component.

34
00:02:11,590 --> 00:02:16,590
So inside of my project directory or make a new folder that's going to house all the code for our project

35
00:02:17,800 --> 00:02:24,990
and I can call just SIRC and then side if you're going to make my root component which I'm going to

36
00:02:24,990 --> 00:02:29,050
call Apgar J.S. OK.

37
00:02:29,060 --> 00:02:39,440
So Years of us will get started by importing react and component because we are going to create a component

38
00:02:39,440 --> 00:02:44,060
in here and I am going to make it a class based component for reasons that we'll talk about in a little

39
00:02:44,060 --> 00:02:53,130
bit will import the provider tag from re-act redux.

40
00:02:53,360 --> 00:02:59,510
We'll import that create store method from redux.

41
00:02:59,510 --> 00:03:09,200
And you know what let's import the view and text tags from re-act native as well.

42
00:03:09,370 --> 00:03:13,230
You can also tell that I have not yet said it might yes Slint configuration.

43
00:03:13,230 --> 00:03:15,930
You know I'm going to do that here between the next break.

44
00:03:16,390 --> 00:03:18,250
So right now I'm going to go just without.

45
00:03:18,360 --> 00:03:18,810
Lint.

46
00:03:18,850 --> 00:03:20,460
No big deal.

47
00:03:20,470 --> 00:03:22,480
Next we'll create our root component.

48
00:03:22,480 --> 00:03:33,220
So class app extends component will place our render method inside of your and by default we will return

49
00:03:34,360 --> 00:03:40,700
our provider tag and inside of they're going to place a single view

50
00:03:44,510 --> 00:03:45,350
with my textbook

51
00:03:48,950 --> 00:03:50,710
and I'm going to say hello right now.

52
00:03:50,710 --> 00:03:52,790
Now of course I'm probably gonna be running this on iOS.

53
00:03:52,810 --> 00:03:58,420
So as we've seen we're getting a little bit of a overlay on the top nav bar or the top like default

54
00:03:58,420 --> 00:03:59,740
connection bar on iOS.

55
00:03:59,740 --> 00:04:00,880
No big deal.

56
00:04:00,880 --> 00:04:04,600
We're going to replace this thing really quickly but I just want to have something on the screen just

57
00:04:04,600 --> 00:04:07,040
to make sure that you know something's actually working.

58
00:04:07,660 --> 00:04:15,730
So finally at the bottom you export default app now last up in here we need to make sure that we give

59
00:04:15,730 --> 00:04:19,430
the provider tag an instance of a redux store.

60
00:04:19,480 --> 00:04:25,180
So remember that provider tag is what connects to all those different connect tags that we scatter about

61
00:04:25,180 --> 00:04:30,730
our application and the provider tag make sure that all those connect tags can get access to the store

62
00:04:31,030 --> 00:04:34,870
grab our redux state and then pass it off to individual components.

63
00:04:35,230 --> 00:04:44,320
So inside the provider tag will pass it a store with create store like so and then we're going to I

64
00:04:44,320 --> 00:04:46,680
think that this component is probably in a pretty good place right now.

65
00:04:46,840 --> 00:04:51,160
So we'll go ahead and we're wired up to our two index files at the top level.

66
00:04:51,490 --> 00:04:57,280
So inside of my index Android J us let's go ahead and you know we can probably clear out just about

67
00:04:57,280 --> 00:04:58,680
everything in here.

68
00:04:59,080 --> 00:05:06,760
I'll take out the top import and take out all of the other imports re-act native and just leave behind

69
00:05:06,760 --> 00:05:11,280
app registry because we do know that we need that app registry component.

70
00:05:11,290 --> 00:05:12,610
Now here comes the real fun part.

71
00:05:12,610 --> 00:05:18,340
We get to delete just about everything in here except for that app registry registry component tag at

72
00:05:18,340 --> 00:05:20,110
the bottom.

73
00:05:20,440 --> 00:05:29,940
So we will import app from source app and install instead of returning this little manager component.

74
00:05:29,950 --> 00:05:33,540
You know the default line will return our new component.

75
00:05:33,550 --> 00:05:36,030
The one that we just created the app component.

76
00:05:36,160 --> 00:05:42,240
So let's say that I think that the index Android js file now looks pretty darn good.

77
00:05:42,550 --> 00:05:47,040
So I'm going to take all of this and I copy it and I'll pull it over to the index.

78
00:05:47,050 --> 00:05:49,420
Iowa SJS file as well and save it.

79
00:05:49,560 --> 00:05:49,890
OK.

80
00:05:49,930 --> 00:05:50,550
So this is good.

81
00:05:50,560 --> 00:05:51,400
Good start.

82
00:05:51,400 --> 00:05:56,100
We've now got something Nashville to run in both the Android and iOS simulators.

83
00:05:56,140 --> 00:05:58,720
So I think that's enough set up for this section.

84
00:05:58,930 --> 00:06:01,460
Let's take a quick break.

85
00:06:02,050 --> 00:06:08,650
During the break you know one last thing I want to do is going to start up my simulator so run re-act

86
00:06:08,680 --> 00:06:14,770
native run iOS and this is going to take a little minute or two to warm up so I can take a quick break

87
00:06:14,800 --> 00:06:19,550
while this warms up and we'll come back and just verify that our project actually runs on the simulator

88
00:06:19,630 --> 00:06:21,680
so I'll see him in just a second.