Chapter 2: React Fundamentals

React is a component-driven, declarative JavaScript library for building dynamic, modern user interfaces. By modeling UIs as pure functions of state, React eliminates manual DOM mutations, enabling predictable data flow and rapid UI development.

---

🧭 Subtopics & Curriculum

Click anywhere on a card below to open that subtopic note, or use the Obsidian button to open it directly in the Obsidian app:

Declarative UI2.1

⚛️

2.1 JSX & Rendering Elements

• 1. What is JSX?
  • Behind the Scenes: The JSX Transform
• 2. Rules of Writing JSX
  • Rule 1: Return a Single Root Element
  • Rule 2: Close All Tags
  • Rule 3: camelCase Most Attributes
• 3. Embedding JavaScript Expressions with {}
• 4. Rendering Elements into the DOM
  • React.StrictMode
• 5. Summary Checklist

🔮 Open in Obsidian

Component Architecture2.2

🧱

2.2 Components & Props

• 1. Functional Components
• 2. What are Props?
  • Passing and Consuming Props
• 3. props.children: The Power of Composition
• 4. Props are Read-Only (Pure Functions)
• 5. Summary Checklist

🔮 Open in Obsidian

Component Memory2.3

💾

2.3 State Management with useState

• 1. Why Normal Variables Don't Work
• 2. The useState Hook
• 3. Automatic Batching & Asynchronous Updates
  • The Solution: Functional State Updates
• 4. State with Objects & Arrays
  • Updating an Object
  • Updating an Array
• 5. Summary Checklist

🔮 Open in Obsidian

User Interactivity2.4

🖱️

2.4 Handling Events in React

• 1. Syntax: Passing Function References
• 2. Passing Arguments to Event Handlers
• 3. The SyntheticEvent Object
• 4. Stopping Event Propagation
• 5. Summary Checklist

🔮 Open in Obsidian

Dynamic UI Flow2.5

🔀

2.5 Conditional Rendering

• 1. Early Return Pattern (Guard Clauses)
  • Returning null to Prevent Rendering
• 2. Inline Ternary Operator (condition ? true : false)
• 3. Logical AND Operator (condition && <Element />)
• 4. Multi-Branch Rendering (Lookup Objects)
• 5. Summary Checklist

🔮 Open in Obsidian

Collections & Diffing2.6

📋

2.6 Lists & Keys

• 1. Rendering Lists with map()
• 2. Why React Demands key
• 3. The Index as Key Anti-Pattern
  • Why Index as Key Breaks
• 4. Rules of Keys
• 5. Summary Checklist

🔮 Open in Obsidian

Form State2.7

📝

2.7 Forms & Controlled Components

• 1. Controlled vs Uncontrolled Components
• 2. The Controlled Input Pattern
• 3. Handling Multiple Inputs with a Single State Object
• 4. Uncontrolled Inputs with useRef
• 5. Summary Checklist

🔮 Open in Obsidian

Effects & Synchronization2.8

⚡

2.8 Component Lifecycle & useEffect

• 1. The Three Lifecycle Phases
• 2. What is a Side-Effect?
• 3. The Anatomy of useEffect
  • The 3 Rules of the Dependency Array:
• 4. The Cleanup Function
  • Why Cleanup Matters in React 18 & 19
• 5. Summary Checklist

🔮 Open in Obsidian

---

💡 Navigating Notes in Obsidian & Docusaurus

1. In the Docusaurus sidebar, Chapter 2: React Fundamentals is a collapsible dropdown containing all subtopics from 2.1 to 2.8.
2. In Obsidian, expand the 02-react-fundamentals folder inside react to browse and edit all notes in numerical order.
3. Use the top breadcrumb in any subtopic note to quickly return to this Chapter 2 overview.