ReviseAlgo Logo

Fundamentals

Components

Master React components, covering functional component creation, component composition, legacy class structures, and pure rendering rules.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will learn the core architecture of React components. By the end of this topic, you will be able to:

  • Define and build React functional components.
  • Differentiate between functional components and legacy class components.
  • Compose complex user interfaces by nesting components.
  • Explain the requirement for capitalizing React component names.
  • Understand the pure rendering rules that govern component outputs.

2. Overview

Components are the fundamental building blocks of a React application. They are independent, reusable pieces of UI that return React elements describing what should appear on the screen. By splitting layouts into separate components, you can manage and test different sections of the UI in isolation.

3. Why This Topic Matters

Components simplify the structure of complex user interfaces:

  • Modular Architecture: Instead of writing a single, giant HTML file containing thousands of lines, components allow you to split code into small, self-contained files (e.g. `Navbar.jsx`, `Sidebar.jsx`, `Button.jsx`).
  • Consistent User Interface: Defining a button style or form input as a reusable component ensures consistent styling and behavior across the entire application.

4. Real-World Analogy

Think of React components like **LEGO Bricks**:

  • Individual Bricks (Components): You have standard blocks (buttons, headers, avatar photos). Each block is self-contained and serves a specific purpose.
  • The Castle (The Component Tree): You snap these individual blocks together to build a castle (the App). You can reuse the same block style multiple times (e.g., placing the same button style in the header and footer). If one block breaks, you can replace it without rebuilding the entire castle.

5. Core Concepts

Below is a comparison of modern Functional Components and legacy Class Components:

Property Functional Components (Modern) Class Components (Legacy)
Structure Type Plain JavaScript functions returning JSX. ES6 classes extending React.Component.
Render Method Implicit; JSX is returned directly from the function body. Requires an explicit render() { return JSX; } method.
State Management Uses Hooks (e.g. useState). Uses class properties (this.state, this.setState).
Boilerplate Level Low; clean and easy to read. High; requires constructor setups and method bindings.

6. Syntax & API Reference

This example shows how components are nested in React:

7. Visual Diagram

This diagram displays the hierarchical structure of nested components:

8. Live Example — Full Working Code

Below is a complete HTML page demonstrating how multiple components are declared and nested inside a single page:

What just happened? We define three separate functional components: Header, TaskRow, and App. The App component acts as the parent, nesting Header and two instances of TaskRow within its JSX tree. When mounted, React resolves this nesting to render a single, combined HTML structure.

9. Interactive Playground

Try It Yourself Challenges:

  1. Create a new component named Footer that renders a copy-right notice, and nest it at the bottom of the App layout.
  2. Modify TaskRow to render a checkbox next to the description text.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Declaring components with lowercase names React uses the case of the first letter to distinguish custom components from built-in HTML tags. Lowercase elements are treated as plain HTML tags. function taskRow() {{ ... }}
<taskRow />		 function TaskRow() {{ ... }}
<TaskRow />
Nesting component declarations Declaring a component function *inside* the body of another component function causes the child component to be recreated from scratch on every render, resulting in rendering bugs and performance issues. function Parent() {
function Child() { ... }
return <Child />;
}		 function Child() { ... }
function Parent() {
return <Child />;
} (separate functions)

11. Best Practices

  • Always capitalize component names: Ensure the first letter of your component function name is uppercase (e.g. `UserProfile`).
  • Keep components pure: Components must be pure functions. They should not modify global variables or execute side-effects during execution.
  • One component per file: Export components into their own files (`UserProfile.jsx`) to keep files small and structured.

12. Browser Compatibility/Requirements

React components run on modern JavaScript runtimes. No specific browser overrides are required.

13. Interview Questions

Q1: Why must custom React component names start with an uppercase letter?

Answer: During compilation, JSX is parsed to JavaScript calls. If a tag starts with a lowercase letter, the compiler treats it as a built-in HTML element string (e.g. `

` compiles to `React.createElement('div')`). If it starts with an uppercase letter, the compiler treats it as an identifier for a custom component variable (e.g. `` compiles to `React.createElement(Card)`). Capitalization tells React whether to render a DOM element or execute a custom function.

Q2: What is the main advantage of functional components over legacy class components?

Answer: Functional components are simpler, cleaner, and require less boilerplate. They are plain JavaScript functions that do not require constructor configurations or class bindings. Additionally, since the introduction of Hooks, functional components can handle state and side-effects efficiently while compiling down to smaller, more performant bundle sizes.

14. Debugging Exercise

Identify the bug in this component declaration that causes updates to behave unpredictably:

View Solution

Diagnosis: The component is impure because it mutates the external variable renderCount during execution. Impure components break React's rendering optimizations, leading to unexpected values and inconsistent UI displays. In React, components should never modify global states or variables during rendering.

Fix: Manage state variables locally using React's state management features (like the `useState` Hook) instead of using external global variables.

15. Practice Exercises

Exercise 1: Create a simple weather widget layout

Build a component named WeatherWidget. Inside it, declare and render child components named LocationHeader, TemperatureDisplay, and WeatherDetails.

16. Scenario-Based Challenge

The Multi-Widget Sidebar Challenge:

You are designing a side panel containing several different widgets (e.g. system alerts, notifications, chat previews). Instead of writing all the widget code in a single file, describe how you would split this into separate components to make the widgets reusable across other pages (like the user profile page or search page).

17. Quick Quiz

Q1: Which of the following is a rule that all React components must follow?

A) They must be declared inside a class body.

B) They must return an array of elements.

C) They must act as pure functions with respect to their props.

Answer: C — React components must be pure functions, returning the same JSX output for the same input props.

18. Summary & Key Takeaways

  • Components are the building blocks of user interfaces in React.
  • Modern React uses functional components, while legacy codebases may still use class components.
  • Nesting components allows you to build complex layouts from smaller, modular blocks.
  • All component names must start with an uppercase letter to distinguish them from standard HTML tags.

19. Cheat Sheet

Component Syntax Description
function MyComp() { ... } Defines a functional component.
<MyComp /> Renders an instance of a component.
export default MyComp; Exports a component for import in other files.
---