React Framework

React is a JavaScript library developed by Facebook for building user interfaces. It uses a component-based architecture and a virtual DOM for efficient rendering of dynamic, interactive web applications.

JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside JavaScript. JSX is transpiled to React.createElement() calls by tools like Babel before running in the browser.

The Virtual DOM is a lightweight in-memory 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 set of changes to the real DOM — a process called reconciliation.

A functional component is a plain JavaScript function that accepts props as an argument and returns JSX. Example:
function Greeting({ name }) { return <h1>Hello, {name}</h1>; }

A class component is an ES6 class that extends React.Component and must implement a render() method. It can hold local state and use lifecycle methods:
class App extends React.Component { render() { return <h1>Hello</h1>; } }

Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow data to flow top-down (unidirectional) through the component tree and cannot be modified by the receiving component.

State is a mutable data object managed within a component that determines how the component renders and behaves. When state changes, React re-renders the component. In functional components, state is managed with the useState hook.

useState returns an array with two elements: the current state value and a setter function.
const [count, setCount] = useState(0);
Calling setCount(count + 1) schedules a re-render with the updated value.

useEffect lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation). It runs after render.
useEffect(() => { /* effect */ return () => { /* cleanup */ }; }, [dependencies]);

The dependency array controls when the effect runs:[] — runs only on mount[a, b] — runs when a or b changeNo array — runs after every render

useContext lets a component consume a value from a React context without wrapping it in a Context.Consumer.
const value = useContext(MyContext);
The component re-renders whenever the context value changes.

useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer.