What is a React Class Component?

About

A React Class component is a React component created via a Javascript.

Even if class component are now an old technology, they are still used and are also still mandatory knowledge if you want to create an Error boundary (ie catch all error component)

Syntax

Javascript

class Welcome extends React.Component {

   // Optional. Needed to set state
  constructor(props) {
     super(props); // Always call the base constructor with props.
  }
  
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
  
}

Feature available only to classes:

Typescript

type MyProps = {
  name: string,
  children: React.ReactNode
}

class Welcome extends React.Component<MyProps> {

   // Optional. Needed to set state
  constructor(props:MyProps) {
     super(props); // Always call the base constructor with props.
     this.state = ...
  }
  
  render() {
    return (
      <>
       <h1>Hello, {this.props.name}</h1>
       {children}
      </>
     );
  }
  
}





Discover More
Examples of React Input Element with Class component

This page keeps the example with class component for a input The react forms components input accept a value attribute that is used to implement a controlled component. A React form: written as...
How to catch exceptions/errors in React?

This page is exception handling In React. When an non-catched javascript error occurs: React remove its UI (ie stop rendering the tree) from the screen. And show a special component known as error...
How to create a Select element in React?

This page is the creation of a HTML select element in React and how to handle it in a form In a non-controlled fashion, you need to read the value from the HTML select DOM element. form implementing...
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React - Forwarding Ref

The forwardRef function wraps a element to add to the props a ref that is generated by React. This ref is called a forwarding ref because you pass it along to use it in one of its child components in...
React Props Chrome Plugin
React - Props

props is the only object argument passed from a component to another component. Props are similar to State, but is public and not fully controlled by the component. You can also pass arguments to...
React Class Component - Event

in the context of a A Toggle component that renders a button that lets the user toggle between “ON” and “OFF” states:
React Class Component - Fetch (Ajax)

in a class component A UD DOM class component defining the MyComponent tag Rendering The standard mandatory “root” DOM node (placeholder for React DOM manipulation) Output: ...
React Class Component - Local State

state management in class component In React, mutable state is typically kept in the state property of components, and only updated with setState(). Do Not Modify State Directly. Use this.setState()....
React Class Component - Rendering (Mounting/Unmounting)

for a class component In a class component, mounting and unmounting are methods: componentDidMount: Runs after the component output has been rendered to the DOM componentWillUnmount componentDidUpdate...



Share this page:
Follow us:
Task Runner