1
00:00:00,970 --> 00:00:03,040
Looks like my project is all done being generated.

2
00:00:03,250 --> 00:00:05,170
I'm not going to change into that widgets directory.

3
00:00:05,740 --> 00:00:07,750
I'm gonna start up my code editor inside there.

4
00:00:08,560 --> 00:00:11,800
And then finally, I'm going to start up my development server with an NPM start.

5
00:00:15,240 --> 00:00:15,960
All right.

6
00:00:18,440 --> 00:00:21,140
And there is our starter application.

7
00:00:21,200 --> 00:00:21,770
Yeah, there we are.

8
00:00:22,040 --> 00:00:22,400
Very good.

9
00:00:23,800 --> 00:00:27,910
As usual, before riding out any code, we're going to think about the design of our application.

10
00:00:28,030 --> 00:00:29,590
So how are we going to architect this?

11
00:00:29,680 --> 00:00:31,690
And how does the hook system really come into play?

12
00:00:32,260 --> 00:00:35,050
Well, we start to think about architecting out this application.

13
00:00:35,350 --> 00:00:39,460
Everything is going to be the same as if we were using class based components.

14
00:00:39,880 --> 00:00:41,260
We're still going to worry about props.

15
00:00:41,320 --> 00:00:42,960
We're still going to think about states.

16
00:00:43,510 --> 00:00:48,160
Let's think about how we can architect this application and what different components we might want

17
00:00:48,160 --> 00:00:48,580
to make.

18
00:00:49,890 --> 00:00:54,150
All right, so first off, I think that we should probably have two components, as usual, we'll have

19
00:00:54,150 --> 00:00:59,930
an app component that kind of governs or coordinates information across our entire application will

20
00:00:59,970 --> 00:01:02,190
then also create an accordion component.

21
00:01:02,640 --> 00:01:07,440
This accordion component is going to be in charge of showing this entire piece of content right here.

22
00:01:09,500 --> 00:01:13,670
Because we probably want to make the accordion reusable in nature and be able to show different sets

23
00:01:13,670 --> 00:01:15,020
of questions and answers.

24
00:01:15,410 --> 00:01:20,750
We should probably have some kind of items prop that is created inside of our app component and then

25
00:01:20,750 --> 00:01:24,140
pass down as a prop into the accordion.

26
00:01:25,950 --> 00:01:30,780
The accordion will then decide what set of questions and answers to show on the screen based upon this

27
00:01:30,840 --> 00:01:31,470
items prop.

28
00:01:33,150 --> 00:01:37,640
So pretty simple, pretty straightforward, no difference here whatsoever on the prop side of things,

29
00:01:37,850 --> 00:01:39,290
just because we're using the hook system.

30
00:01:42,150 --> 00:01:48,710
Now, the actual items, Propp will probably make it an array of objects for each object inside of there.

31
00:01:48,930 --> 00:01:51,600
Maybe we will give it a title and a content property.

32
00:01:51,940 --> 00:01:56,670
So the title will be the content displayed up here, kind of the question, should it, so to speak.

33
00:01:57,180 --> 00:02:01,980
And then the content will be what is displayed whenever user clicks on or selects one of these different

34
00:02:01,980 --> 00:02:02,510
panels.

35
00:02:04,630 --> 00:02:05,590
Well, Propp system.

36
00:02:05,650 --> 00:02:06,250
Not too bad.

37
00:02:06,670 --> 00:02:07,570
How about states?

38
00:02:07,720 --> 00:02:10,950
What seven pieces of state do we need to actually implement this SAT?

39
00:02:11,860 --> 00:02:16,090
Well, as I look at this, there's really only one thing that is changing as a user starts to click

40
00:02:16,090 --> 00:02:20,740
around and that is which question is actually expanded and displayed to the user.

41
00:02:21,430 --> 00:02:26,650
We probably only want to have one question visible at a time or at least will set up that requirement.

42
00:02:27,370 --> 00:02:30,130
So if a user clicks on this first question, we're going to want to expand it.

43
00:02:30,610 --> 00:02:35,500
If a user then clicks on the second question right here, we will close the first one and expand the

44
00:02:35,500 --> 00:02:36,130
second one.

45
00:02:37,620 --> 00:02:40,830
Because there can only ever be one active question at a time.

46
00:02:41,130 --> 00:02:47,850
We could probably get away with just one piece of state, maybe an index or in a number the index of

47
00:02:47,850 --> 00:02:50,820
the active question that should be expanded on the screen.

48
00:02:51,510 --> 00:02:56,250
So maybe if a user clicks on this first question right here, we should set some kind of active index

