Component-Based Architecture in React

In my journey of building front-end applications, I have seen many frameworks come and go. However, React changed everything for me because of one specific concept: Component-Based Architecture.

If you have ever felt overwhelmed by a massive codebase, you are not alone. Thinking in components allows you to break a complex interface into small, manageable, and independent pieces.

In this tutorial, I will walk you through how I approach component architecture in React. I’ll use real-world scenarios, like building a California-based real estate listing or a New York City transit dashboard, to keep things practical.

What is Component-Based Architecture in React?

At its core, component-based architecture is like building with LEGO bricks.

Instead of writing one long HTML file, you create individual pieces like a Header, a SearchBar, and a PropertyCard.

Each component has its own logic and look, which makes debugging much easier for me.

Method 1: Create Functional Components with Props

This is the bread and butter of React development. I always start by defining the smallest possible units.

Imagine we are building a “Tech Job Board” for Silicon Valley. We need a component to display individual job listings.

Here is the full code for a JobListing component:

import React from 'react';

// This is a functional component representing a single job card
const JobListing = ({ title, company, location, salary }) => {
  const cardStyle = {
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '20px',
    margin: '10px 0',
    backgroundColor: '#f9f9f9',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
  };

  return (
    <div style={cardStyle}>
      <h2 style={{ color: '#007bff' }}>{title}</h2>
      <p><strong>Company:</strong> {company}</p>
      <p><strong>Location:</strong> {location}</p>
      <p><strong>Annual Salary:</strong> {salary}</p>
      <button style={{ padding: '10px', cursor: 'pointer' }}>Apply Now</button>
    </div>
  );
};

// Main App component to demonstrate the architecture
const App = () => {
  return (
    <div style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Open Tech Positions - San Francisco, CA</h1>
      <JobListing 
        title="Senior React Developer" 
        company="TechFlow Solutions" 
        location="Palo Alto, CA" 
        salary="$160,000" 
      />
      <JobListing 
        title="Product Designer" 
        company="Creative Cloud" 
        location="Mountain View, CA" 
        salary="$145,000" 
      />
    </div>
  );
};

export default App;

I executed the above example code and added the screenshot below.

I prefer using props because they allow the component to stay “dumb” and reusable.

I can use this same JobListing component for jobs in Austin, Texas, or Seattle, Washington, just by changing the data.

Method 2: Component Composition (The Container Pattern)

Sometimes, passing props through many layers becomes messy. I often use “Composition” to solve this.

Composition is when you nest components inside one another using the children prop.

Think of a “State Tax Calculator” layout where the layout stays the same, but the content changes based on the state.

import React from 'react';

// A Layout Wrapper component
const StateInfoCard = ({ stateName, children }) => {
  return (
    <div style={{ border: '2px solid navy', padding: '20px', borderRadius: '12px' }}>
      <h2 style={{ borderBottom: '1px solid #ccc' }}>{stateName} Information</h2>
      <div className="content">
        {children}
      </div>
    </div>
  );
};

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h1>US State Tax Resources</h1>
      
      <StateInfoCard stateName="Texas">
        <p>Texas has no state income tax.</p>
        <p>Local sales tax rates can vary by city.</p>
        <button>View Property Tax Rates</button>
      </StateInfoCard>

      <div style={{ height: '20px' }}></div>

      <StateInfoCard stateName="California">
        <p>California has a progressive income tax system.</p>
        <p>State tax rates range from 1% to 13.3%.</p>
        <button>Download Tax Forms</button>
      </StateInfoCard>
    </div>
  );
};

export default App;

I executed the above example code and added the screenshot below.

This approach makes my code much cleaner. I don’t have to define every single detail inside the StateInfoCard; I inject what I need.

Method 3: State Management within Components

Components aren’t just for display; they also handle behavior. In my experience, keeping state local to the component is the best way to prevent performance issues.

Let’s build a “US Presidential Election Poll” tracker where users can vote for their preferred candidate.

import React, { useState } from 'react';

const ElectionPoll = () => {
  // Local state for two candidates
  const [candidateA, setCandidateA] = useState(0);
  const [candidateB, setCandidateB] = useState(0);

  const pollBox = {
    padding: '20px',
    border: '1px solid black',
    textAlign: 'center',
    width: '300px'
  };

  return (
    <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', marginTop: '50px' }}>
      <div style={pollBox}>
        <h3>Candidate A</h3>
        <p>Votes: {candidateA}</p>
        <button onClick={() => setCandidateA(candidateA + 1)}>Vote in FL</button>
      </div>

      <div style={pollBox}>
        <h3>Candidate B</h3>
        <p>Votes: {candidateB}</p>
        <button onClick={() => setCandidateB(candidateB + 1)}>Vote in PA</button>
      </div>
    </div>
  );
};

export default ElectionPoll;

I executed the above example code and added the screenshot below.

Using the useState hook inside a component keeps the logic encapsulated. If I delete this component, I don’t have to worry about stray logic breaking the rest of the app.

Best Practices for React Architecture

I have learned a few “golden rules” over the years that help keep my projects from turning into spaghetti code.

First, keep your components small. If a component is longer than 100 lines, I usually break it down.

Second, name your components clearly. Instead of DataBox, use FloridaWeatherDisplay.

Third, always use a folder structure that separates your UI components from your logic (hooks).

Summary of Component Types

When I’m planning a new React app, I generally categorize my components into two types:

1. Presentational Components: These only care about how things look (like a StyledButton).
2. Container Components: These handle data fetching and state (like a UserProfileContainer).

By keeping these separate, I can test my UI without worrying about API calls or databases.

Why I Prefer React’s Architecture

Compared to older ways of building websites, React’s component model is much more predictable.

It allows teams in different time zones, say, New York and Bangalore, to work on different components without stepping on each other’s toes.

Once you master how to pass data via props and manage state, you can build almost anything.

In this tutorial, I have shown you how to create functional components, use composition, and manage local state.

I hope this helps you build cleaner, more professional React applications.

You may also like to read:

• How to Build a Sortable and Paginated Table in React MUI
• How to Build a Custom Table Component in React MUI
• How to Get Component Height in React
• React Component Props with TypeScript

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/