react

JSX is a syntax extension that allows writing HTML-like code in JavaScript. React uses it because it provides a familiar, readable way to describe UI structure while leveraging JavaScript's full power for logic and expressions.

Functional components are JavaScript functions that return JSX and use hooks for state/lifecycle. Class components extend React.Component and use this.state and lifecycle methods. Functional components with hooks are now the recommended approach.

Props (properties) are read-only inputs passed from parent to child components, similar to function arguments. They enable component reusability and one-way data flow from parent to child.

State is internal, mutable data managed within a component that triggers re-renders when changed. Props are external, read-only inputs passed from parent components. State is for data that changes over time; props are for configuring components.

Keys help React identify which items in a list have changed, been added, or removed. They should be unique among siblings and stable across renders. Using proper keys improves performance and prevents bugs with component state.

React is a flexible UI library (not a full framework) with automatic optimization via React Compiler, massive ecosystem (React Native, Next.js), largest job market, and one-way data binding that makes debugging easier. Its component-based architecture, Server Components, and JSX syntax offer a JavaScript-first approach.

Unidirectional data flow means data moves one direction only: parent → child via props. Children cannot modify parent state directly; they must use callback functions. This makes state changes predictable and debugging easier.

The Virtual DOM is a lightweight JavaScript object representation of the real DOM. When state changes, React creates a new virtual DOM tree, diffs it against the previous one, and applies only the minimal necessary changes to the actual DOM.