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.