How to Split Components Into Multiple Components in ReactJS

In a webpage, each building block with different data can be a component. An entire section can be a component and inside of that section, there can be more than one component. Like, we can split each element of a webpage into multiple components and store those components into a single component.

Split Components Into Multiple Components in ReactJS

In this article, we will learn, how to split components and use them all together. Below are the few steps that will help the process,

  • Declare a parent component.
  • Split the parts of the parent component into multiple components and import them to the parent component.

Declare a parent component

Note: (In this article we are using App.js as a parent component)

  • Open the ReactJS application folder in Visual Studio Code.

  • Open App.js file from src/App.js
//src/App.js

import './App.css';




function App() {
  
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

Split the parts of the parent component into multiple components and import

  • Create a component named Header.js in src/comonents folder and export it.

// src/components/Header.js

import React from 'react';

const Header = () => {
    return (
        <div>

        </div>
    );
};

export default Header;
  • Import this Header.js component into App.js
// import Header.js from components folder
import Header from './components/Header';
//src/App.js

import './App.css';

// import Header.js from components folder
import Header from './components/Header';



function App() {
  
  return (
    <div className="App">
      
    </div>
  );
}

export default App;
  • Pass this component with self-closing tag inside JSX
<Header />
return (
    <div className="App">
      <Header />
    </div>
  );
  • Go to the Header component and write some HTML codes to create a navigation menu in it.
// src/components/Header.js

import React from 'react';

const Header = () => {
    return (
        // create a navigation menu in JSX
        <header style={{textAlign: "center"}} className="nav-parent">
            <nav>
                <div>
                    <h1 className="logo">Codebun</h1>
                </div>

                <div>
                    <ul className="nav-menu">
                        <li>Home</li>
                        <li>About</li>
                        <li>Blogs</li>
                        <li>Contact</li>
                        <li>Portfolio</li>
                    </ul>
                </div>
            </nav>
        </header>
    );
};

export default Header;

  • Create a Header.css file into the components folder and import it to the Header component after that, add some styles in it to give it a decent look. To know about adding CSS styles in React, Read this article.
/* src/components/Header.css */

.nav-parent {
    background-color: #FA7D19;
    margin: 0;

}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 90px;
}

.nav-menu {
    display: flex;
}

.logo {
    margin: 0;
    font-weight: bold;
    font-size: 2rem;
    color: white;
}

.nav-menu li {
    list-style: none;
    margin: 0 6px;
    padding: 3px 8px;
    font-size: 1.2em;
    cursor: pointer;
    color: white;
    font-weight: bold;

}

And the preview should be something like this,

  • Create another component in src/components folder (in our case, it is CourseList.js). And open that component.
// src/components/CourseList.js

import React from 'react';
const CourseList = () => {

    return (
        <div>
            

        </div>
    );
};

export default CourseList;
  • Add some <div> with some contents in it in JSX.
// javascript's Date method
const startingDate = new Date(2022, 6, 12).toLocaleDateString();
return (
        <div className="content-container">
            <div className="content-info">
                <h2>JavaScript</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div className="content-info">
                <h2>ReactJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div className="content-info">
                <h2>ExpressJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

        </div>
    );
// src/components/CourseList.js

import React from 'react';
const CourseList = () => {
    const startingDate = new Date(2022, 6, 12).toLocaleDateString();

    return (
        <div className="content-container">
            <div className="content-info">
                <h2>JavaScript</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div className="content-info">
                <h2>ReactJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div className="content-info">
                <h2>ExpressJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

        </div>
    );
};

export default CourseList;
  • Import this component in App component. And pass it to the JSX, right after <Header />
// import CourseList.js from components folder
import CourseList from './components/CourseList';
return (
    <div className="App">
      <Header />
      <CourseList />
    </div>
  );
//src/App.js

import './App.css';

// import CourseList.js from components folder
import CourseList from './components/CourseList';

// import Header.js from components folder
import Header from './components/Header';



function App() {

  return (
    <div className="App">
      <Header />
      <CourseList />
    </div>
  );
}

export default App;

  • Create a CSS file named, CourseList.css in src/components folder.
    Note: Always keep in mind to import CSS file to the component.
// import CourseList css file from src/components
import './CourseList.css';
// src/components/CourseList.js

import React from 'react';
// import CourseList css file from src/components
import './CourseList.css';
const CourseList = () => {
    const startingDate = new Date(2022, 6, 12).toLocaleDateString();

    return (
        <div className="content-container">
            <div className="content-info">
                <h2>JavaScript</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div className="content-info">
                <h2>ReactJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div className="content-info">
                <h2>ExpressJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

        </div>
    );
};

export default CourseList;
  • Add some styles in it to give the component a decent look.
.content-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 70px 30px;
}

.content-info {
    border: 2px solid #FA7D19;
    border-radius: 5px;
    background-color: #ffebdae7;
    padding: 10px;
    text-align: center;
}