01_React.JS - Maniconserve/React-Wiki GitHub Wiki

  • Java Script Library(Free and OpenSource)
  • Create Single Page Applications
  • Can create Mobile & Web applications

Component-Based Architecture

Component-Based Architecture is a software design approach where the user interface (UI) is built using independent, reusable building blocks called components.

What is a Component?

A component is a self-contained unit that includes:

  • Structure (HTML / UI)
  • Behavior (JavaScript / logic)
  • Styling (CSS)

Each component is designed to perform a specific function and can be reused across the application.

Key Characteristics

  • Reusability Components can be used multiple times in different parts of the application.

  • Encapsulation Each component manages its own logic and UI, reducing dependencies on other parts.

  • Maintainability Changes in one component do not affect others, making the code easier to manage.

  • Scalability Applications can grow easily by adding new components without affecting existing ones.

How It Works

In a component-based architecture:

  • The entire application is divided into small components.
  • Components can be nested inside other components.
  • Data flows between components using inputs (props) and outputs (events).

Example

Instead of building a full page as one large block, you divide it like this:

  • Navbar Component
  • Sidebar Component
  • Product Card Component
  • Footer Component

Each of these components can be reused and managed independently.

Virtual DOM for Rendering

The Virtual DOM is a lightweight copy of the real DOM (the actual UI in the browser).

How it works (Simple)

  • When something changes in the app, it first updates the Virtual DOM, not the real DOM.
  • Then it compares the new Virtual DOM with the previous one.
  • It finds only the differences.
  • Finally, it updates only those parts in the real DOM.

Why it is useful

  • Faster updates
  • Better performance
  • Avoids unnecessary re-rendering

Example

If you change just one button text:

  • Traditional DOM → may reload the whole section
  • Virtual DOM → updates only that button

Summary

Virtual DOM improves performance by updating only what is necessary instead of reloading the entire UI.