React Architecture – Detailed Notes

Introduction to React Architecture

React Architecture refers to the way a React application is organized into components, data, state, event handlers, and supporting tools to build interactive user interfaces. React follows a component-based approach in which a large user interface is divided into smaller, reusable components.

A well-designed React architecture makes applications easier to develop, understand, test, maintain, and scale. It helps developers organize the UI, manage data flow, handle user interactions, and connect the frontend with backend services.

Learn more: JustAcademy React JS Training | Register for React JS Course Demo

1. What Is React Architecture?

React Architecture is the structural design of a React application. It defines how components are divided, how data moves between components, how state is managed, how user interactions are handled, and how the application communicates with external services.

React itself is a JavaScript library focused on user interfaces. Developers can add routing, API communication, state-management libraries, testing tools, and other technologies according to the application's needs.

Example

Consider an e-commerce website built with React. Its architecture may contain the following components:

• Header: Displays the website logo and navigation.
• Navbar: Provides navigation links.
• ProductList: Displays available products.
• ProductCard: Displays an individual product.
• Cart: Displays selected products.
• Footer: Displays contact information and additional links.

Each component has a specific responsibility, and the components work together to form the complete application.

2. Main Components of React Architecture

2.1 Components

Components are the fundamental building blocks of a React application. They represent individual parts of the user interface and can contain JSX, JavaScript logic, event handlers, and references to state or props.

Modern React applications generally use function components.

function Header() {
  return (
    <header>
      <h1>My React Website</h1>
    </header>
  );
}
export default Header;

In this example, Header is a component that displays the website heading.

2.2 JSX

JSX is a JavaScript syntax extension that allows developers to describe UI elements using HTML-like markup inside JavaScript.

function Welcome() {
  const name = "Manish";
  return <h2>Welcome, {name}!</h2>;
}

JSX helps developers define what the component should display. It is transformed into JavaScript by the development toolchain.

2.3 Props

Props are inputs passed from a parent component to a child component. They allow components to receive data and customize their output.

function Student({ name }) {
  return <h2>Student Name: {name}</h2>;
}
function App() {
  return <Student name="Rahul" />;
}

Here, App passes the name value to Student using a prop. Props should be treated as read-only.

2.4 State

State stores information that can change during the application's execution. When relevant state changes, React can render the updated user interface.

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

In this example, useState stores the counter value, and setCount updates it when the button is clicked.

2.5 Event Handling

Event handling allows components to respond to user actions such as clicks, typing, form submissions, and selections.

function ButtonExample() {
  function handleClick() {
    alert("Button clicked!");
  }
  return <button onClick={handleClick}>Click Me</button>;
}

The onClick event handler executes the handleClick function when the user clicks the button.

2.6 Hooks

Hooks allow function components to use React features such as state, context, and effects.

• useState: Manages local component state.
• useEffect: Synchronizes a component with external systems.
• useContext: Reads values from React context.
• useRef: Stores a reference or a value between renders.
• useReducer: Manages state using a reducer function.
• useMemo: Caches a calculated value when appropriate.
• useCallback: Caches a function definition when appropriate.

3. Basic React Architecture Diagram

The following diagram illustrates a simplified React application's structure and data flow.

                 React Application
                         |
                         v
                  Root Component
                      (App)
                         |
             +-----------+-----------+
             |           |           |
             v           v           v
           Header      Main       Footer
                         |
                +--------+--------+
                |                 |
                v                 v
            ProductList         Cart
                |
                v
            ProductCard
                |
                v
           Rendered UI
                |
                v
           User Interaction
                |
                v
           Event Handler
                |
                v
           State Update
                |
                v
          React Re-render

This is a conceptual diagram, not a mandatory structure for every React project. Actual applications may include routing, shared state, API services, context providers, and other layers.

4. Component-Based Architecture

React applications are organized as a hierarchy of components. A parent component can render child components, and each child can contain additional components.

Example Component Hierarchy

App
├── Header
├── Navbar
├── MainContent
│   ├── Sidebar
│   ├── ProductList
│   │   ├── ProductCard
│   │   └── ProductCard
│   └── Cart
└── Footer

Advantages

• Breaks complex interfaces into smaller units.
• Encourages reusable code.
• Makes individual UI sections easier to test.
• Improves maintainability.
• Allows different components to be developed independently when interfaces are clearly defined.

5. One-Way Data Flow in React

React generally follows one-way data flow. Data is passed from parent components to child components through props. A child component does not directly modify its parent's props.

When a child needs to request a change, the parent can pass a callback function to the child. The callback allows the child to communicate an event or requested change to the parent.

Example

function Child({ message, onNotify }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={onNotify}>Notify Parent</button>
    </div>
  );
}
function App() {
  function handleNotify() {
    alert("The child component sent a notification!");
  }
  return (
    <Child
      message="Hello from the parent"
      onNotify={handleNotify}
    />
  );
}
export default App;

