1
00:00:01,420 --> 00:00:03,480
We've got some very basic content on the screen.

2
00:00:03,600 --> 00:00:05,730
Let's now create that accordion component.

3
00:00:06,120 --> 00:00:11,010
Well, then show the accordion component inside of our app component and then start to create that array

4
00:00:11,040 --> 00:00:16,980
of items and pass it down as props into the accordion will then start to render out that list of items

5
00:00:16,980 --> 00:00:19,110
on the screen and just make sure that something is visible.

6
00:00:20,210 --> 00:00:24,540
To get started inside my SIRC directory, I'll make a new folder of components.

7
00:00:25,940 --> 00:00:32,930
Inside there, I'll make a new file of accordion and accordion is a kind of a tricky word to spell.

8
00:00:33,200 --> 00:00:38,060
Make sure you've got two C's in there and it's I o n at the very end.

9
00:00:38,120 --> 00:00:42,050
So accordion, not accordion and not in a like that.

10
00:00:42,140 --> 00:00:42,860
It's an O.

11
00:00:44,330 --> 00:00:45,200
We'll create that file.

12
00:00:46,860 --> 00:00:48,810
Well, then put together a little bit of boilerplate.

13
00:00:49,090 --> 00:00:51,130
So let's get react from react.

14
00:00:55,000 --> 00:00:56,530
All create my accordion components.

15
00:00:58,470 --> 00:00:59,190
And right now.

16
00:00:59,970 --> 00:01:01,410
Just a simple each one as well.

17
00:01:03,000 --> 00:01:03,960
That says accordion.

18
00:01:05,490 --> 00:01:07,470
Well, then, export default accordion.

19
00:01:10,020 --> 00:01:11,670
And I bet you can guess what is going to come next.

20
00:01:11,730 --> 00:01:13,530
We'll go back over to our APT James file.

21
00:01:14,040 --> 00:01:15,000
We will import.

22
00:01:16,310 --> 00:01:18,770
Accordion rom component's.

23
00:01:22,510 --> 00:01:23,050
Accordion.

24
00:01:26,420 --> 00:01:30,170
And then rather than returning and each one going return a div.

25
00:01:31,240 --> 00:01:34,120
And inside of that, I'll place my accordion component.

26
00:01:37,780 --> 00:01:39,550
Well, we just typed out a lot very quickly.

27
00:01:39,640 --> 00:01:41,740
So let's just make sure that everything is working as expected.

28
00:01:42,120 --> 00:01:42,670
Yep, I see.

29
00:01:42,670 --> 00:01:44,970
According on screen, fantastic.

30
00:01:46,360 --> 00:01:48,430
Let's now start to create this items array.

31
00:01:48,810 --> 00:01:54,100
We are going to hardcore this into our app component inside the app component or otherwise inside of

32
00:01:54,100 --> 00:01:54,610
that file.

33
00:01:54,920 --> 00:01:58,210
Going to hand code or manually create an items array.

34
00:01:59,170 --> 00:02:04,450
And every element inside that array is going to an object with a title property and some content.

35
00:02:05,050 --> 00:02:08,950
We're then going to communicate that down into our accordion component as props.

36
00:02:11,350 --> 00:02:14,160
Here's my Abdon James file at the top.

37
00:02:15,330 --> 00:02:17,430
Either inside the components or outside of it.

38
00:02:17,460 --> 00:02:21,690
It does not matter because this is a static array that we're creating that is not going to change over

39
00:02:21,690 --> 00:02:22,080
time.

40
00:02:22,860 --> 00:02:28,530
We'll create a array called items, and then we will give this three different objects, just as we

41
00:02:28,530 --> 00:02:29,340
saw in that diagram.

42
00:02:30,470 --> 00:02:35,310
So each one will have a title, and for the first one, how about we put in something like what is?

43
00:02:36,310 --> 00:02:36,880
Reacts.

44
00:02:38,290 --> 00:02:44,310
And then as some content we can put in something like React is a front and JavaScript framework.

45
00:02:46,120 --> 00:02:50,560
Well, then repeat that twice over the maybe on the second one, you could do something a little bit

46
00:02:50,830 --> 00:02:52,330
more simple, straightforward.

47
00:02:52,510 --> 00:02:55,450
There's just some really kind of simple, silly content here.

48
00:02:55,930 --> 00:02:58,690
So how about why use react?

49
00:03:00,880 --> 00:03:01,990
Recontact we could put in.

50
00:03:03,150 --> 00:03:05,220
React is a favorite.

51
00:03:07,570 --> 00:03:10,190
J.S. Library among engineers.

52
00:03:12,650 --> 00:03:13,430
And then just one more.

53
00:03:14,750 --> 00:03:15,920
How do you use.

54
00:03:20,540 --> 00:03:25,790
I'll give it some content of you use react by creating.

55
00:03:26,790 --> 00:03:27,420
Component's.

56
00:03:31,040 --> 00:03:36,200
Those are items and we're going to want to communicate these down into our accordion components.

57
00:03:40,090 --> 00:03:44,380
So on accordion right here, we'll add in items is items.

58
00:03:45,190 --> 00:03:48,010
Notice that we are communicating this as a prop named items.

59
00:03:48,220 --> 00:03:50,140
So we need to go over to our according component.

60
00:03:50,410 --> 00:03:52,360
We need to receive a prop called items.

61
00:03:52,750 --> 00:03:57,130
We can then loop over it or map it and build out a list of different items to show to the user.

62
00:03:58,320 --> 00:04:02,640
Over inside of accordion J.S., we will receive that list of items.

63
00:04:04,620 --> 00:04:08,100
And then right now, let's just print out the number of items that we received.

64
00:04:08,940 --> 00:04:12,430
So I'll delete the accordion text right there and replace it with some curly braces.

65
00:04:14,070 --> 00:04:16,330
And I'll print out items that length.

66
00:04:17,310 --> 00:04:21,090
We should definitely see three printed out now because we just wrote out three different objects inside

67
00:04:21,090 --> 00:04:21,540
that array.

68
00:04:22,820 --> 00:04:26,390
We'll say this back over and there's the three.

69
00:04:29,280 --> 00:04:34,050
Well, we've got some information being passed down to the next thing to do is map over that list of

70
00:04:34,050 --> 00:04:36,900
items and build up our list as we do so.

71
00:04:36,900 --> 00:04:40,980
However, we're going to start to see that we've got some really ugly, unstyled content being displayed

72
00:04:40,980 --> 00:04:41,490
on the screen.

73
00:04:41,820 --> 00:04:45,690
We should probably also start to think about maybe wiring up a CSX library as well.

74
00:04:46,350 --> 00:04:49,870
Overall, we'll just take a pause right here and tackle the rest of this in just a moment.