Scribd
Upload
2 views4 pages

JavaScript DOM and React Vite Notes

This document provides comprehensive notes on JavaScript DOM essentials and React development using Vite. It covers key concepts such as DOM selection and manipulation, event handling, React fundamentals, state management, and important hooks, along with common interview topics and a quick setup guide for React with Vite. Additionally, it lists commonly used packages in React development.

Uploaded by

Defence Gaming
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views4 pages

JavaScript DOM and React Vite Notes

This document provides comprehensive notes on JavaScript DOM essentials and React development using Vite. It covers key concepts such as DOM selection and manipulation, event handling, React fundamentals, state management, and important hooks, along with common interview topics and a quick setup guide for React with Vite. Additionally, it lists commonly used packages in React development.

Uploaded by

Defence Gaming
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript DOM + React (Vite) Interview &

Development Notes

JavaScript DOM Essentials


DOM Selection
[Link](), querySelector(), querySelectorAll(), getElementsByClassName()

DOM Manipulation
innerHTML, textContent, innerText, setAttribute(), removeAttribute(), [Link]/remove/toggle,
appendChild(), remove(), createElement().

Event Listeners
addEventListener(), removeEventListener().

Most Used Events


click, submit, change, input, keydown, keyup, focus, blur, mouseover, mouseout, load, scroll,
resize.

Event Object
[Link], [Link], preventDefault(), stopPropagation().

Event Delegation
Attach one listener to parent and handle child events using [Link].

DOM Traversing
parentElement, children, firstElementChild, lastElementChild, nextElementSibling,
previousElementSibling, closest().

React Fundamentals
React builds UI using reusable components.
Vite is a fast build tool commonly used with React.

Project Structure:
src/, components/, pages/, hooks/, assets/, [Link], [Link]

JSX
JSX allows writing HTML-like syntax inside JavaScript.
Expressions use { }.
Lists use map().
Conditional rendering uses ternary operators or &&.

Props
Props pass data from parent to child.
Props are read-only.
Destructuring is commonly used.
Example: function Card({title}) {}
State Management
useState() manages component state.
State updates trigger re-renders.
Never mutate state directly.
Use spread operators for objects and arrays.

useEffect
Runs side effects such as API calls, subscriptions, timers.
Dependency Array:
[] = run once
[value] = run when value changes
no array = run every render
Cleanup function prevents memory leaks.

React Event Handlers


onClick, onChange, onSubmit, onInput, onKeyDown, onKeyUp, onFocus, onBlur, onMouseEnter,
onMouseLeave.
Use camelCase naming.

Forms
Controlled Components use state.
value + onChange pattern.
Prevent page refresh using [Link]().

API Calls
fetch() and async/await are most common.
Usually called inside useEffect().
Handle loading and error states.

React Router
Install react-router-dom.
BrowserRouter, Routes, Route, Link, NavLink, useNavigate, useParams, Outlet.
Protected routes are common in production apps.

Important React Hooks


useState, useEffect, useRef, useContext, useMemo, useCallback, custom hooks.

Context API
Used for global state management.
CreateContext(), Provider, useContext().
Performance Optimization
[Link]()
useMemo()
useCallback()
Lazy Loading
Code Splitting

Common Interview Topics


Virtual DOM
Reconciliation
Controlled vs Uncontrolled Components
Props vs State
useEffect Lifecycle
Event Bubbling
Closures
Hoisting
Debounce vs Throttle
React + Vite Quick Setup
1. npm create vite@latest
2. Select React
3. npm install
4. npm run dev

Most Used Packages:


react-router-dom
axios
react-icons
react-hook-form
zustand
@tanstack/react-query

You might also like