How to create class component in Reactjs?

In this reactjs tutorial for beginners we learn what is component and what is a class component in react js..

1. Right Click on src folder and click on New File to create your first file.
2. Give the file name for your page like (User.js) keep the first latter as capitalize.
3. Wright below code in your file (User.js).

User.js

import React,{Component} from 'react'
class User extends Component
{
    render() {
        return(
            <div className="App">
                <h2>Hello User!</h2>        
            </div>        
        )
    }    
}

App.js

import logo from './logo.svg';
import './App.css';
import User from './User';

import {User} from './User'
function App() {
  return (
    <div className="App">
     <h1>Hello World !</h1>
     <User />
    </div>
  );
}

export default App;

1. Open Index.js file and import or replace default ‘./App’ file name to your file name ‘/User’.
2. Same as in render function, just add or replace <App /> tag to your file name tag <User />.

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Example of class component in react js

Open your project using cmd follow the bellow steps. (refer the below image for your reference).

• C:\Users\user>cd project
• C:\Users\user\project>cd blog
• C:\Users\user\project\blog>npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.