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.
Add the color selector component - React.js Tutorial
From the course: React for Web Designers
Add the color selector component
- [Instructor] Comparing my index.html file to my mock up, there's just one thing that's missing, this color selector. So, in this video, we're going to create that ColorSelector component. It's going to be very similar to our SizeSelector. Switching back over to my editor, I'm going to jump down to my ProductCustomizer and I'm going to add my ColorSelector here. Now of course with the SizeSelector I'm passing in the size and the sizes but with colors I want to pass in the color and the colors. So, I'm going to select this and I'm going to use Command + D to select every instance following this one of that word. Many editors have this kind of multiple cursor editing that will allow you to do something like this. I'll just type color here and that replaces all of them and I can see it in action. It's also undoable with Command + Z and redoable with Shift + Command + Z. Of course I need the value for colors here. Just as we're doing with the sizes, going to collect those colors from the…
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)
Installing React on an existing site8m 7s
-
(Locked)
Identifying your components and data3m 19s
-
(Locked)
Set up first simple component5m 31s
-
(Locked)
Start using JSX with the help of Babel7m 57s
-
(Locked)
Attaching a data source3m 20s
-
(Locked)
Create a new component with array data5m 56s
-
(Locked)
Implement props4m 28s
-
(Locked)
Implement state with the useState hook5m 11s
-
(Locked)
Add the color selector component3m 27s
-
(Locked)
Change options, see reactions6m 14s
-
(Locked)
Challenge: Activate the color selector1m 58s
-
(Locked)
Solution3m 4s
-
(Locked)
-
-
-