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.
Create a new component with array data - React.js Tutorial
From the course: React for Web Designers
Create a new component with array data
- In this video, we're going to use the data source that we installed to build the size selector component without having to hard code any data. We're going to try and minimize effort by stealing HTML from this mock-up wherever we can. Just to be clear, this is what we're going to be building, the size selector right here. Switching over to my editor, I'm going to jump down to line 114 with control g. Here's my react root and down here is where all of my elements appear. Here in the selectors div. I'm currently interested in this size selector, but to make sure I get everything exactly as it is, I'm going to collapse that and just select the whole thing. Copy it and I'm going to bring it over into my app.js file. It appears right underneath the product image and I'm not interested right now in the color selector, so I'm just going to take that out. Make this a little nicer. Okay. So now I have the markup, but I want this to be rendered as a component. So I'm going to extract what's…
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)
-
-
-