1
00:00:00,770 --> 00:00:02,300
I'm all done generating my project.

2
00:00:02,330 --> 00:00:07,490
So going to change into that new blog directory that was just generated then inside of here I'll start

3
00:00:07,490 --> 00:00:07,990
up my code.

4
00:00:07,980 --> 00:00:14,830
Editor I'm also going to install the react navigation package right away so I'll do npm install react

5
00:00:14,830 --> 00:00:16,800
dash navigation.

6
00:00:16,870 --> 00:00:20,680
Remember we've been using this package throughout this course to show different screens to our users

7
00:00:21,250 --> 00:00:25,480
in this application we're going to work on we very definitely very clearly have many different screens

8
00:00:25,480 --> 00:00:26,400
we want to show.

9
00:00:26,410 --> 00:00:31,630
So I think we should wire up react navigation right away as usual if you see any warnings after doing

10
00:00:31,630 --> 00:00:32,550
that installation.

11
00:00:32,590 --> 00:00:34,290
Totally fine.

12
00:00:34,320 --> 00:00:40,290
And then finally I'll do an NPM start and we'll get that browser window open running the React Native

13
00:00:40,290 --> 00:00:40,930
package.

14
00:00:41,700 --> 00:00:43,240
And here it is right here.

15
00:00:43,260 --> 00:00:46,530
So as usual if you're on a physical device scan that QR code.

16
00:00:46,620 --> 00:00:51,740
Otherwise if you're using an emulator or simulator you can hit those links on the side.

17
00:00:51,860 --> 00:00:52,110
OK.

18
00:00:52,140 --> 00:00:56,440
So I shall should see my application appear in my emulator and simulator very quickly.

19
00:00:56,520 --> 00:00:58,890
So I'll just let that go ahead and do its thing.

20
00:00:58,950 --> 00:00:59,220
OK.

21
00:00:59,250 --> 00:01:03,720
So while everything is loading up honestly a couple of diagrams to just help you understand some big

22
00:01:03,720 --> 00:01:06,440
things we have to think about inside this application.

23
00:01:06,510 --> 00:01:11,760
So as we mentioned we're gonna have four different screens here listing blog post showing one creating

24
00:01:11,760 --> 00:01:17,680
one and editing one all these different screens are going to be shown by the react navigation stack

25
00:01:17,710 --> 00:01:25,130
navigator just as we've used on previous apps so we can kind of imagine that this is our component hierarchy.

26
00:01:25,240 --> 00:01:29,560
We've got the stack navigator right here and it's going to decide what different screen we want to show

27
00:01:29,560 --> 00:01:31,510
at any given point in time.

28
00:01:31,510 --> 00:01:35,490
Notice that I kind of took an assumption here about what we're going to call our different screens maybe

29
00:01:35,530 --> 00:01:38,830
index screens show create edit and so on.

30
00:01:38,830 --> 00:01:43,630
Now there's a really big important thing that we need to think about inside this app and that is we're

31
00:01:43,630 --> 00:01:47,610
inside of here are our list of blog posts going to exist.

32
00:01:47,890 --> 00:01:52,930
In other words at some point time we probably need an array of objects to represent all the different

33
00:01:52,930 --> 00:01:56,110
blog post that a user adds into our application.

34
00:01:56,110 --> 00:02:01,480
So we need to think about where we're going to locate that state if we somehow follow the same pattern

35
00:02:01,480 --> 00:02:03,460
as we've used on previous applications.

36
00:02:03,490 --> 00:02:08,830
We might decide to just add in a state variable to our index screen and maybe that would be an array

37
00:02:08,830 --> 00:02:14,920
of objects called like blog posts and then anytime they wanted to add edit delete whatever this list

38
00:02:14,920 --> 00:02:20,080
of blog posts we could maybe somehow figure out some way to pass some callbacks around to these other

39
00:02:20,080 --> 00:02:20,710
screens.

40
00:02:21,100 --> 00:02:26,830
So maybe try to pass a callback over to show screen or create screen or edit.

41
00:02:26,830 --> 00:02:32,280
That would allow them to try to make some change to some given blog post and send the updated blog post

42
00:02:32,290 --> 00:02:34,360
back over to the index screen.

43
00:02:34,390 --> 00:02:38,860
So this is maybe one way we could approach this but it's definitely not ideal.