Advantages of One-Way Data Flow

• Makes data movement easier to follow.
• Helps developers trace the source of values.
• Supports predictable component behavior.
• Simplifies debugging in many applications.

6. How React Renders the User Interface

React rendering is the process of determining what the user interface should display. When a component is first displayed or relevant inputs change, React may render it again.

Main Rendering Steps

1. Trigger: An initial render or a relevant state, props, or context change triggers rendering work.
2. Render: React calls components to determine the UI they should return.
3. Reconciliation: React determines how the new UI output differs from the previous output.
4. Commit: React applies the necessary changes to the relevant rendering environment, such as the browser DOM.
5. Display: The browser presents the updated interface.

A component re-render does not necessarily mean that React will change the browser DOM. If the output has not changed, DOM updates may not be needed.

Example

import { useState } from "react";
function App() {
  const [message, setMessage] = useState("Welcome");
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("Hello React")}>
        Change Message
      </button>
    </div>
  );
}

When the button is clicked, the state changes and React renders the component with the new message.

7. Virtual DOM and Reconciliation

The Virtual DOM is a commonly used term for React's internal representation of the UI. React uses reconciliation to determine which changes are required when a component renders new output.

How It Works

1. React calculates the component's UI output.
2. When relevant data changes, React calculates the new output.
3. React compares the new output with the previous rendered result.
4. React determines the required changes.
5. React commits the necessary changes to the browser DOM.

Benefits

• Reduces the need for manual DOM manipulation.
• Helps manage complex UI updates.
• Supports declarative UI development.
• Allows React to coordinate rendering work.

Note that Virtual DOM reconciliation is not a guarantee that every React application will be faster than every alternative. Performance depends on application design and implementation.

8. State Management Architecture

State management defines how an application stores, updates, and shares information that changes over time. React supports local component state and provides mechanisms for sharing state between components.

8.1 Local State

Local state belongs to an individual component or custom Hook and is suitable for information used in a limited area of the interface.

Examples: A dropdown's open status, a form field value, or a counter.

8.2 Shared State

Shared state is information needed by multiple components. Developers can place state in a common parent and pass it through props, or use Context or an external state-management library when appropriate.

Examples: Shopping cart data, a selected theme, or application-wide user preferences.

8.3 State Management Tools

Not every React application needs an external state-management library. Choose an approach based on the complexity and sharing requirements of the application.

9. API Integration Architecture

Most real-world React applications communicate with backend services to retrieve or update information. API integration connects the user interface with external data sources.

Typical API Data Flow

User Action
    |
    v
React Component
    |
    v
API Service or Data-Fetching Tool
    |
    v
Backend API
    |
    v
Database or Business Logic
    |
    v
API Response
    |
    v
React State or Query Cache
    |
    v
Updated User Interface

The database is usually accessed by the backend rather than directly by the browser-based React application. The exact architecture depends on the backend and data-fetching approach.

Example API Function

async function getProducts() {
  const response = await fetch("/api/products");
  if (!response.ok) {
    throw new Error("Unable to load products");
  }
  return response.json();
}

This function requests product data from an API endpoint. In a real application, the component or data-fetching layer should also handle loading, error, and empty states.

Common API Tools

• fetch(): A built-in browser API for making network requests.
• Axios: An HTTP client library.
• TanStack Query: Helps manage server data, caching, and request status.

10. Routing Architecture

Routing determines which page or view should appear for a particular URL. React itself does not provide a complete built-in routing system for typical client-side page navigation, so developers often use a routing library.

Example Routes

• / – Home page.
• /products – Product listing page.
• /products/101 – Product details page.
• /cart – Shopping cart page.
• /contact – Contact page.

Common Routing Library

React Router is a popular option for defining routes, displaying route-specific components, and supporting navigation.

Advantages of Routing

• Organizes an application into navigable views.
• Supports URL-based navigation.
• Allows users to bookmark specific pages.
• Helps separate page-level components from reusable UI elements.

11. Typical React Project Folder Structure

A clear folder structure helps developers find files, separate responsibilities, and maintain larger applications. There is no single mandatory folder structure for all React projects.

my-react-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── Button.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── Products.jsx
│   ├── hooks/
│   │   └── useProducts.js
│   ├── services/
│   │   └── productService.js
│   ├── context/
│   │   └── ThemeContext.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
└── vite.config.js

Explanation of Folders

12. Entry Point and Root Component

The entry point is the file where a React application starts executing in the browser. In a typical Vite project, this file is named main.jsx or main.tsx.

Example of main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Explanation

• StrictMode enables additional development checks for potential problems.
• createRoot() creates a React root for the browser DOM container.
• document.getElementById("root") locates the HTML element where the application is mounted.
• App is the root component rendered by React.
• index.css imports the application's global styles.

