1
00:00:00,780 --> 00:00:04,470
All right my friends I think that we understand the basics of GSX pretty well.

2
00:00:04,470 --> 00:00:08,350
So in this video we're going to start to move on to our next big topic.

3
00:00:08,520 --> 00:00:12,990
Now I'm really excited for this section and the next couple of videos because this is where we get to

4
00:00:12,990 --> 00:00:17,910
start taking the training wheels off and start to write a lot more code and move more quickly.

5
00:00:17,910 --> 00:00:22,470
So let's talk about what we're going to be covering in this video in the next couple.

6
00:00:22,470 --> 00:00:22,920
All right.

7
00:00:22,920 --> 00:00:23,550
Here we go.

8
00:00:23,670 --> 00:00:30,300
So three big important concepts for us to understand component nesting reusability and configuration.

9
00:00:30,300 --> 00:00:36,090
These are all tenants of the re-act ecosystem and they're going to govern how we design re-act applications.

10
00:00:36,270 --> 00:00:40,310
Let's talk about each one of these in turn and we'll go through a couple of quick code examples.

11
00:00:40,560 --> 00:00:46,260
So first off component nesting so far out all the code you and I have written we've only been creating

12
00:00:46,290 --> 00:00:47,930
one component at a time.

13
00:00:48,240 --> 00:00:54,360
But for a real re-act application we usually make many different components when we make many different

14
00:00:54,360 --> 00:00:55,140
components.

15
00:00:55,140 --> 00:01:02,220
We then nest them or essentially place them in each other to make an actual usable re-act application.

16
00:01:02,220 --> 00:01:06,660
So we're going to very quickly start to look at a couple examples of how we nece different components

17
00:01:06,660 --> 00:01:08,280
inside of each other.

18
00:01:08,300 --> 00:01:11,340
The next thing we're going to start to discuss is component reusability.

19
00:01:11,580 --> 00:01:16,410
I want you to think about a typical web application that you might use every single day.

20
00:01:16,410 --> 00:01:22,060
Chances are you use a web application that has some buttons or text fields or menus inside of it.

21
00:01:22,110 --> 00:01:23,600
And I got a quick question for you.

22
00:01:23,610 --> 00:01:26,860
Do any of those buttons really look different from each other.

23
00:01:27,090 --> 00:01:32,250
Well chances are they don't just about every button inside of a single re-act application is always

24
00:01:32,250 --> 00:01:35,170
going to have some very similar and identical functionality.

25
00:01:35,310 --> 00:01:39,340
It's going to show some text and then do something when a user clicks on it.

26
00:01:39,360 --> 00:01:45,450
So rather than making a separate component or essentially write out some different code for every single

27
00:01:45,450 --> 00:01:50,160
button or every single menu or every single text input that you might put into an application.

28
00:01:50,160 --> 00:01:57,420
We instead strive to make reusable components or little pieces of code that can be reused several different

29
00:01:57,420 --> 00:02:00,410
times inside of a single application.

30
00:02:00,430 --> 00:02:05,830
And again we'll take a look at a couple of examples on how we might achieve reusability.

31
00:02:05,910 --> 00:02:10,830
Then finally this is very tightly coupled with the usability component configuration.

32
00:02:11,310 --> 00:02:13,740
So I just gave you an example of a button.

33
00:02:13,980 --> 00:02:14,310
Yeah.

34
00:02:14,340 --> 00:02:19,560
Most buttons look very similar but there's little tiny pieces about every single button that need to

35
00:02:19,560 --> 00:02:22,150
be customized in some very specific way.

36
00:02:22,170 --> 00:02:28,080
For example one button might need to have the text submit and another button might need to have the

37
00:02:28,080 --> 00:02:32,750
text click on me and both those buttons might need to do different things.

38
00:02:32,880 --> 00:02:37,680
So we need to make sure that when we create different components we have the ability to somehow customize

39
00:02:37,680 --> 00:02:40,010
them when they are created.

40
00:02:40,020 --> 00:02:40,400
All right.

41
00:02:40,410 --> 00:02:43,460
So these are the three big topics that we're going to start to dive into.

42
00:02:43,500 --> 00:02:47,640
And like I said I'm really excited because this is where things start to get really interesting.

43
00:02:47,850 --> 00:02:49,320
So let's take a quick pause right here.

44
00:02:49,380 --> 00:02:53,540
When we come back the next section we're going to start talking about nesting re-usability and configuration.