What React Actually Is

React is not a full framework - it is a library focused on one job: keeping the UI in sync with your application's state. You describe what the UI should look like for a given state, and React figures out how to update the real DOM to match, rather than you manually querying and mutating elements yourself.

This declarative style is the core shift from plain DOM manipulation: instead of writing step-by-step instructions for how to change the page, you write a function of your data that returns what the page should look like.

JSX Is Syntax Sugar for JavaScript

JSX looks like HTML embedded in JavaScript, but it is not a separate templating language - a build tool (Babel or a bundler plugin) compiles each JSX tag into a `React.createElement(type, props, children)` call. `<h1>Hello</h1>` becomes `React.createElement("h1", null, "Hello")`, which returns a plain JavaScript object describing that element.

Because JSX compiles to function calls, you can drop into `{ }` anywhere inside it to embed any valid JavaScript expression - a variable, a function call, a ternary - but not statements like `if` or `for`, since those are not expressions.

function Greeting() {
  const name = 'React';
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 12 }}>
      <h1>Hello, {name}!</h1>
      <p>2 + 2 = {2 + 2}</p>
    </div>
  );
}

render(<Greeting />);

Components Are Just Functions

A React component is a JavaScript function whose name starts with a capital letter and that returns JSX (or, more precisely, React elements). React calls your function, gets back a description of the UI, and turns that into real DOM nodes. Lower-case tags like `<div>` refer to built-in HTML elements; capitalized tags like `<Greeting />` refer to your own components.

One Root Element per Return

JSX requires a single enclosing element per return statement. If you have sibling elements with no natural wrapper, you can use a Fragment (`<>...</>`) instead of adding an extra `<div>` that has no styling purpose.

function Info() {
  return (
    <>
      <h2>Title</h2>
      <p>Some description text.</p>
    </>
  );
}

render(<Info />);

Why React Exists

Before React (and similar libraries), keeping the DOM in sync with changing data meant a lot of manual bookkeeping - tracking which parts of the page needed updating and writing imperative code to update just those parts. React lets you instead write your UI as a function of state, and it handles the diffing and updating for you, which scales far better as an application grows.