Build Reusable Page Sections in React.

🧘Please know that I'm sharing here based on my experience. I might be wrong somewhere or you might have better approach which is absolutely fine & I am really happy to know that.

Introduction

When building a React application, you often create multiple pages, each with various sections. For example, a portfolio page might include a Hero section, Skills section, and Projects section. To maintain consistency in margin, padding, and spacing styles across these sections, you can create a Reusable Section component. This approach not only saves time but also makes your app more efficient.

Why Create a Reusable Section Component?

• Consistency: Ensuring that each section has the same styling makes your application look polished and professional.

• Efficiency: By reusing the same component, you avoid repeating code, which speeds up development and reduces the likelihood of errors.

• Maintainability: If you need to update the styling for your sections, you only need to do it in one place.

Create a Reusable Section Component

• Section Component (Reusable)

//Section.tsx
import React, { ReactNode, FC } from 'react';
import './Section.css'; // CSS styling or you can use tailwind css

interface SectionProps {
  children: ReactNode;
  className?: string;
}

const Section: FC<SectionProps> = ({ children, className = '' }) => {
  return (
    <div className={`section ${className}`}>
      {children}
    </div>
  );
};

export default Section;

• Usage

//HomePage.tsx
import React from 'react';
import Section from './Section';

const HomePage: React.FC = () => {
  return (
    <div>
      <Section className="hero">
        {/* Hero section content */}
      </Section>
      <Section className="skills">
        {/* Skills section content */}
      </Section>
      <Section className="projects">
        {/* Projects section content */}
      </Section>
    </div>
  );
};

export default HomePage;