R3: Components: The Building Blocks

In React, the entire user interface is constructed by partitioning the application into independent, reusable units known as Components. Components are the fundamental structural units of any React application, fulfilling the role of a function that accepts inputs (known as props) and returns React elements that describe the intended output on the screen.

1. Functional Components (Modern Implementation)

The current standard for developing React applications centers around Functional Components. These are simple JavaScript functions that return JSX markup.

Key Component Principles

• Purity: A component, ideally, should return the same output given the same inputs (props).
• Reusability: Components are designed to be used multiple times throughout the application interface.
• Naming Convention: Component names must start with an uppercase letter (e.g., Header, Button, UserCard). This convention allows React’s rendering engine to distinguish custom components from standard HTML elements (e.g., div, p).

2. Creating and Exporting a Component

Every component resides in its own file and must be explicitly exported to be used elsewhere.

Execution Example: Basic Functional Component

In your my-first-app/src directory:

1. Create a new file named Header.js.
2. Insert the following code into Header.js:

import React from 'react';

// 1. Define the component as a standard JavaScript function
function Header() {
  // 2. Return the JSX representing the UI structure
  return (
    <header style={{ backgroundColor: '#282c34', color: 'white', padding: '20px' }}>
      <h1>React Component Architecture</h1>
      <p>This header is an independent functional component.</p>
    </header>
  );
}

// 3. Export the component for consumption by other files
export default Header;

3. Component Rendering and Composition

To render a component, it must be imported into a parent component file and then included within the parent’s JSX using a self-closing tag. This practice is called Composition and forms the hierarchical structure of the UI.

Execution Example: Component Composition

In the same my-first-app/src directory:

1. Open the main component file, App.js.
2. Replace its content with the following code:

import React from 'react';
// 1. Import the previously created Header component
import Header from './Header'; 

function App() {
  return (
    <div className="App">
      {/* 2. Render the imported component as a custom JSX tag */}
      <Header /> 
      
      <main style={{ padding: '20px', border: '1px solid #ddd' }}>
        <h2>Application Root Content</h2>
        <p>The entire application is a tree of composed components.</p>
      </main>
      
      {/* 3. A component used multiple times demonstrates reusability */}
      <Header /> 
    </div>
  );
}

export default App;

3. Local Execution: Ensure your development server is running by executing npm start in your project’s terminal.
4. Observe the output: The App component renders the content of Header.js in both locations where the <Header /> tag is used, confirming the principles of composition and reusability.

4. Component Hierarchy (The Component Tree)

The relationship between components is often visualized as a Component Tree.

• The main entry component (App in our example) serves as the root.
• Any component rendered inside another component is a child of that parent.
• Data and logic flow through this tree, primarily from parent to child via props (properties).