1
00:00:00,930 --> 00:00:05,190
Now that we understand the prop system in React let's take a look at a another system that's a little

2
00:00:05,190 --> 00:00:09,000
bit similar but designed for a very different purpose.

3
00:00:09,000 --> 00:00:12,100
OK so once again we just took a look at the prop system.

4
00:00:12,150 --> 00:00:16,800
This is all about how we communicate data from a parent component down to a child.

5
00:00:16,860 --> 00:00:21,540
We're not going to take a look at another system called state the state system is all about tracking

6
00:00:21,570 --> 00:00:25,950
a piece of data that's going to change over time inside of our application.

7
00:00:25,950 --> 00:00:30,780
And anytime that piece of data changes we might want to somehow update the content on the screen of

8
00:00:30,780 --> 00:00:33,710
our device these two systems.

9
00:00:33,710 --> 00:00:37,660
I can almost guarantee you're going to get confused at some point in time.

10
00:00:37,820 --> 00:00:42,010
So I got to tell you this once again and I'm going to repeat it several times throughout the course.

11
00:00:42,110 --> 00:00:45,880
The prop system is all about communicating data from a parent to a child.

12
00:00:45,890 --> 00:00:48,690
State is all about tracking a single piece of data.

13
00:00:49,070 --> 00:00:55,010
And anytime it changes we will want to somehow update what is on the screen of our device.

14
00:00:55,010 --> 00:00:55,390
OK.

15
00:00:55,430 --> 00:01:00,580
Let's take a look at a couple of examples of state and get a better idea of how it works.

16
00:01:00,620 --> 00:01:00,920
OK.

17
00:01:00,950 --> 00:01:05,840
The first thing I want to do is take a look at a couple sample applications in each one these little

18
00:01:05,840 --> 00:01:06,990
sample applications.

19
00:01:07,070 --> 00:01:13,990
We're going to try to identify some piece of data that might need to change over time so the first application

20
00:01:13,990 --> 00:01:16,350
we're going to look at is a simple counter app.

21
00:01:16,510 --> 00:01:19,500
So maybe it's got some button right here that says increase.

22
00:01:19,510 --> 00:01:24,070
Another one that says decrease in whenever a user taps on increase as you might guess we're going to

23
00:01:24,070 --> 00:01:25,890
increase that count by 1.

24
00:01:25,990 --> 00:01:27,510
Maybe goes all way up to 7.

25
00:01:27,670 --> 00:01:31,170
And if they click on or tap on decrease it'll decrease by.

26
00:01:31,240 --> 00:01:37,850
Maybe down to like negative 1 or negative 2 or whatever else so in this little application I want to

27
00:01:37,940 --> 00:01:40,040
ask a couple of different questions.

28
00:01:40,040 --> 00:01:41,870
Three questions in total.

29
00:01:41,930 --> 00:01:48,580
My first question for you is what piece of data inside this application is changing once you identify

30
00:01:48,580 --> 00:01:49,620
that piece of data.

31
00:01:49,630 --> 00:01:52,300
I don't have a second question what type of data is it.

32
00:01:52,300 --> 00:01:55,850
In other words is it a number a string an object in array.

33
00:01:55,930 --> 00:01:57,970
What kind of data is it.

34
00:01:57,970 --> 00:02:00,690
And then finally what does that piece of data is starting.

35
00:02:00,700 --> 00:02:03,210
Value like when we first boot up our application.

36
00:02:03,280 --> 00:02:06,550
What is the starting value of that piece of data.

37
00:02:06,580 --> 00:02:10,480
Let's try to answer these three questions for this very simple app.

38
00:02:10,680 --> 00:02:12,780
Well I think that the first question is pretty clear.

39
00:02:12,780 --> 00:02:17,100
I think that that piece of data that's changing inside of application is like this counter variable

40
00:02:17,100 --> 00:02:17,760
right here.

41
00:02:17,760 --> 00:02:23,430
We've got some count we want to change it over time and every time we change that piece of data we probably

42
00:02:23,430 --> 00:02:27,410
want to update the content on the screen of our application.

43
00:02:27,420 --> 00:02:29,310
Next up what type of data is it.

44
00:02:29,310 --> 00:02:33,130
Well it is a counter so I think it's safe to say that it's a plain no.

45
00:02:33,150 --> 00:02:35,340
And finally what is the data starting value.

46
00:02:35,520 --> 00:02:39,330
In other words when our application first boots up what does that Ken are going to say.

