Join Joe Chellman for an in-depth discussion in this video Add the color selector, part of React for Web Designers (2018).
- [Instructor] In this video, we're going to add…our last component, our color selector.…Referring back to my mock up,…you can see that I just need another popup menu…with the available colors…which is going to go right under my size selector.…So let's switch back to the code and make this happen.…This is going to be very similar to my size selector.…So similar in fact…that I'm just going to collapse this whole thing down…using my little code folding widget here in the gutter.…
Just copy the whole thing.…I'm going to paste it underneath the original size selector.…So let's call this ColorSelector…and we're going to be able to use a lot of the same stuff here.…We're going to have some colors…that come in from our inventory…which we can pass in as a prop.…We're going to output a series of options…and they're going to be labeled.…So this is going to be really startlingly similar.…First we'll change sizeOptions to colorOptions.…
We'll change the helper function invocation down here.…And instead of looping over sizes,…
- Identify notable features about how React works.
- Identify good early steps for any React project.
- Explain why the little PHP app that powers our API has a way to add delay.
- Outline what a lifecycle method is.
- Recall the React convention that must be followed when adding a status message.
- Explain the purpose of React.Fragment.
Skill Level Intermediate
1. Introducing React
2. First Project: Customizer
3. Second Project: Directory Browser
4. Third Project: Status Updater
Next steps: Lots more React2m 37s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.