WEBVTT

1
00:00:00.000 --> 00:00:05.184
[MUSIC]

2
00:00:05.184 --> 00:00:08.436
We have a working app now but
there are still room for improvement.

3
00:00:08.436 --> 00:00:12.626
React provides us with the ability
to break our app in to components.

4
00:00:12.626 --> 00:00:16.108
A feature we can use to organize and
simplified the app structure.

5
00:00:16.108 --> 00:00:18.839
In fact,
back when we're planning this app,

6
00:00:18.839 --> 00:00:22.560
we planned some components that
we haven't implemented yet.

7
00:00:22.560 --> 00:00:25.775
So in this video, I wanna challenge
you to refactor our application.

8
00:00:25.775 --> 00:00:28.061
Refactoring, you may recall,

9
00:00:28.061 --> 00:00:33.149
is to change the code of a program
without changing its functionality.

10
00:00:33.149 --> 00:00:37.536
So here are the components I want you
to create, the Header, GuestInputForm,

11
00:00:37.536 --> 00:00:39.510
and ConfirmedFilter components.

12
00:00:39.510 --> 00:00:44.406
Once you're done, those components
will fit into this overall structure.

13
00:00:44.406 --> 00:00:46.996
The app will be divided
into two larger components.

14
00:00:46.996 --> 00:00:50.603
The header component and
the main content component.

15
00:00:50.603 --> 00:00:54.412
We've already broken the guest
list into components.

16
00:00:54.412 --> 00:00:57.746
So for this task, we'll focus only on
the components you see highlighted here.

17
00:00:57.746 --> 00:01:03.704
Let's look at the code to get a better
idea of what you'll be working with.

18
00:01:04.823 --> 00:01:10.239
Here in App.js, this header element
will become a header component.

19
00:01:10.239 --> 00:01:14.708
And the form inside will be
the guest input form component.

20
00:01:14.708 --> 00:01:16.460
Below, this div with the class of main
will become the main content component.

21
00:01:16.460 --> 00:01:16.966
And this label element will
become the confirmed filter.

22
00:01:16.966 --> 00:01:18.151
Remember, when you're breaking
this components up, the data and

23
00:01:18.151 --> 00:01:19.349
event handler still need to be pass
down to the right page elements.

24
00:01:19.349 --> 00:01:20.146
So good luck and in the next video,

25
00:01:20.146 --> 00:01:21.419
I'll show you how I extracted
this component's out.