DEV Community

Dhairya Shah
Dhairya Shah

Posted on

2 1

How to use Class-based Components in React

In this article, I am going to show you how you can use class-based components in React JS

Let's get started 🎉

What is Class-based components

Class-based components are simple classes which tends as a React components which can be easily used anywhere in your React Project

How to use them?

class Snowbit extends Component {
  render() {
    return (
      <div className="container">
        <h1>I am SnowBit - Shown using class based Component</h1>
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
joaolss profile image
João Lucas Silva •

The only problem is that you shouldnt, React only keeps support for class based components as to don’t break every app made in the past years, but you should use function components from now on since all new react features are based on hooks and as the react docs state, 1. Function components are lighter, 2. Hooks fix some inherit problems with class components lifecycle functions, 3. With the exception of error boundary, you can do everything that you could with classes using hooks

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
maksimmedvedev profile image
MaksimMedvedev •

I guess Error Boundaries only

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay