React Basics

React ES6

React Hooks

React Class Components

React Class Components

What you'll learn

  • Understand the main ideas in React Class Components.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind React Class Components.

❮ Previous Next ❯

React Class Components

Before React 16.8 (which formally introduced Hooks), Class Components were the only way to track state and handle lifecycle methods in a React component. While Function Components are significantly more common today, understanding Class Components is still vital for reading legacy code.

Creating a Class Component

A class component requires you to extend from the base React.Component class and create a render() method which returns the HTML element.

import React from 'react';


class Welcome extends React.Component {
  render() {
    return <h1>Hello, Class Component!</h1>;
  }
}

Class components are still fully supported and valid in React, but the modern community has heavily shifted towards functional components paired with Hooks.

❮ Previous Next ❯