Best ways to Structure React Components

Structuring your React applications is critical for ensuring maintainability, scalability, and code readability as a software developer. In this tutorial, we’ll delve into the best practices for organizing a React app, offering examples and code snippets along the way.

Make sure you have the latest version of NodeJS installed. Then, use the following command to create a new React app:

npx create-react-app my-app

We will discuss the following ways to structure react components

Let us first understand the types of components in React :

Functional Components:

Functional Components are lightweight and focused solely on rendering UI based on props. They are ideal for presentational components or components that don’t require state or lifecycle methods.

Class Components:

Class Components are traditional React components that extend the React.Component class. They are used when you need to manage a state or use lifecycle methods.

Container/Presentational Components:

Container/Presentational Components pattern separates components into two categories: containers (smart components) responsible for fetching data and managing state, and presentational (dumb) components focused on rendering UI based on props.

1. Feature-based Structure:

In this approach, components are organized based on features or functionality rather than their type (e.g., pages, modals, forms). Each feature folder contains all related components, styles, and logic.

2. File and Folder Structure:

Start by creating a src folder as the root directory to house all your components, containers, and other files, ensuring a clean project structure. Inside src, establish the following folders:

• components: for reusable presentational components
• containers: for components linked to the Redux store or managing business logic
• pages: for components representing individual pages or views
• services: for API calls and other external services
• utils: for utility functions and helper files
• styles: for global styles and CSS files

3. Component-Based Architecture:

Organize your components based on their functionality or features. Place related components in separate folders, and each folder should contain the component’s JavaScript file and any associated styles or assets.

import React from 'react';

const GeeksComponent = () => {
    return (
        <div>
            <h1>Hello, GeeksforGeeks</h1>
        </div>
    );
};

export default GeeksComponent;

4. Container Components and Presentational Components:

Distinguish between container components, responsible for managing business logic and connected to the Redux store, and presentational components, which focus on rendering UI elements.

// MainContainer.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Header from '../components/Header/Header';
import Home from '../components/Home/Home';
import About from '../components/About/About';

const MainContainer = () => {
    return (
        <div>
            <Header />
            <Routes>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </Routes>
        </div>
    );
};

export default MainContainer;

5. Using React Router for Navigation:

Use React Router to navigate between pages within your application. First, install React Router using the following command:

npm install react-router-dom

Then use the component in src/App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const App = () => {
    return (
        <Router>
            <Route exact path="/" component={HomePage} />
            <Route path="/about" component={AboutPage} />
        </Router>
    );
};

export default App;

Conclusion:

Efficient development, maintainability, and scalability are crucial considerations for React app structure. This tutorial highlights best practices for building applications that are easy to understand and manage.