1
00:00:00,000 --> 00:00:04,755
[MUSIC]

2
00:00:04,755 --> 00:00:07,717
[SOUND] Hi, I'm Gil, a frontend
developer and teacher here at Treehouse.

3
00:00:07,717 --> 00:00:10,829
In this course, we're going to build
a React application to store and

4
00:00:10,829 --> 00:00:12,000
manage RSVPs for a party.

5
00:00:12,000 --> 00:00:15,768
This will give you an opportunity
to get more familiar

6
00:00:15,768 --> 00:00:19,129
with how to solve common
problems using React.

7
00:00:19,129 --> 00:00:23,614
You can apply what you learn here to many
other React applications you will build in

8
00:00:23,614 --> 00:00:24,330
the future.

9
00:00:24,330 --> 00:00:29,666
So, first, let me show you what the app
will look like when you're done and

10
00:00:29,666 --> 00:00:30,945
how it will work.

11
00:00:30,945 --> 00:00:33,015
Then we'll do some planning for
how to build it with React components.

12
00:00:33,015 --> 00:00:39,262
When the app loads you see a form where
you can type the name of an invitee.

13
00:00:39,262 --> 00:00:42,378
If I type a name in you
see a tile appears below.

14
00:00:42,378 --> 00:00:45,930
And as I type the tile updates
to what's in the form field.

15
00:00:45,930 --> 00:00:49,781
When I submit the form,
the name on the tile darkens and

16
00:00:49,781 --> 00:00:53,489
other elements like a check box and
buttons appear.

17
00:00:53,489 --> 00:00:56,636
And notice there's a counter on
the right that's also updated.

18
00:00:56,636 --> 00:01:01,295
I'll add a few more names, and
you can see they appear below, and

19
00:01:01,295 --> 00:01:02,922
the counter updates.

20
00:01:02,922 --> 00:01:08,285
So now let's say the first and
last guest confirm they're coming.

21
00:01:08,285 --> 00:01:13,208
Well, I can check, Confirmed, and the
counter will update to show a live count.

22
00:01:13,208 --> 00:01:17,602
I can also click to hide those
who haven't responded and

23
00:01:17,602 --> 00:01:20,323
only the confirmed names show up.

24
00:01:20,323 --> 00:01:24,499
And if I realize one of these names
hasn't confirmed, I can un-confirm.

25
00:01:24,499 --> 00:01:27,043
And that name will drop away.

26
00:01:27,043 --> 00:01:30,710
So I'll uncheck to show
all the names again.

27
00:01:30,710 --> 00:01:37,552
And to edit one of these names,
I'll click its edit button and save.

28
00:01:37,552 --> 00:01:41,088
I can also just delete
it by clicking remove.

29
00:01:41,088 --> 00:01:43,578
And notice the count updated as well.

30
00:01:43,578 --> 00:01:45,539
Now that you've seen the app in action,

31
00:01:45,539 --> 00:01:49,419
I'll show you how to install the files
you will need to get started building it.