47
00:02:39,330 --> 00:02:45,160
Well I think it's reasonable to say that the default starting value would be like simply zero.

48
00:02:45,170 --> 00:02:48,120
Now this might seem like some weird three questions right here.

49
00:02:48,190 --> 00:02:52,300
But let's repeat this process with two other applications really quickly then we're going to start to

50
00:02:52,300 --> 00:02:59,010
write out our first example with state OK so here's the next one so in this application we might show

51
00:02:59,040 --> 00:03:05,160
a label above a text input and maybe anytime user types in a name right here so like my name is Steve

52
00:03:05,160 --> 00:03:06,580
Ansel enter and Steven.

53
00:03:06,810 --> 00:03:08,210
Maybe a character by character.

54
00:03:08,220 --> 00:03:12,310
I would then want to print out whatever text the user entered into that text input.

55
00:03:12,390 --> 00:03:16,920
So as I type and Steven I would want to see your name is Steven appear right here.

56
00:03:17,220 --> 00:03:21,690
Once again a very simple application but I want to try to answer these three questions about it once

57
00:03:21,690 --> 00:03:22,460
again.

58
00:03:22,530 --> 00:03:24,480
So what piece of data is changing.

59
00:03:24,480 --> 00:03:25,840
What type of data is it.

60
00:03:26,010 --> 00:03:28,730
And what is the default starting value.

61
00:03:28,930 --> 00:03:33,910
In this case I think that the piece of data that's changing over time is some like name variable.

62
00:03:33,910 --> 00:03:38,770
Maybe we somehow read out some text that the user is entering into its input right here and stored in

63
00:03:38,770 --> 00:03:43,240
a variable called name or something similar what type of data is it.

64
00:03:43,240 --> 00:03:45,040
Well it's definitely probably going to be a string.

65
00:03:45,040 --> 00:03:47,090
You know it's a series of characters it's a name.

66
00:03:47,170 --> 00:03:51,310
So I think that that piece of data that's changing over time is a string.

67
00:03:51,310 --> 00:03:53,440
And then finally what's the default starting value.

68
00:03:53,440 --> 00:03:57,700
Well when we first boot up our application I would expect to see like nothing inside of here.

69
00:03:57,700 --> 00:04:02,500
Nothing inside the text input and nothing after your name is whatever.

70
00:04:02,500 --> 00:04:07,210
So I think the default starting value would be an empty string that's supposed to be an empty string

71
00:04:07,210 --> 00:04:13,020
right there it's really two separate quotes Okay let's repeat this process just one more time.

72
00:04:13,040 --> 00:04:17,270
So on this one right here I've got a list of blog posts that I'm showing to a user.

73
00:04:17,570 --> 00:04:19,930
Let's repeat the same process once again.

74
00:04:19,970 --> 00:04:23,570
So what's the piece of data that's changing inside this application.

75
00:04:23,570 --> 00:04:28,370
Well let's imagine for a second how we would really show a list a blog post to a user inside of an app.

76
00:04:28,370 --> 00:04:32,620
Chances are our app does not have some like hardcoded list of blog posts.

77
00:04:32,630 --> 00:04:37,700
Instead there's probably some API requests that we might need to make from our application to an outside

78
00:04:37,700 --> 00:04:45,830
server to fetch a list of API requests so maybe we would have some piece of data called like blog posts

79
00:04:45,890 --> 00:04:51,410
that would be changing over time inside of application by default on our application first starts up

80
00:04:51,830 --> 00:04:57,620
that piece of data when maybe be an empty array because when our application first starts we have no

81
00:04:57,620 --> 00:04:59,510
blog posts whatsoever.

82
00:04:59,630 --> 00:05:04,850
At some point time we would then complete an API request to fetch our list of blog posts and then we

83
00:05:04,850 --> 00:05:09,680
can update this piece of data right here something called like blog posts and I would maybe be an array

84
00:05:09,680 --> 00:05:16,590
of objects where each object describes like the title and the content of a single blog post.

85
00:05:16,680 --> 00:05:19,530
Ok so I know these three questions might seem a little bit weird.

86
00:05:19,530 --> 00:05:24,180
It might seem weird to repeat the same process three times but now that we understand these kind of

87
00:05:24,180 --> 00:05:26,940
three questions we want to ask about a single application.

88
00:05:26,940 --> 00:05:31,020
Let's come back the next video we're going to start to put together our first example of working with

89
00:05:31,020 --> 00:05:34,670
state inside of a component so click pause and I'll see you in just a minute.