How to organize Components in ReactJS?

It’s a good practice to keep all the resources organize that will help during the project scalability.  To make the code more readable components must need to be well organized. But as the project grows, there will be more and more components.

Subfolders are needed to make the components more organized rather than throwing all components into a single components folder. In this article, we will show how to create a simple folder structure to organize components in ReactJS.

Organize Components in ReactJS

  • Create folders with the name of the component’s roles.
  • Arrange the components and folders according to their tasks (Note: Don’t put “Header” component into a folder named, “Footer”)

Creating Folders

  • Go to src inside the React Application in Visual Studio Code. And create a folder named components.

  • Now, create another three folders (Header, Home, Footer) inside the components folder.

Add contents to folders

  • Go to Header and create a functional component named. Header.js

// src/components/Header/Header.js
import React from 'react';

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

        </div>
    );
};

export default Header;
  • Add some contents in Header.js
// src/components/Header/Header.js
import React from 'react';

const Header = () => {
    return (
        <div style={{ backgroundColor: "orange", color: "white", textAlign: "center", height: "15vh" }}>
            <h2>This can be a simple navbar</h2>
        </div>
    );
};

export default Header;
  • Import this header in App.js and pass it to JSX.
// import header
import Header from "./components/Header/Header";
import React from "react";
// import header
import Header from "./components/Header/Header";

//src/App.js import './App.css'; 
function App() {

  return (

    <div className="App">
      <Header />
    </div>
  );

}

export default App;

Add some contents to the Header component.

// src/components/Header/Header.js
import React from 'react';

const Header = () => {
    return (
        <div style={{ backgroundColor: "orange", color: "white", textAlign: "center", height: "15vh", paddingTop: "10px" }}>
            <h2>This can be a simple navbar</h2>

        </div>
    );
};

export default Header;

  • Similarly, go to Home (src/components/Home) and create two components there.

// src/components/Home/TopBanner.js

import React from 'react';

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

        </div>
    );
};

export default TopBanner;
// src/components/Home/SecondBanner.js

import React from 'react';

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

        </div>
    );
};

export default SecondBanner;
  • Import and use both components in App.js.
import React from "react";
// import header
import Header from "./components/Header/Header";
// import Second Banner
import SecondBanner from "./components/Home/SecondBanner";
// import Top Banner
import TopBanner from "./components/Home/TopBanner";

//src/App.js import './App.css'; 
function App() {

  return (

    <div className="App">
      <Header />
      <TopBanner />
      <SecondBanner />
    </div>
  );

}

export default App;
  • Add some content and styles to both of them.
// src/components/Home/TopBanner.js

import React from 'react';

const TopBanner = () => {
    return (
        <div style={{ height: "30vh", color: "black", backgroundColor: "#fcdec2", textAlign: "center", paddingTop: "15px", border: "2px solid red", marginBottom: "8px" }}>
            <h3>This is the first banner.</h3>
        </div>
    );
};

export default TopBanner;
// src/components/Home/SecondBanner.js

import React from 'react';

const SecondBanner = () => {
    return (
        <div style={{ height: "30vh", color: "black", backgroundColor: "#fcd6cc", textAlign: "center", paddingTop: "15px", border: "2px solid black" }}>
            <h3>This is second banner in the Homepage</h3>
        </div>
    );
};

export default SecondBanner;

  • Similarly, create a functional component at Footer and add some contents to that footer.
// src/components/Footer/Footer.js

import React from 'react';

const Footer = () => {
    return (
        <div style={{ color: "white", backgroundColor: "orange", height: "10vh", paddingTop: "7px", textAlign: "center" }}>
            <small>This is page footer</small>
        </div>
    );
};

export default Footer;
  • Import and use this Footer component in App.js .
import React from "react";
// import footer
import Footer from "./components/Footer/Footer";
// import header
import Header from "./components/Header/Header";
// import Second Banner
import SecondBanner from "./components/Home/SecondBanner";
// import Top Banner
import TopBanner from "./components/Home/TopBanner";

//src/App.js import './App.css'; 
function App() {

  return (

    <div className="App">
      <Header />
      <TopBanner />
      <SecondBanner />
      <Footer />
    </div>
  );

}

export default App;

Analyzing the component structure in ReactJS

Take a closer look at the structure here.

There are three folders inside the components folder. Each folder represents an exact block of a webpage. And inside those folders, they have their respective components which help to create the blocks of the webpage. We can tell which one is which just by looking at the folder structure.

It doesn’t mean there will be only these three folders or components. It will definitely depend on the project that is being built. A more complex project means more components, hence more folders. But by organizing them in the correct order, they can be easily distinguished.

How Component Functions Are Executed in ReactJS

Take a look at the below code snippet,

//src/App.js import './App.css'; 
function App() {

  return (

    <div className="App">
      <h1>THis is h1 tag inside JSX</h1>
      <h2>THis is h2 tag inside JSX</h2>
      <h3>THis is h3 tag inside JSX</h3>
    </div>
  );

}

export default App;

This is a function; this very code snippet is a function that is returning JSX. Since it is a function, it should be called to be executed.

Take a look at the below code,

import React from "react";
// import footer
import Footer from "./components/Footer/Footer";
// import header
import Header from "./components/Header/Header";
// import Second Banner
import SecondBanner from "./components/Home/SecondBanner";
// import Top Banner
import TopBanner from "./components/Home/TopBanner";

//src/App.js import './App.css'; 
function App() {

  return (

    <div className="App">
      <Header />
      <TopBanner />
      <SecondBanner />
      <Footer />
    </div>
  );

}

export default App;

These are all components that are being imported in App.js. And these components are being used just like an HTML element inside JSX. But under the hood, it is working like a regular function call. Using components inside JSX code, makes React aware of the component functions.

Whenever React evaluates this JSX code, it will call each component function that is inside the JSX. And then these component functions return JSX code which will then be reevaluated.

So, whenever React runs the App.js code, it checks for component functions inside JSX. If it finds one, then it goes inside of that function and evaluated the JSX inside of that function.