Create a React Component Using the Class Syntax
The hooks API that brought us useState, useEffect, and others became available in React 16.8, but the class syntax for creating components is still fully supported. Unless you're only working on brand-new React code, odds are good that you're going to come across components built as classes. In this lesson, we'll build a new component using the class syntax.
Instructor: [0:00] We've built all the components so far in this application using function components and the React Hooks API so that we can give those function components state and effects. While this is the preferred way to build components now, prior to the introduction of the Hooks API class components were the only way to have stateful components.
[0:18] There's a lot of existing code out there that uses class components. Let's build a class component so we're familiar with the structure. Then when we come across a class component in existing code, it won't be completely foreign to us.
[0:30] I'll start by replacing the keyword function here with the word class. I'm going to say that class Practice extends React.Component. Our class is going to be enclosed in curly braces. Inside this class, in order to render instead of just returning our JSX, we're going to have a render method. Whatever gets returned from this render method will be our output.
[0:56] I'm going to move this return statement right up here into the render. Now I'm going to get rid of this extra code. Let's save this. Let's just verify in the browser that this component works. I'll switch over to the browser, click my link to the practice route. We'll see that we're still getting the same output, except now our component is defined as a class.
[1:19] In this render method, our return works just like the return from our function component. We can return any JSX that we need. We need to make sure that we have a single root element. All the same rules apply.
[1:29] I'm going to come up here. I'm going to replace this div practice here placeholder with some pre-written static JSX. I'll just paste this in. We'll just run through it from the top. We just have a <h3> here that says Practice. We have this div for progress that'll eventually show what card we're on out of a total.
[1:52] We have this card class that contains our term and some buttons to flip the card and show us the previous and the next cards. Let's just save that and verify that that works in the browser. We'll see that this is our preview that we're working with, but this JSX is static. None of this is going to work yet, but it's a starting point.