React components are the basic building blocks of a React application.
They work same as JavaScript functions but return HTML.
There are two type of react component

Class components : it is used in legacy version of react. now it is recommended to use functional component with hooks.
Functional Component: A functional component in React is a JavaScript function that returns a React element.

Below index.js file showing both class and functional component. Person is the class component and App is the functional component. The App HTML also embed Person page embed into it.

index.js

import React,{Component } from 'react';
import ReactDOM from 'react-dom/client';

//Person class component
class Person extends Component {
  render() {
    return (
      <div>My name is Shrikant from Person class component</div>
    )
  }
}

//App function component 
function App() {

  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a example of class component in JSX.</p>
      <Person/>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));   //creating a root React component in your application

root.render(<App />)                                                 // rendering React components into a DOM node.

import React,{Component } from 'react';

import ReactDOM from 'react-dom/client';

//Person class component

class Person extends Component {

render() {

return (

<div>My name is Shrikant from Person class component</div>

)

}

//App function component

function App() {

return (

<div>

<h1>Hello, World!</h1>

<p>This is a example of class component in JSX.</p>

</div>

);

}

const root = ReactDOM.createRoot(document.getElementById("root")); //creating a root React component in your application

root.render(<App />) // rendering React components into a DOM node.

Output:

Hello, World!

This is a example of class component in JSX.

My name is Shrikant from Person class component

React JS Components

Hello, World!

Leave a Comment Cancel Reply