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.
Implement state with the useState hook - React.js Tutorial
From the course: React for Web Designers
Implement state with the useState hook
- [Instructor] In this video we're going to implement State for the first time with the help of React's useState hook. Hooks are a relatively recent and nifty addition to React. Their function is to let your function components access features that used to be accessible only by class components. State is one of those features, and as we know, state lets the component track the condition of data and update itself when those data change. So all that said, let's give this a whirl. Looking at how things are right now, there are a few pieces of data that we're going to need to track. Let's go with the current color of the shoe, the currently selected size, and all of the sizes that are available. We're using a hard coded data source right now for all of these sizes, but theoretically they might change if we were accessing an API, so we'll treat them as something that might be changeable at some point. So current color, current size, all sizes. Over here in my code, we're going to scroll…
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)
-
-
-