React JS Documentation with Vanilla JS Comparison

---

Chapter 1: Introduction to React vs. Vanilla JS

• What is React?
• Why use React over Vanilla JS?
• Real-world analogy: UI building with vs. without a toolkit
• Example:
  • Vanilla JS: Creating a dynamic button and appending to DOM
  • React: JSX-based component rendering the same button

Chapter 2: Getting Started

• Setting up a simple HTML/JS project
• Setting up React (via CDN or Create React App)
• Comparison Table of Tooling & Folder Structure

Chapter 3: Creating Your First Component

• Vanilla JS: Function to create and return a DOM element
• React: Functional Component with JSX
• Props vs. Function Parameters
• Example:
  • UserCard component in both approaches

Chapter 4: JSX vs. DOM Manipulation

• What is JSX?
• JSX syntax vs. document.createElement
• Inline styles and className difference
• Example:
  • Styled button with dynamic text

Chapter 5: State Management

• Why state is needed
• Vanilla JS: Using variables and manual DOM update
• React: useState Hook
• Example:
  • Counter app (Vanilla vs. React)

Chapter 6: Event Handling

• Attaching events in Vanilla JS (addEventListener)
• React’s event system (onClick, onChange)
• Synthetic events
• Example:
  • Input field capturing value on change

Chapter 7: Conditional Rendering

• if blocks, ternary, and logical && in Vanilla JS
• React’s conditional rendering with JSX
• Example:
  • Toggle visibility of content

Chapter 8: Lists and Keys

• Looping through arrays in JS (forEach, map)
• map() in JSX and the importance of key
• Example:
  • Display a list of products

Chapter 9: Forms and Inputs

• Handling inputs and forms in Vanilla JS (manual value read)
• Controlled components in React
• Example:
  • Login form with validation

Chapter 10: Component Composition

• Nesting and modularizing in Vanilla JS vs. React
• Reusability of components
• Example:
  • Layout with Header, Sidebar, and Footer

Chapter 11: Lifecycle vs. useEffect

• Vanilla JS lifecycle: DOMContentLoaded, custom watchers
• React Hooks: useEffect for side effects
• Cleanup logic
• Example:
  • API call on mount

Chapter 12: Props Drilling vs. Lifting State

• Passing data in function calls (Vanilla)
• React: Passing props and lifting state up
• Example:
  • Child updating parent state

Chapter 13: Conditional Class & Styles

• Vanilla: element.classList.add/remove
• React: Conditional className
• Example:
  • Button that toggles active/inactive

Chapter 14: Routing

• Manual route handling in Vanilla JS (hashchange)
• React Router basics
• Example:
  • Two-page app with navigation links

Chapter 15: Project: Todo App

• Full comparison of Vanilla JS vs. React implementation
• Folder structure
• Features: Add, delete, mark complete

Chapter 16: Next Steps

• React Context API vs. global state in Vanilla JS
• Integration with APIs (Fetch, Axios)
• Testing
• Deploying the app