Component Architecture Fundamentals

Telling vs. Showing

When you use plain JavaScript to build a user interface, you give the browser a list of explicit commands. You might say, "first, create a div element. Then, set its class to container. Next, insert a p tag inside it. Finally, add the text 'Hello' to that paragraph." This is an imperative approach. You are dictating every step of how to achieve the result.

React takes a different path. It uses a declarative style. Instead of giving step-by-step instructions, you simply describe the final user interface you want to see based on the current state. You tell React, "I want a div with a container class that contains a paragraph with the word 'Hello'." You don't manage the creation, insertion, or updates. You declare the desired end state, and React figures out the most efficient way to get there.

The core shift is from managing the process (imperative) to describing the outcome (declarative). This lets you focus on what your application should look like, not how to manipulate the DOM.

The Virtual DOM

So how does React manage to update the UI so efficiently without direct instructions? It uses a clever abstraction called the . Think of it as a lightweight copy of the actual browser DOM, kept in memory as a JavaScript object.

When your application's state changes—for example, a user clicks a button or new data arrives—React doesn't immediately touch the real DOM. Instead, it performs a three-step process:

It creates a new Virtual DOM tree representing the updated UI.
It compares this new tree with the previous Virtual DOM tree. This comparison process is called "diffing."
It calculates the minimal set of changes required to make the real DOM match the new Virtual DOM.

Finally, React takes this small batch of changes and applies them to the actual browser DOM. This avoids expensive and slow direct manipulations, resulting in a much faster and smoother user experience.

Introducing JSX

To describe what the UI should look like, React uses a syntax extension for JavaScript called JSX. It might look exactly like HTML, but it's not. Under the hood, JSX is converted into regular JavaScript function calls that create objects for the Virtual DOM.

This lets you write your component's structure and logic in the same place, using the full power of JavaScript directly within your markup. For example, you can embed variables or run functions inside your UI description.

const userName = 'Alice';
const greeting = <h1 className="main-title">Hello, {userName}!</h1>;

There are a couple of important rules to remember when writing JSX. First, HTML attributes that are hyphenated, like font-size, are written in camelCase (fontSize). More importantly, attributes that conflict with JavaScript reserved words are changed. The most common example is the class attribute, which becomes className in JSX.

Second, a component must always return a single root element. You can't return two adjacent elements.

// This will cause an error!
return (
  <h1>About Me</h1>
  <p>I am a React developer.</p>
);

To fix this, you can wrap them in a containing div. But if you don't want to add an unnecessary element to the DOM, you can use a , which is a special component that renders nothing to the page. You can write it out as <React.Fragment> or use the convenient empty tag syntax <>.

// This is the correct way, using a fragment
return (
  <>
    <h1>About Me</h1>
    <p>I am a React developer.</p>
  </>
);

Two Types of Components

In React, you'll encounter two ways to define components: Functional Components and Class Components.

A Class Component is an ES6 class that extends from React.Component. It uses a render() method to return JSX and can hold state and lifecycle methods.

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

A Functional Component is a plain JavaScript function that accepts props as an argument and returns JSX. For years, these were considered "stateless" components, used only for presentational purposes.

However, with the introduction of , functional components can now manage state, handle side effects, and do everything class components can do. Because they are more concise, easier to read, and simpler to test, functional components are now the modern standard for all new React development. While you will still see class components in older codebases, you should always write new components as functions.

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Finally, the real power of React comes from composition. You can build small, self-contained components and then assemble them to create complex user interfaces. A page is made of sections, a section is made of cards, and a card is made of a heading, an image, and a button. Each of these can be its own component, nested inside another.

Breaking down your UI into small, reusable components is the fundamental practice of building applications in React.

Ready to test your understanding of these core concepts?

Quiz Questions 1/6

Which statement best describes the declarative approach React uses to build user interfaces?

Quiz Questions 2/6

What is the primary benefit of using a Virtual DOM?

With this foundation, you're ready to start building dynamic and interactive interfaces.

Mastering Modern React Development