React Syllabus | Learn Computer Academy

React JS Documentation with Vanilla JS Comparison

React is a JavaScript library for building user interfaces.

React is used to build single-page applications.

React allows us to create reusable UI components.

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

React JS Documentation with Vanilla JS Comparison

React is a JavaScript library for building user interfaces.

React is used to build single-page applications.

React allows us to create reusable UI components.

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