From the course: React for Web Designers
Unlock this course with a free trial
Join today to access over 22,500 courses taught by industry experts.
Functional components - React.js Tutorial
From the course: React for Web Designers
Functional components
- [Instructor] Now that we have our directory component, which has our state and the whole wrapping structure that we're going to place our other components in, let's build up those other components. Specifically we'll build up filters, people, and the person component that isn't even mentioned so far. So we'll create these as function components. We'll start with the filters component. Function filters with props as the argument, and we're going to do something super simple here. We're just going to return a little block of static java script for now. We're going to deal with this component a little more later. Let's go into our file, and grab some markup. So I'll just grab this form tag. That'll be our wrapper. And then when we define the actual elements in here, they'll go in this place. For now we'll just say filters go here. That's enough. Next we'll add our people component. This is going to return mostly another block of JSX, but because we're passing in our people prop, we're…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Use the mockup, make a plan6m 9s
-
Scaffold initial components5m 58s
-
Functional components6m 37s
-
Build the filters form5m 41s
-
Forms in React: Controlled or not2m 53s
-
Wire up the filters form10m 57s
-
Respond to filter form updates5m 33s
-
Animating with ReactTransitionGroup8m 21s
-
Challenge: Better usability and animation3m 11s
-
Solution: Better usability and animation5m
-
-
-