From the course: React for Web Designers
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Use the mockup, make a plan - React.js Tutorial
From the course: React for Web Designers
Use the mockup, make a plan
- [Man] In this video we're going to start our next React project. We're going to get familiar with the mock-up of what we're looking for, and we're going to do a little bit of setup to get the groundwork in place. So, first of all we'll introduce the website. This is Leaf and Mortar. This is a sample, existing website into which we're going to to bring some React components. We're going to be working with this company directory, which is a list of all the employees at this architecture firm, say. And we have these filters, which currently don't work, it's just a mock-up, but the idea will be that we can type somebody's name in, and it will search the available names, and only show people whose name matches. Likewise, we can limit by certain job titles, and we have a check box to show only people who are interns or those who are not. So, if we're going to build this into a series of components, we need to think about how we're going to do that. What I'm going to recommend is that we…
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
-
-
-
-
-
(Locked)
Use the mockup, make a plan6m 9s
-
(Locked)
Scaffold initial components5m 58s
-
(Locked)
Functional components6m 37s
-
(Locked)
Build the filters form5m 41s
-
(Locked)
Forms in React: Controlled or not2m 53s
-
(Locked)
Wire up the filters form10m 57s
-
(Locked)
Respond to filter form updates5m 33s
-
(Locked)
Animating with ReactTransitionGroup8m 21s
-
(Locked)
Challenge: Better usability and animation3m 11s
-
(Locked)
Solution: Better usability and animation5m
-
(Locked)
-
-