1
00:00:00,870 --> 00:00:04,730
In the last section we got started with some boilerplate set up for application.

2
00:00:04,740 --> 00:00:10,130
We created our app component and then we referenced that inside of both of our index files.

3
00:00:10,140 --> 00:00:15,690
I then started my simulator and as I kind of expected Yep we've got a big error message expected to

4
00:00:15,690 --> 00:00:17,520
reduce or to be a function.

5
00:00:17,580 --> 00:00:23,200
So we created our redux store right here but we never actually provided it a default reducer.

6
00:00:23,220 --> 00:00:29,010
So remember inside of all redux applications you must provide at least one default reducer or just something

7
00:00:29,010 --> 00:00:33,450
so it can run and say OK here's my starting state for my application.

8
00:00:33,450 --> 00:00:38,480
So let's go ahead and create that default reducer and then wrap up all of our setup.

9
00:00:38,520 --> 00:00:43,920
So all of our reducers that we create for application will be placed inside of a folder inside of the

10
00:00:43,970 --> 00:00:45,470
SIRC directory.

11
00:00:45,480 --> 00:00:53,670
So inside the S or C directory I'm going to make another new folder called reducers and inside of there

12
00:00:53,760 --> 00:00:55,490
we'll create index.

13
00:00:55,570 --> 00:00:56,800
Yes.

14
00:00:57,060 --> 00:01:01,530
And then this will be where we kind of remember wired together all of a reducers with that combined

15
00:01:01,530 --> 00:01:02,810
reducers call.

16
00:01:03,180 --> 00:01:13,560
So at the top we will import combine reducers from redux then we will export default combine reducers

17
00:01:14,310 --> 00:01:16,520
and right now we do not have a producer.

18
00:01:16,560 --> 00:01:21,780
But again it is required that we have at least one in our application some going to make a dummy reduce

19
00:01:21,930 --> 00:01:25,210
right now just just a dummy reducer just to get the ball rolling.

20
00:01:25,530 --> 00:01:29,070
So I'm going to come up with some just you know imagine name for a douceur.

21
00:01:29,070 --> 00:01:31,980
I don't know let's call it a banana.

22
00:01:32,100 --> 00:01:36,420
And by default it will always return an array.

23
00:01:36,930 --> 00:01:40,100
I will then import that reducer back into my app file.

24
00:01:40,230 --> 00:01:50,320
So at the top I will import reducers from reducers and then we'll pass those reducers to the create

25
00:01:50,320 --> 00:01:52,340
store called.

26
00:01:52,750 --> 00:01:57,820
So now we've got one default reducer wired up to our application and we should at least be able to get

27
00:01:57,820 --> 00:01:59,140
past this error message

28
00:02:01,840 --> 00:02:03,870
and see what else we got.

29
00:02:03,970 --> 00:02:04,390
OK.

30
00:02:04,450 --> 00:02:04,910
Very good.

31
00:02:04,910 --> 00:02:11,920
So now I've got that very classy Hello thingamajig on the top left there very classy I know.

32
00:02:11,920 --> 00:02:14,430
So we going to replace the you know don't worry we'll replace on just a second.

33
00:02:14,420 --> 00:02:17,270
There's just one more piece of setup that we need to do.

34
00:02:17,740 --> 00:02:24,880
Of course because we're using firebase for authentication and this app again we need to set up our default

35
00:02:24,910 --> 00:02:26,260
firebase configuration.

36
00:02:26,260 --> 00:02:30,950
And we also need to make a new firebase project over on the firebase console.

37
00:02:31,420 --> 00:02:33,740
So we'll do this in two steps.

38
00:02:33,760 --> 00:02:40,130
The first we're going to do is install the firebase javascript library so at the command line inside

39
00:02:40,120 --> 00:02:47,120
of my project directory will NPM install dash dash save firebase.

40
00:02:48,130 --> 00:02:48,890
Well that goes.

41
00:02:48,920 --> 00:02:50,570
I flip over to my browser.

42
00:02:51,080 --> 00:02:59,080
I'm going to open up my firebase console which I ever so helpfully just seem to have open right here.

43
00:02:59,170 --> 00:03:04,230
You always want to go pop it open yourself and I'm going to make a new project for myself.

44
00:03:04,270 --> 00:03:09,540
So I logged in and out the console and it created a new project.

45
00:03:10,120 --> 00:03:11,550
And I think I'll call this one.

46
00:03:11,620 --> 00:03:17,470
You can call it employees you can call it manager or whatever you want to call it call it just manager

47
00:03:18,930 --> 00:03:22,060
and I'll create the project.

48
00:03:22,060 --> 00:03:23,810
So we need to do two things right here.

49
00:03:23,830 --> 00:03:30,070
We need to make sure that we enable authentication for app and make sure that we say hey email and password

50
00:03:30,070 --> 00:03:32,630
sign is a valid way to get started here.

51
00:03:32,860 --> 00:03:39,280
And the other thing we need to do is copy paste that default set up the project linking stuff all the

52
00:03:39,280 --> 00:03:42,220
code and all that kind of good stuff.