44
00:02:39,010 --> 00:02:44,080
This approach would very quickly introduce a ton of coupling between the different screens of our application

45
00:02:44,500 --> 00:02:49,450
and if we wanted to ever add in some additional resource besides blog posts like maybe we also wanted

46
00:02:49,450 --> 00:02:52,750
to manage images or comments or something like that.

47
00:02:52,840 --> 00:02:54,910
This approach would be really confusing.

48
00:02:54,910 --> 00:03:00,780
Really quickly so instead we're going to take a radically different approach.

49
00:03:00,880 --> 00:03:04,710
We're going to instead introduce something called a provider component.

50
00:03:04,780 --> 00:03:11,270
This provider component is going to essentially wrap our entire application including the stack navigator.

51
00:03:11,290 --> 00:03:16,640
This will be a rat react component but it's not going to actually necessarily show anything on the screen.

52
00:03:16,660 --> 00:03:21,520
Instead it's going to be responsible for managing all the data or more specifically all the different

53
00:03:21,520 --> 00:03:24,010
blog posts inside of application.

54
00:03:24,010 --> 00:03:29,080
So we're going to essentially centralize all of our data inside this one component right here.

55
00:03:29,380 --> 00:03:35,020
Then if any component ever needs to get access to that data or if a child of one these screens like

56
00:03:35,050 --> 00:03:39,040
let's say the blog list right here needs to get access some data we're going to essentially wire up

57
00:03:39,040 --> 00:03:45,460
a system that's going to allow any screen or any child component to get direct access to the list of

58
00:03:45,460 --> 00:03:48,640
blog posts inside of our blog post provider.

59
00:03:48,640 --> 00:03:55,090
So we could kind of skip and not have to pass props between each these layers to get a list of blog

60
00:03:55,090 --> 00:03:57,170
post down into this blog list component.

61
00:03:57,310 --> 00:04:03,430
Instead we'll be able to get a crop year of like blog lists from our provider all the way down to the

62
00:04:03,430 --> 00:04:06,490
blog list somewhat automatically.

63
00:04:06,490 --> 00:04:11,890
We will also use this same kind of system to pass some callbacks from the blog post provider down into

64
00:04:11,890 --> 00:04:15,620
the blog list that will allow maybe the blog lists to delete a post.

65
00:04:15,670 --> 00:04:21,070
So also pass in something like delete post which would maybe be a callback function with the goal of

66
00:04:21,070 --> 00:04:27,970
deleting some particular blog post so the entire idea here is understanding this pattern.

67
00:04:27,970 --> 00:04:34,690
Now as a quick aside this idea here of kind of centralizing all of our data at some very root location

68
00:04:34,720 --> 00:04:38,720
inside of application is referred to as global state management.

69
00:04:38,770 --> 00:04:44,110
We're essentially trying to manage all of our state inside of one single location.

70
00:04:44,110 --> 00:04:50,320
If you've ever heard of that library redux usually the redux library is used for functionality very

71
00:04:50,320 --> 00:04:56,590
similar to this essentially identical but you and I are going to essentially rebuild redux more or less

72
00:04:56,920 --> 00:05:02,100
kind of from scratch using just a couple of hooks and one or two features inside the react library.

73
00:05:02,260 --> 00:05:07,240
So we're not going to be really going over redux very heavily inside this course which might be a really

74
00:05:07,240 --> 00:05:08,300
big disappointment.

75
00:05:08,440 --> 00:05:13,360
But to be honest you're going to essentially rebuild it more or less from scratch.

76
00:05:13,360 --> 00:05:19,000
So you're going to get a very deep understanding of exactly how redux works by essentially re implementing

77
00:05:19,000 --> 00:05:19,270
it.

78
00:05:19,450 --> 00:05:24,040
And if you decide to learn it on your own it you're gonna have a pretty darn easy time doing it.

79
00:05:24,820 --> 00:05:26,000
So that's pretty much it.

80
00:05:26,020 --> 00:05:30,730
We're going to try to centralize all of our data in this very route component right here.

81
00:05:30,850 --> 00:05:32,170
So let's take a quick pause.

82
00:05:32,350 --> 00:05:36,490
When we come back the next video we're going to get started sending up our application and we're going

83
00:05:36,490 --> 00:05:41,470
to create all these different screens and then wire them up to a stack navigator so quick pause and

84
00:05:41,470 --> 00:05:42,880
let's get to it in the next video.