How to Create Multiple Components in React JS?

Oct 22, 2022 . Admin

Hello Friends,

Today, I would like to show you how to create multiple components in react js. This tutorial will give you a simple example of create multiple components in react js. I’m going to show you about react js create multiple components. I’m going to show you about react js create multiple components example.

In this Example create multiple components in react js. I will simply explain step by step to create multiple components in react js. Components are independent and reusable bits of code.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

So, let's start following example:

Step 1: Create React JS App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app reactjs-my-example

Step 2: Create index.js file src/index.js

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

class App extends React.Component {
    render() {
       return (
            <div>
                <Header/>
                <Content/>
            </div>
       );
    }
}

class Header extends React.Component {
    render() {
       return (
          <div>
             <h1>Header</h1>
          </div>
       );
    }
}

class Content extends React.Component {
    render() {
       return (
          <div>
             <h2>Content</h2>
             <p>The content text!!!</p>
          </div>
       );
    }
}
  
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

Run React JS App: