Create class component in react


Create class component in react

Unlike functional component, class component in React have state which means they can update UI with new value / . Suppose you have <button> element which showing how many time I clicked, can dynamically update value.

Don’t know how to use a functional component ?, here the guide for you

Create React functional component - How to create a functional component in Reactjs web app

Lets create a simple class component with a message

import React,{Component} from "react";

class Message extends Component {
   constructor(props) {
       super(props)
  }
   render() {
       return (
           <div>
              Hi Mr.  <i>{this.props.name}</i> how are you
           </div>
      )
  }
}

export default Message

the App.js will look like

import logo from './logo.svg';
import Message from './components/Message'


function App() {
   return ( <div className = "App" >
<Message name="Ramesh"/>
<Message name='Tommy'/>
       </div>
  );
}

export default App;

The class don’t’ use the state here. I only show how to use props in class component. The props has been passed to the component using constructor, The super is used to pass the value to Component class. You also noticed that all component class are derived from type Component which is a React object.

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.