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.
Identifying your components and data - React.js Tutorial
From the course: React for Web Designers
Identifying your components and data
- [Instructor] In this video, we're going to take a look at a static mockup of what we want our result to look like when our React project is done, and start making plans about where our components should be and what data we're planning for. So I've opened up the mockup.html file here in my browser. I have a mockup of what we actually want in the end, pretty simple little thing. We're going to be able to select the size of the sneaker, and we're going to be able to choose a color. And when we choose the color, the color of the shoe changes. So let's take a look at our HTML file just to see how this mockup works from that perspective. Over here in Visual Studio Code, I'm going to use Ctrl + G to skip down to line 114 again. Here's where my React components will go. And here's my static mockup. So I just want you to note that we have some wrapping divs for all these different elements. The selectors are contained in their…
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)
-
-
-