Siva Samanthapudi

Posted on Aug 1

React Mastery Series – Day 5: Components in React – Building Reusable User Interfaces

#webdev #react #reactjsdevelopment

Welcome back to the React Mastery Series!

In the previous article, we explored JSX, the syntax that allows us to describe user interfaces in a clean and intuitive way.

Now it's time to learn the heart of React—the concept that makes React applications scalable, maintainable, and reusable:

Components

Everything you build in React is made up of components. Whether it's a button, navigation bar, product card, or an entire dashboard, it's ultimately a composition of components.

Let's understand why.

What is a Component?

A component is an independent, reusable piece of the user interface.

Think of a modern banking application.

Instead of writing the entire page as one large block, we divide it into smaller building blocks.

Bank Dashboard
│
├── Header
├── Sidebar
├── Account Summary
├── Transaction List
├── Quick Transfer
├── Recent Notifications
└── Footer

Each of these sections is a separate React component.

Every component has a single responsibility, making the application easier to understand and maintain.

Why React Uses Components

Imagine an e-commerce application displaying hundreds of products.

Without components, you would repeatedly write the same HTML and JavaScript.

With React, you build a ProductCard once and reuse it throughout the application.

Benefits include:

Reusable code
Easier maintenance
Better organization
Improved readability
Independent testing
Faster development

This is one of the biggest reasons React scales well for enterprise applications.

Functional Components

Modern React applications primarily use functional components.

A functional component is simply a JavaScript function that returns JSX.

Example:

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

You can also write it using an arrow function.

const Welcome = () => {
  return <h1>Welcome to React!</h1>;
};

Both approaches are valid, though arrow functions are commonly used in modern React codebases.

Rendering Components

Once a component is created, it can be used like an HTML element.

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Notice the component name starts with a capital letter.

React treats lowercase tags as HTML elements and uppercase tags as custom components.

Component Composition

One of React's greatest strengths is composition.

Instead of building one huge component, we combine smaller components.

Example:

Dashboard
│
├── Header
├── Sidebar
├── DashboardContent
│      ├── StatisticsCard
│      ├── RevenueChart
│      └── ActivityFeed
└── Footer

Large applications are built by composing dozens—or even hundreds—of small, focused components.

A Real-World Example

Consider a shopping website.

Instead of writing separate HTML for every product, create one reusable component.

function ProductCard() {
  return (
    <div>
      <h3>Wireless Headphones</h3>
      <p>$99</p>
    </div>
  );
}

Now imagine displaying 100 products.

Rather than duplicating the markup 100 times, React allows you to render the same component repeatedly with different data (which we'll learn using props in the next article).

This dramatically reduces duplication and improves maintainability.

Small Components vs Large Components

A common mistake is placing an entire page inside one component.

❌ Difficult to maintain:

Dashboard.jsx
(1200+ lines)

✅ Easier to manage:

Dashboard
│
├── Header
├── Sidebar
├── UserProfile
├── Analytics
├── Charts
├── Notifications
└── Footer

Smaller components are:

Easier to read
Easier to debug
Easier to reuse
Easier to test

Single Responsibility Principle

A component should have one primary responsibility.

Good examples:

SearchBar
LoginForm
Navbar
UserProfile
ProductCard

Poor example:

DashboardComponent

✓ Authentication
✓ API calls
✓ Navigation
✓ Charts
✓ Forms
✓ Notifications
✓ Payments

When a component handles too many responsibilities, it becomes harder to maintain and reuse.

Organizing Components

As applications grow, organizing components becomes increasingly important.

A common folder structure looks like this:

src
│
├── components
│     ├── Button
│     ├── Card
│     ├── Modal
│     └── Navbar
│
├── pages
│
├── layouts
│
├── hooks
│
├── services
│
└── utils

Keeping related files together improves discoverability and collaboration.

Presentational vs Container Components

A useful design pattern is separating components based on their responsibility.

Presentational Components

These focus only on displaying data.

Examples:

Button
Card
Avatar
Badge

They receive data and render UI.

Container Components

These handle application logic.

Responsibilities may include:

Fetching data
Managing state
Calling APIs
Passing data to child components

Separating UI from business logic keeps components cleaner and easier to test.

Naming Components

Choose names that clearly describe the component's purpose.

Good examples:

UserProfile
CheckoutForm
PaymentSummary
OrderHistory
NavigationMenu

Avoid generic names like:

Component1
Data
Temp
TestComponent

Meaningful names improve readability across the codebase.

Component Reusability

A reusable component should:

Solve one problem
Avoid unnecessary dependencies
Be configurable
Be easy to understand
Work in multiple parts of the application

Enterprise applications often rely on reusable component libraries to maintain consistency and speed up development.

Best Practices

When building React components:

Keep components focused on a single responsibility.
Prefer composition over duplication.
Use descriptive names.
Organize components into logical folders.
Avoid creating excessively large components.
Separate UI rendering from business logic where appropriate.

Following these practices leads to code that is easier to scale and maintain.

Key Takeaways

Today, we learned:

✅ Components are the foundation of every React application.
✅ Functional components are the modern standard in React.
✅ Component composition enables scalable application architecture.
✅ Smaller, focused components are easier to maintain and reuse.
✅ Organizing components thoughtfully improves collaboration and code quality.

Coming Next 🚀

In Day 6, we'll explore one of the most important concepts in React:

Props – Passing Data Between Components

You'll learn:

What props are
Why props are immutable
Passing primitive values
Passing objects and arrays
Passing functions as props
Children props
Best practices for designing reusable components

Understanding props is the first step toward building dynamic and interactive React applications.

Happy Coding! 🚀

DEV Community