49
00:02:56,250 --> 00:03:00,930
piece of state to zero to say that we should expand the element at index zero.

50
00:03:01,650 --> 00:03:05,790
If the user then clicks on the last one down here, we could set some kind of active index piece of

51
00:03:05,790 --> 00:03:08,760
state to to to say that we want to expand to question.

52
00:03:09,060 --> 00:03:10,480
Zero one, two.

53
00:03:10,530 --> 00:03:12,300
We want to expand that one right there.

54
00:03:13,480 --> 00:03:18,130
That means we really just would need one very simple piece of state, just a number, and the number

55
00:03:18,130 --> 00:03:20,680
is going to change based upon whatever the user clicks upon.

56
00:03:22,780 --> 00:03:25,780
So let's think about where this active index piece of states should live.

57
00:03:26,500 --> 00:03:29,860
We could definitely have this active index piece of state to find inside the app.

58
00:03:30,280 --> 00:03:35,980
However, our app component is unlikely to ever really care about what question is expanded at any given

59
00:03:35,980 --> 00:03:36,370
time.

60
00:03:37,330 --> 00:03:42,760
Whenever a user sees the accordion and they start to expand or look on different questions, chances

61
00:03:42,760 --> 00:03:48,040
are there are no other parts of application that really cares about what tab is expanded.

62
00:03:48,760 --> 00:03:53,620
Rather than defining this active index piece of state inside the app and then passing it down as a prop

63
00:03:53,620 --> 00:03:54,700
inside of the accordion.

64
00:03:55,300 --> 00:04:00,640
We're going to instead just define this piece of state inside the accordion itself so only the accordion

65
00:04:00,640 --> 00:04:03,370
is going to know which question is currently expanded.

66
00:04:04,090 --> 00:04:06,100
Now, of course, we could design this completely differently.

67
00:04:06,340 --> 00:04:10,420
But as I've shown you the app right now, as we've taken a look at the mockup, it is very clear that

68
00:04:10,420 --> 00:04:14,050
there is no other part of our application that cares about that piece of state at all.

69
00:04:14,620 --> 00:04:17,500
That's why we're going to define that piece of state inside of the accordion.

70
00:04:19,190 --> 00:04:19,320
OK.

71
00:04:19,650 --> 00:04:23,940
So let's go back over to our editor and start to implement or increase some of these different files.

72
00:04:24,900 --> 00:04:27,510
First thing I'm going to do is the same thing we usually do.

73
00:04:27,750 --> 00:04:29,550
I'm gonna open up that SIRC directory.

74
00:04:30,020 --> 00:04:33,330
I going to highlight everything inside there and delete all of it.

75
00:04:35,380 --> 00:04:37,420
Then inside the FARC file folder.

76
00:04:37,870 --> 00:04:40,120
I'm gonna make a new file of indexed dot G.S..

77
00:04:41,350 --> 00:04:44,620
And I'll make a new file of app dodginess.

78
00:04:45,690 --> 00:04:49,850
Let's create a very simple app component and then show it on the screen inside the index dodgiest file.

79
00:04:50,850 --> 00:04:53,740
To get started inside of APTA, yes, I will import react.

80
00:04:55,780 --> 00:04:58,640
I will then export default and arrow function.

81
00:05:00,760 --> 00:05:01,580
And I will return.

82
00:05:02,980 --> 00:05:03,700
An H1.

83
00:05:04,930 --> 00:05:06,740
That says widgets at.

84
00:05:08,770 --> 00:05:09,650
Well, then save this.

85
00:05:10,560 --> 00:05:16,070
I'm gonna go backwards, the index dot J.S. file at the very top, it will imports react.

86
00:05:19,370 --> 00:05:21,470
React Dom from react ash dom.

87
00:05:22,660 --> 00:05:24,680
I'll get that app component.

88
00:05:26,610 --> 00:05:28,930
That we just created Lorikeets I.

89
00:05:30,700 --> 00:05:35,680
Then finally react, Dom, not render of our app component.

90
00:05:37,020 --> 00:05:39,460
And we want to show it inside of documents.

91
00:05:41,400 --> 00:05:45,990
Where Selecter found roots and collapses sidebar.

92
00:05:46,440 --> 00:05:48,210
You can see that whole line as a quick reminder.

93
00:05:50,270 --> 00:05:50,520
All right.

94
00:05:51,590 --> 00:05:52,730
Let's go back over to our browser.

95
00:05:54,550 --> 00:05:55,740
Yep, there's widgets up.

96
00:05:56,180 --> 00:06:01,400
So I think we're all set and we can start working on this new accordion component in the next video.