React Basics
BeginnerThe fundamental building blocks every React developer must master
What is React?
React is a declarative, component-based JavaScript library for building user interfaces. It uses a Virtual DOM to perform minimal DOM updates, making UIs fast. Key principle: UI = f(state) — your UI is a pure function of your state.JSX — JavaScript XML
beginnerJSX is syntactic sugar for React.createElement(). It lets you write HTML-like syntax inside JavaScript. Babel transpiles it to regular JS.
Components & Props
beginnerComponents are the building blocks of React UIs. Props are read-only inputs passed from parent to child — think of them as function parameters.
State — useState
beginnerState is data that changes over time and causes re-renders when updated. useState returns a tuple: [currentValue, setter]. Never mutate state directly.
Event Handling
beginnerReact uses SyntheticEvents which wrap native browser events for cross-browser compatibility. Event handlers are camelCase and receive the event as an argument.
Forms — Controlled vs Uncontrolled
beginnerControlled components store form data in React state (recommended). Uncontrolled components use refs to access DOM values directly.
Lists, Keys & Fragments
beginnerUse .map() to render lists. The key prop helps React identify which items changed. Use Fragment (<></>) to avoid unnecessary wrapper divs.
Component Composition
intermediateBuild complex UIs by composing simple components. Prefer composition over inheritance. The children prop, render props, and slot patterns enable powerful composition.