Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's go over the RSVP app you're going to build, and how it will work. Then, we'll plan how to build it with React components.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
[SOUND] Hi, I'm Gil, a frontend
developer and teacher here at Treehouse.
0:04
In this course, we're going to build
a React application to store and
0:07
manage RSVPs for a party.
0:10
This will give you an opportunity
to get more familiar
0:12
with how to solve common
problems using React.
0:15
You can apply what you learn here to many
other React applications you will build in
0:19
the future.
0:23
So, first, let me show you what the app
will look like when you're done and
0:24
how it will work.
0:29
Then we'll do some planning for
how to build it with React components.
0:30
When the app loads you see a form where
you can type the name of an invitee.
0:33
If I type a name in you
see a tile appears below.
0:39
And as I type the tile updates
to what's in the form field.
0:42
When I submit the form,
the name on the tile darkens and
0:45
other elements like a check box and
buttons appear.
0:49
And notice there's a counter on
the right that's also updated.
0:53
I'll add a few more names, and
you can see they appear below, and
0:56
the counter updates.
1:01
So now let's say the first and
last guest confirm they're coming.
1:02
Well, I can check, Confirmed, and the
counter will update to show a live count.
1:08
I can also click to hide those
who haven't responded and
1:13
only the confirmed names show up.
1:17
And if I realize one of these names
hasn't confirmed, I can un-confirm.
1:20
And that name will drop away.
1:24
So I'll uncheck to show
all the names again.
1:27
And to edit one of these names,
I'll click its edit button and save.
1:30
I can also just delete
it by clicking remove.
1:37
And notice the count updated as well.
1:41
Now that you've seen the app in action,
1:43
I'll show you how to install the files
you will need to get started building it.
1:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up