React Basics

React = component-based UI library with virtual DOM

---

What is React?

"UI library, not a framework"

React is a JavaScript library for building user interfaces:

• Component-based architecture
• Declarative programming
• Virtual DOM for performance
• Unidirectional data flow

"React is a JavaScript library for building user interfaces using a component-based, declarative approach with a virtual DOM."

---

Core Concepts

Components · Props · State · Virtual DOM

Concept	Purpose
Components	Reusable UI pieces
Props	Data passed to components
State	Component's internal data
Virtual DOM	JavaScript representation of DOM

---

JSX

JavaScript + XML syntax

JSX is a syntax extension that lets you write HTML-like code in JavaScript.

const element = <h1>Hello, {name}!</h1>;

"JSX is syntactic sugar that gets transpiled to React.createElement calls."

---

Components

Function vs Class components

// Function component (modern)
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Arrow function
const Welcome = (props) => <h1>Hello, {props.name}</h1>;

"Function components are preferred in modern React for their simplicity and hooks support."

---

Props

Props flow down, read-only

• Props are passed from parent to child
• Props are immutable
• Use props for configuration

"Props are read-only data passed from parent components to child components."

---

State

State = component's memory

• State is mutable
• State changes trigger re-renders
• Use useState hook in function components

"State represents a component's internal data that can change over time and trigger re-renders."

---

Virtual DOM

Virtual DOM = performance optimization

• React creates a virtual representation of the DOM
• Changes compared (diffing)
• Only changed parts updated in real DOM
• Reduces expensive DOM operations

"The virtual DOM allows React to efficiently update only the parts of the UI that changed."

---

Unidirectional Data Flow

Data flows down, events flow up

• Props flow from parent to child
• Events bubble up from child to parent
• State lifted to common ancestor when needed

"React uses unidirectional data flow where data flows down via props and events flow up via callbacks."

---

9️⃣ React Hooks

Hooks = function component superpowers

Common hooks:

• useState - manage state
• useEffect - side effects
• useContext - context API
• useMemo - memoization
• useCallback - memoized callbacks

"Hooks allow function components to use state and lifecycle features previously only available in class components."

---

Component Lifecycle

Mount → Update → Unmount

• Mount: Component added to DOM
• Update: Props/state change
• Unmount: Component removed

"Components go through mounting, updating, and unmounting phases during their lifecycle."

---

"React is a component-based UI library that uses JSX for declarative UI, a virtual DOM for performance, and unidirectional data flow. Components receive data via props and manage internal state. Modern React uses function components with hooks for state management and side effects, replacing class components."

---

🧠 Ultra-Short Cheat Sheet

Component-based
JSX syntax
Props (down) + Events (up)
State management
Virtual DOM
Hooks (useState, useEffect)
Unidirectional flow
Function components preferred