Component organization in React

Introduction

Organizing components helps keep your React app clean and easy to understand. It makes finding and fixing parts faster.

When your app grows and has many parts to manage

When you want to reuse parts in different places

When working with others on the same project

When you want to keep your code neat and easy to read

Syntax

React

src/
  components/
    Header.jsx
    Footer.jsx
    Button.jsx
  pages/
    Home.jsx
    About.jsx
  App.jsx

Keep components in folders by their role or feature.

Name files with the component name and .jsx extension.

Examples

A simple reusable button component.

React

// Button.jsx
export function Button() {
  return <button>Click me</button>;
}

Header uses the Button component inside it.

React

// Header.jsx
import { Button } from './Button';

export function Header() {
  return <header><h1>Welcome</h1><Button /></header>;
}

Main app combines Header, main content, and Footer components.

React

// App.jsx
import { Header } from './components/Header';
import { Footer } from './components/Footer';

export function App() {
  return (
    <>
      <Header />
      <main>Main content here</main>
      <Footer />
    </>
  );
}

Sample Program

This example shows a simple React app with components organized by their role. The App component uses Header and Footer. The Header uses the Button component. This keeps code easy to find and reuse.

React

import React from 'react';

// Button.jsx
export function Button() {
  return <button aria-label="Click me button">Click me</button>;
}

// Header.jsx
import { Button } from './Button';
export function Header() {
  return (
    <header>
      <h1>Welcome to my site</h1>
      <Button />
    </header>
  );
}

// Footer.jsx
export function Footer() {
  return <footer>© 2024 My Site</footer>;
}

// App.jsx
import { Header } from './components/Header';
import { Footer } from './components/Footer';

export function App() {
  return (
    <>
      <Header />
      <main>
        <p>This is the main content area.</p>
      </main>
      <Footer />
    </>
  );
}

Important Notes

Use folders to group related components for better clarity.

Keep components small and focused on one job.

Use clear, descriptive names for files and components.

Summary

Organize components by their role or feature to keep code clean.

Small, reusable components make your app easier to build and maintain.

Good organization helps teamwork and future updates.