React Class Component

React Class Component: If you want to create the largest & complex UI Elements that need to manage their own state or lifecycle methods, then the React Class component is the best option for you.

Table of Contents

What is Class Component

A React Class Component works like a javascript class, But it’s made for creating the largest, most complex & reusable user interface (UI) elements. It also combines regular JavaScript code with JSX, to define how the UI elements should look on the webpage.

Create a Class Component

You can create a class component just like a regular JavaScript function, but its name must start with a capital letter and extend the Component or React.Component

If you extend Component then you will have to import {Component} from “react”

import React, { Component } from "react";
Class ComponentName extends Component {

  render() {
   // Write here code
  }
}

If you extend React.Component then you will have to import React from “react”

import React from "./react"
Class ComponentName extends React.Component {

  render() {
   // Write here code
  }
}

You can define a class component name to be a combination of letters(a-zA-Z), numbers(0-9), & underscore(_).

import React from "react" 
class Developer_Profile_12 extends React.Component { 

}

If you need to define a class component name with more than two words then you can separate those words with hyphens(_). But the First word must be in the camel case and the other may be in any case.

import React from "react" 
class Developer_Profile extends React.Component { 

}

You can define a class component (that has more than two words) without any separator. But You should keep each word in camel case.

import React from "react" 
class DeveloperProfile extends React.Component { 

}

Render JSX

Every class component must have a render method. This method returns the JSX (or elements) that the component will render to the DOM.

You will need to use return statement inside the render() method. So, you should know the following points

import React from "react"

class Developer extends React.Developer {
    render() {
     
       return <p>I am a Developer</p>

   }
}

You can return single-line JSX in a single-line statement

If you need to return multiple lines of JSX then you will have to wrap them with a parent element or Fragment.

import React from "react"

class Developer extends React.Developer {
    render() {
     
       return(
           <div>
           <h3>Software Developer</h3>
           <p>I am a Developer</p>
           </div>
           )

   }
}

You can return a single component in a single-line statement

import React from "react";
import SoftwareDeveloperProfile from './SoftwareDeveloperProfile';

class Developer extends React.Developer {
    render() {
     
       return <SoftwareDeveloperProfile />

   }
}

You can also return components with JSX

import React from "react"; import SoftwareDeveloperProfile from './SoftwareDeveloperProfile'; 

class Developer extends React.Developer { 
   render() { 
       return (
         <>
        <h1>Profile</h1> <SoftwareDeveloperProfile />
         </> ) 
   } 
}

Export Class Components

If you need to use a class component on other js files then you will have to export that class.

If your component is the primary export of the module, use the default keyword to export it. This makes it clear which component is intended to be the main export of the module.

export default class Developer extends React.Developer {

}

To export, you can also declare export default ComponentName at the end of the file.

class Developer extends React.Developer {

}

export default Developer

Import Class Component

If you want to use a class component in other files, you’ll need to import that component into those files.

import Developer from './Tutorial';

Use Class Component

To call a class component, First of all, import and use the namespace with angle brackets <> and backward slash.

<Developer />

Best Practices – Naming Conventions

When naming React class components, it’s important to follow naming conventions that make your code readable, maintainable, and consistent. While there isn’t a single official naming convention for React class components,

there are several common practices you can follow:

Descriptive Names: Choose descriptive and meaningful names for your components that indicate their purpose or functionality.

import React from "react"
// It represnts the header
class Header extends React.Component {
}

// It represents the logo
class Logo extends React.Component {
}

// it represents the sidebar
class Sidebar extends React.Component {

}

// it represents the Carousel
function Carousel() {

}

Capitalize: You can create a class component capitalize/camelcase,

import React from "react"

class Developer extends React.Developer {

}

If you need to create a class component with more than one word then keep all words capitalized without using any separators.

import React from "react" 
class DeveloperProfile extends React.Component { 

}

The suffix – You can create a class component with a ‘Component’ suffix to make it clear that it’s a component.

import React from "react" 

class DeveloperComponent extends React.Component { 

}

class DeveloperProfileComponent extends React.Component { 

}

Contextual Names – If a component is tightly coupled with a specific context or feature, you can include that context in the name.

Example –

Suppose you create a component specifically for administrator users then you can keep the component name ‘AdminUserProfile’ instead of naming it something generic like “UserProfile,”

import React from "react" 
class AdminUserProfile extends React.Component { 

}

File Name Consistently – You should create a component file name similar to the function component name.

Header.js
Fotter.js
Sidebar.js
Developer.js
DeveloperProfile.js