Create a React Component Using the Class Syntax

Andy Van Slaars
InstructorAndy Van Slaars
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 28 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today