React Architecture & Core Concepts

Understanding React architecture is crucial for building scalable and efficient web applications. React follows a component-based architecture and uses concepts like Virtual DOM, JSX, and state management to simplify development.

1. Component-Based Architecture

React applications are made up of components, which are reusable building blocks of the UI.

Functional Components: Simple functions that return JSX.
Class Components: ES6 classes that can hold state and lifecycle methods (less common in modern React).
Props: Components can receive data via props (short for properties), making them dynamic.

Example: A button or a navigation bar can be a separate component and reused anywhere in the app.

2. JSX – JavaScript XML

JSX allows you to write HTML-like code inside JavaScript.

Makes UI code easy to read and write.
Combines logic and markup in one place.

Example:

function Greeting() {
  return <h1>Hello, Welcome to React!</h1>;
}

3. Virtual DOM

The Virtual DOM is a lightweight copy of the real DOM.

React updates only the parts of the UI that change, instead of reloading the whole page.
This improves performance and provides a smooth user experience.

4. State & Lifecycle

State: Represents dynamic data in a component. When state changes, React automatically re-renders the component.
Lifecycle Methods / Hooks: Allow developers to run code at different points in a component’s life (e.g., useEffect for side effects in functional components).

Example:

import { useState } from 'react';

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

5. One-Way Data Binding

React follows unidirectional data flow, meaning data flows from parent to child components through props.

Makes apps predictable and easier to debug.
Any changes in a child component cannot directly affect the parent.

6. React Hooks

Hooks are functions that let you use state and other React features without writing class components.

useState → Manages state
useEffect → Handles side effects (API calls, subscriptions)
useContext → Manages global state