ReactJS

Created at: September 19, 2026 at 05:14 PM

# React JS: Short Notes **What it is** A JavaScript library (by Meta) for building user interfaces, especially single-page apps. It's component-based and declarative. **Core Concepts** - **Components:** Reusable, independent UI pieces. Today these are mostly function components. - **JSX:** HTML-like syntax inside JavaScript, compiled to `React.createElement()` calls. - **Virtual DOM:** A lightweight copy of the real DOM. React compares changes (diffing) and updates only what's needed, which makes rendering efficient. - **Props:** Read-only data passed from parent to child. - **State:** Data managed inside a component; changing it triggers a re-render. - **One-way data flow:** Data moves top-down from parent to child. **Key Hooks** | Hook | Purpose | |---|---| | `useState` | Store and update local state | | `useEffect` | Side effects (API calls, subscriptions, timers) | | `useContext` | Access shared data without prop drilling | | `useRef` | Reference DOM elements or persist values without re-rendering | | `useMemo` / `useCallback` | Performance optimization via memoization | | `useReducer` | Complex state logic | **Basic Example** ```jsx import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ); } ``` **Other Important Points** - **Lists:** Render with `.map()` and give each item a unique `key`. - **Conditional rendering:** Use `&&`, ternary (`? :`), or early returns. - **Controlled components:** Form inputs whose value is driven by state. - **Lifting state up:** Move shared state to the nearest common parent. - **React Router:** Handles client-side routing. - **State management:** Context API, Redux, Zustand for larger apps. **Advantages** Reusable components, fast rendering, large ecosystem, strong community, and React Native for mobile apps. **Getting Started** ```bash npm create vite@latest my-app -- --template react ``` Let me know if you'd like deeper notes on any topic, like hooks, routing, or state management.