Component Driven Architecture

From Pages to Pieces

Think about the first websites you built. You probably had an index.html file, a separate style.css, and maybe some JavaScript. Each page was a single, large document. If you wanted the same navigation bar on ten different pages, you likely copied and pasted the same block of HTML ten times. This works, but it doesn't scale. A single change means editing ten files.

Modern web development flips this model on its head. Instead of thinking in pages, we think in components. A component is a self-contained, reusable piece of the user interface (UI). It bundles its own structure (HTML), style (CSS), and logic (JavaScript) together. Your navigation bar becomes a single Navbar component. The user profile sidebar becomes a Profile component. The footer is a Footer component. You build these pieces once and then assemble them like LEGO bricks to create entire pages.

Component-based architecture is an approach where an application is broken down into smaller, self-contained components.

Decomposing a UI

Learning to see a webpage as a collection of components is a crucial skill. Look at any app you use daily. A social media feed, for example, isn't one big thing. It’s a Post component repeated over and over. Each Post is made of other, smaller components: an Avatar, a Username, the PostContent, and a LikeButton.

This approach is guided by a principle called separation of concerns. Each component has one job. The LikeButton's job is to track and display likes. It doesn't need to know anything about the user's avatar or the post's text. This makes our code cleaner, easier to debug, and drastically simpler to maintain. When you need to update the like functionality, you know exactly which file to open.

How Components Talk

If components are isolated, how do they get the data they need to display? A Username component needs to know which username to show. This is handled through props (short for properties). Props are like arguments you pass to a function. A parent component can pass data down to its child components via props.

This creates a . Data flows in one direction: down. A parent passes props to a child, which might pass them further down to its own children. A child component never directly modifies the data of its parent. This one-way street makes your application's state predictable. When something goes wrong, you can trace the data flow from the top down to find the source of the issue.

// Parent Component
function UserProfile() {
  return (
    <div>
      {/* We pass the username as a 'prop' */}
      <Avatar username="Alex" />
      <UserInfo username="Alex" email="alex@example.com" />
    </div>
  );
}

// Child Component
function Avatar(props) {
  // It receives the data through the 'props' object
  return <img alt={props.username} src={`/avatars/${props.username}.png`} />;
}

// Another Child Component
function UserInfo(props) {
  return (
    <div>
      <p>Name: {props.username}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

Structure and Lifecycle

Historically, components were often written as classes. Today, the standard is to use functional components. They are simpler JavaScript functions that accept props and return what should be rendered on the screen. This shift has made component code more concise and easier to read.

Beyond structure, every component has a lifecycle. Think of it as a component's lifespan. It's born, it lives, and it dies. Frameworks provide hooks into these key moments. The includes three main phases:

Mounting: The component is being created and inserted into the page (the DOM). This is a good time to fetch data from a server.
Updating: The component is re-rendered because its props or internal state have changed.
Unmounting: The component is being removed from the page. This is the moment to clean up anything you set up during mounting, like timers or event listeners.

Understanding this lifecycle allows you to perform actions at precisely the right time, making your applications both powerful and efficient.

Ready to test your understanding?

Quiz Questions 1/5

What is the primary paradigm shift in modern web development discussed in the provided text?

Quiz Questions 2/5

In a component-based architecture, how is data typically passed from a parent component to a child component?

Moving from page-centric development to a component-driven architecture is a fundamental shift in perspective. It requires you to see UIs not as static documents, but as dynamic collections of independent, reusable parts. This approach is the foundation of virtually all modern web frameworks and is the key to building complex, maintainable applications.

Modern Application Logic and Architecture