This content originally appeared on DEV Community and was authored by Satyanarayan Dalei
🧘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;
This content originally appeared on DEV Community and was authored by Satyanarayan Dalei
Satyanarayan Dalei | Sciencx (2024-08-07T16:50:42+00:00) Build Reusable Page Sections in React.. Retrieved from https://www.scien.cx/2024/08/07/build-reusable-page-sections-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.