13. React Architecture vs Traditional Web Architecture

React is not a replacement for HTML, CSS, or JavaScript. It uses JavaScript and commonly uses JSX to build the interface, while HTML, CSS, and browser APIs remain important parts of web development.

14. Advantages of React Architecture

• Modularity: Divides large applications into manageable components.
• Reusability: Supports using the same components in multiple places.
• Maintainability: Clear responsibilities make code easier to update.
• Predictable data flow: Parent-to-child props make data relationships easier to follow.
• Flexible state management: Supports local state and several approaches to sharing data.
• Testing: Components can be tested independently or as part of broader application flows.
• Scalability: Clear boundaries help teams organize larger applications.
• Flexible ecosystem: Additional libraries can provide routing, API handling, and other features.

15. Challenges of React Architecture

• Learning curve: Beginners need to understand components, JSX, props, state, Hooks, and rendering.
• State complexity: Shared state can become difficult to organize in large applications.
• Prop drilling: Passing data through many intermediate components can make code harder to maintain.
• Tool selection: Developers must decide which routing, testing, and state-management tools suit their project.
• Performance problems: Poor component design or unnecessary work can slow down an application.
• Folder organization: A project can become difficult to navigate without consistent conventions.
• API error handling: Network failures, loading states, and stale data need deliberate handling.

16. Best Practices for React Architecture

• Keep components focused on clear responsibilities.
• Use meaningful and consistent component names.
• Keep reusable components separate from page-level components when useful.
• Pass data through props and use callbacks for child-to-parent communication.
• Keep state close to the components that need it.
• Use Context or external state management when the sharing requirements justify it.
• Avoid storing duplicate or easily derived data in state.
• Never mutate props or state directly.
• Separate API service logic when it improves readability and reuse.
• Handle loading, error, success, and empty states.
• Use stable keys when rendering lists.
• Write tests for important component behavior and user journeys.
• Use performance optimizations when they address a real need.
• Follow accessibility practices for semantic markup, forms, and interactive elements.

17. Practical Example: Simple React Architecture

The following example demonstrates how an application can separate its root component from a reusable product component.

ProductCard.jsx

function ProductCard({ name, price }) {
  return (
    <article>
      <h2>{name}</h2>
      <p>Price: ₹{price}</p>
    </article>
  );
}
export default ProductCard;

App.jsx

import ProductCard from "./ProductCard.jsx";

function App() {
  const products = [
    { id: 1, name: "Laptop", price: 50000 },
    { id: 2, name: "Keyboard", price: 1500 },
    { id: 3, name: "Mouse", price: 700 }
  ];

  return (
    <main>
      <h1>Product Store</h1>
      {products.map((product) => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
        />
      ))}
    </main>
  );
}
export default App;

How This Architecture Works

1. App is the parent component.
2. The products array contains the product data.
3. The map() method creates a ProductCard for each product.
4. Each ProductCard receives name and price through props.
5. The key prop helps React identify each product component in the list.
6. The components render the product information in the interface.

18. React Architecture Interview Questions and Answers

Q1. What is React Architecture?

React Architecture is the way a React application organizes components, data flow, state, rendering, and supporting tools.

Q2. What is the main building block of React Architecture?

Components are the main building blocks of a React user interface.

Q3. What is the purpose of props?

Props allow a parent component to pass data and configuration to a child component.

Q4. What is state management?

State management is the process of storing, updating, and sharing changing application data.

Q5. What is one-way data flow?

It is the common pattern in which data moves from parent components to child components through props.

Q6. What is the Virtual DOM?

Virtual DOM is a common term for React's internal UI representation used during rendering and reconciliation.

Q7. What is the role of main.jsx?

In a typical Vite React project, main.jsx initializes React and mounts the root component into a DOM element.

Q8. What is the purpose of React Router?

React Router helps manage routes and navigation in React applications.

Q9. Why is folder structure important?

A consistent folder structure makes components, services, pages, and supporting code easier to locate and maintain.

Q10. Does every React project need Redux?

No. Small projects can often use local state and props. Redux Toolkit or another external state-management tool may be useful when shared-state requirements become more complex.

19. Conclusion

React Architecture provides a structured approach to building interactive web applications. Components organize the UI, props pass data between components, state manages changing information, and React rendering updates the interface when necessary.

Supporting tools can add routing, API integration, shared-state management, testing, and other capabilities. Choosing a clear architecture and following React best practices helps developers create maintainable and scalable applications.

Explore React JS Training

To learn React concepts and practice building web applications, explore the following resources:

• JustAcademy React JS Training Course
• Register for React JS Course Demo
• Official React Guide: Thinking in React
• Official React Guide: Render and Commit
• Official React Guide: Managing State