Stop Writing Massive, Single-Page Codebases: A Raw Look at React Components and Props

Before React, we used to render web pages using raw JavaScript and root.render. We had to make a single div inside our HTML file, and then write the entire project's code on that one page. It quickly became super cluttered and messy as the project grew.

React custom components completely fixed this headache for us developers. They let us break big, complex UI tasks into small, isolated pieces that we can bundle together and render easily.

Here is how the system scales step-by-step:

1. Custom Components & Fragments

jsx

function Page() { 
  return ( 
    <>
      <Header />
      <MainContent />
      <Footer /> 
    </> 
  );
}   

• Composability: Custom components give you the power to break a huge layout task down into smaller, manageable individual files (like <Header /> or <Footer />).
• No Clutter: <></> are fragments. In React, these fragments let you group your child elements together without creating extra, useless <div> tags inside your final HTML markup.

1. Reusable Components & Props

jsx

import travelImg from "./assets/travel.png"
{props.Setup && <p>{props.Setup}</p>}

• Dynamic Utility: Props let you reuse the same component multiple times with different data. You can design one single card layout, and pass different data into it wherever and whenever you want.
• Reusability: Props turn hardcoded layout blocks into completely reusable assets.
• Static Assets: You can directly import your assets (like images) right into your components and reuse them across your app easily.
• Safe Rendering: Using the {props.Setup && <p>{props.Setup}</p>} conditional logic protects your UI. If a specific data piece is missing from the database, React skips the tag instead of throwing an error.

1. Props, Array Mapping & Spreading

jsx

export default function App() { 
  const travel = data.map((datas) => { 
    return ( 
      <Entry 
        key={datas.id} 
        {...datas} 
      /> 
    ); 
  }); 
  return (
    <> 
      <Header /> 
      {travel} 
    </>
  ); 
}

• No More Hardcoding: Instead of manually writing out hardcoded text in your files, you can use the native JavaScript .map() method to pull data dynamically from an array file and render it through props.
• The Spread Power Move: Using the spread method ({...datas}) directly inside your loop lets you pass properties cleanly.
• How it Works: {...datas} unpacks the object. It takes all the key-value pairs inside that specific data block and automatically passes them down as individual props into your component, rendering your data instantly with minimal code boilerplate.