53
00:03:42,220 --> 00:03:44,100
So let's get start with the authentication first.

54
00:03:44,170 --> 00:03:49,700
On the left hand side will find the auth section and we'll set up our sign method.

55
00:03:49,700 --> 00:03:51,390
And again you know we've gone through this before.

56
00:03:51,430 --> 00:03:57,550
You have to specifically say yes I want to enable email and password authentication inside my application

57
00:03:58,960 --> 00:04:08,500
so we'll click on email password enable it save call that's you know pretty much it.

58
00:04:08,650 --> 00:04:14,680
And then on the top right again we'll hit Webbs set up here is all the default information to get started

59
00:04:14,680 --> 00:04:16,680
with firebase insider application.

60
00:04:19,330 --> 00:04:22,820
So I'm going to just copy this big block right here.

61
00:04:22,990 --> 00:04:24,590
I'm not going to get the script tags.

62
00:04:24,610 --> 00:04:30,820
I do not want the script tags I just want the config and the initialized outcall it's all copy it and

63
00:04:30,820 --> 00:04:33,030
then flip back over to my code editor.

64
00:04:33,070 --> 00:04:40,030
Now in the past we created a separate file to house our firebase setup where you place this code to

65
00:04:40,030 --> 00:04:41,610
a large degree a large extent.

66
00:04:41,620 --> 00:04:43,060
It's really up to you.

67
00:04:43,180 --> 00:04:47,170
This time we're going to do things just a little bit differently just for the sake of doing it differently

68
00:04:47,170 --> 00:04:51,670
just to show you hey you can do it this way too if you want to create a separate file that's totally

69
00:04:51,670 --> 00:04:52,840
fine.

70
00:04:52,870 --> 00:05:01,500
But this time around I can say that inside of my apps components will mount I'm going to place all that

71
00:05:01,500 --> 00:05:06,860
initialization code song and do my copy.

72
00:05:06,900 --> 00:05:08,710
By default we get a VAR here.

73
00:05:08,910 --> 00:05:12,170
Of course we want to prefer a concert instead.

74
00:05:12,960 --> 00:05:17,550
And then I also get a lot of complaining about single quotes first double quotes Elisha's go ahead and

75
00:05:17,550 --> 00:05:19,600
fix that up real quick.

76
00:05:19,650 --> 00:05:25,530
And finally we need to make sure that we import the firebase library so that at the top I will import

77
00:05:25,830 --> 00:05:31,960
firebase from firebase and of course you know we just install this at the command line two seconds ago.

78
00:05:32,010 --> 00:05:35,360
Looks like that's all done and stalling so we should be good to go.

79
00:05:35,850 --> 00:05:40,320
So this time around rather than creating a separate file to our firebase config.

80
00:05:40,320 --> 00:05:45,690
I just said you know what I do there's nothing special about firebase here firebase is tightly coupled

81
00:05:45,690 --> 00:05:48,630
to my application as soon as my app is about to boot up.

82
00:05:48,750 --> 00:05:51,800
I want to make sure that the firebase config gets loaded up as well.

83
00:05:51,840 --> 00:05:55,560
So I don't have a separate file you can really toss the stuff wherever you want.

84
00:05:55,560 --> 00:05:58,060
Just make sure that it only runs one time.

85
00:05:58,140 --> 00:06:02,310
Otherwise you can see a error message pop up on the console complaining that you know you're trying

86
00:06:02,310 --> 00:06:05,450
to initialize to firebase applications.

87
00:06:05,490 --> 00:06:09,930
The one thing that I want to point out to you just to make sure we avoid any early errors here do double

88
00:06:09,930 --> 00:06:12,210
check the spelling on component will mount here.

89
00:06:12,360 --> 00:06:17,910
A very common typo I make personally and I actually just made it two seconds ago as a capital I I do

90
00:06:17,910 --> 00:06:21,660
that all the time just you know just all those things anyways.

91
00:06:21,740 --> 00:06:25,530
You know we're very well familiar now with the lifecycle method component will mount.

92
00:06:25,590 --> 00:06:26,960
So I think everything is good.

93
00:06:26,970 --> 00:06:28,470
Let's do a quick refresh.

94
00:06:28,470 --> 00:06:30,030
Make sure we don't get the error message

95
00:06:32,760 --> 00:06:36,410
because we are now importing firebase into our project.

96
00:06:36,420 --> 00:06:41,460
It's going to take our bundlers just a little bit more time to reload in the simulator.

97
00:06:41,460 --> 00:06:47,820
Any time you import a library in to react needed it has to basically pull that thing until the bundle

98
00:06:47,820 --> 00:06:50,260
and so it takes a little bit more time to refresh.

99
00:06:50,290 --> 00:06:52,760
Anyways it looks like our refresh is successful here.

100
00:06:52,770 --> 00:06:57,430
So I think we're all ready to go with our next application.

101
00:06:57,430 --> 00:07:01,360
Let's let's get started in the next one and start working on authentication.

102
00:07:01,380 --> 00:07:02,490
So I'll see in just a second