1. Components & JSX JSX is syntax sugar for React.createElement. Components are functions that return JSX. 2. useState Manages state within a functional component. 3. useReducer Manages complex state through a reducer function. 4. useEffect Handles side effects after render. 5. useLayoutEffect Runs synchronously before the browser paints. 6. useRef Holds a mutable value or…

React is not a web framework. It is a reconciler: an algorithm that diffs a component tree and produces a stream of mutations. The react-dom package is one host of that algorithm, rendering to the browser’s DOM. React Native is another, rendering to native mobile views. A custom renderer is a third, and the react-reconciler…

Every React build is a sequence of AST transformations. JSX becomes React.createElement or jsx() calls, TypeScript types are stripped, and the React Compiler inserts memoization. The tools that perform these transformations—Babel and SWC—expose plugin APIs that let developers add their own passes to the pipeline. A custom plugin can inject instrumentation, rewrite imports, enforce architectural…

A micro-frontend is an architectural pattern where a large application is composed from independently developed, independently deployed frontend fragments. Web Components are a browser-native mechanism for encapsulating markup, styles, and behavior into a custom element. The combination is appealing because it promises framework-agnostic composition: a React shell can host a Vue micro-frontend, or a legacy…

The Web Audio API is a graph-based audio processing system built into the browser. It is not a replacement for the <audio> element; it is a complement to it, the way <canvas> complements <img>. When the requirement is playing a track, the media element is simpler. When the requirement is processing, synthesizing, analyzing, or routing…

react-konva is a React renderer for Konva, the 2D canvas scene graph library. The relationship is the same as React DOM and the browser DOM: you write components like <Rect> and <Circle>, the reconciler creates the corresponding Konva nodes, and Konva draws them onto a single <canvas> element . The library’s value is not that…

React does not have a native canvas element. The <canvas> tag is a DOM element, and the drawing context is an imperative API that sits outside React’s declarative model. Interactivity—detecting a click on a shape, hovering over a pixel, dragging a node—requires translating DOM events into coordinates that the canvas understands, and then deciding whether…

React Three Fiber is a React renderer for three.js, not a wrapper library. It does not add an abstraction layer between React and the 3D scene; it replaces the DOM as the rendering target. The component tree you write is the scene graph, and mounting a <mesh> creates a THREE.Mesh that is added to the…

React’s component model is not bound to the browser. The same reconciliation engine that renders to the DOM in a web application can render to a Chromium window embedded in a desktop process, or to the operating system’s native webview. The two dominant frameworks that make this possible are Electron and Tauri, and they represent…

React Native applications are rarely a single screen, and they frequently need capabilities that JavaScript cannot provide. Navigation is the framework’s answer to the first problem: a navigator manages the presentation and transition between screens. Native modules are the answer to the second: a bridge that exposes platform APIs—camera, Bluetooth, secure storage—to JavaScript. Both are…