React.

The Virtual DOM is an in-memory JavaScript representation of the Document Object Model (DOM), which React syncs with the real DOM.

When state changes, React takes four steps:

1. React builds a new virtual DOM tree.
2. React compares, or diffs, it with the previous tree.
3. React works out the changes the real DOM needs.
4. React applies only those changes to the real DOM.

This process is called reconciliation. The benefit is declarative code. You describe the UI, and React makes only the DOM writes it needs.

JSX, short for JavaScript XML, is a syntax extension that lets you write HTML-like markup inside JavaScript. It makes components easier to read and write, and lets you mix JavaScript expressions into markup. JSX also gives better error messages and enables static type checking.

A compiler such as Babel turns JSX into function calls. The classic transform produces React.createElement() calls.

// JSX
const element = <h1>Hello, World!</h1>;

// Transpiled to
const element = React.createElement('h1', null, 'Hello, World!');

The new JSX transform, supported since React 17, calls react/jsx-runtime instead, so you can use JSX without importing React. React 19 requires it.

A React element is a plain object describing what should appear on screen, while a React component is a function or class that returns elements. Elements are the smallest building blocks of a React app, and components are the reusable pieces that produce them.

const element = <h1>Hello, World!</h1>;

JSX like this creates an element. React never changes an element after it's created, so to show something different, React calls your components again and gets new elements.

// Function component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

A component accepts inputs called props and can be reused anywhere. You write <Welcome name="Sara" /> to use it, and React calls Welcome with those props to get the element to render.

The main difference is how they handle state and lifecycle logic. A function component is a plain function that uses Hooks such as useState. A class component extends React.Component and uses this.state and lifecycle methods. Function components are the preferred approach in modern React, and classes are a legacy approach React still supports.

Function components have simpler syntax and are easier to test and debug. They skip some class overhead, like creating instances and binding handlers, but raw performance is about the same.

function MyComponent(props) {
  const [count, setCount] = useState(0);
  
  return <div>{count}</div>;
}

Class components are more verbose and return JSX from render(). They use lifecycle methods such as componentDidMount and have access to the this context.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return <div>{this.state.count}</div>;
  }
}

Error boundaries still require a class, because there is no way to write one as a function component.

Write a JavaScript function that returns JSX, and give it a name that starts with a capital letter. React calls it with a props object, and you use it in JSX like an HTML tag, such as <Welcome name="Sara" />.

There are two main ways to write one:

1. A function component, the recommended way. You can declare it with the function keyword or as an arrow function.
2. A class component, which extends React.Component and returns JSX from render(). It's the older style, and React still supports it.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Or using arrow function
const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

JSX needs a single parent element, camelCase attributes and closed tags, because it compiles to JavaScript rather than HTML. The key rules:

1. A component must return a single parent element, or wrap its siblings in a React Fragment.
2. Attributes use camelCase, so class becomes className and onclick becomes onClick.
3. Every tag must close, and self-closing tags end with />.
4. Curly braces embed JavaScript expressions, such as {variable} or {expression}.
5. A boolean attribute can be written as disabled={true} or just disabled.

// Correct JSX
function MyComponent() {
  return (
    <div className="container">
      <img src="image.jpg" alt="Description" />
      <p>Count: {count}</p>
    </div>
  );
}

React Fragment lets you group multiple elements without adding an extra node to the DOM. It's useful when you need to return multiple elements from a component but don't want to wrap them in a div.

// Using React.Fragment
function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
  );
}

// Using short syntax
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

Use plain JavaScript to choose what to render. There are three common patterns.

1. A ternary, condition ? <A /> : <B />, picks between two elements.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
}

1. Logical AND, condition && <A />, renders an element or nothing.

function Notification({ hasMessages }) {
  return (
    <div>
      {hasMessages && <p>You have new messages!</p>}
    </div>
  );
}

1. An if and else statement with early returns handles bigger branches.

function UserStatus({ user }) {
  if (user.isAdmin) {
    return <AdminPanel />;
  } else if (user.isLoggedIn) {
    return <UserPanel />;
  } else {
    return <LoginForm />;
  }
}

Keep the left side of && a boolean. If it's the number 0, React renders 0 instead of nothing.

Call map() on the array and return a JSX element for each item. Give each element a key prop that is unique among its siblings.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

The key tells React which item each element belongs to. When the list changes, React uses the keys to see which items were added, removed or changed. It then updates only those and keeps each item's state, which improves performance during re-renders.

Use a stable ID from your data as the key. An array index breaks when items are inserted, removed or reordered, and a random key makes React recreate every item on each render.

Props, short for properties, are read-only inputs that a parent component passes to a child component. They let data flow down the component tree.

// Parent component
function App() {
  return <Welcome name="John" age={25} />;
}

// Child component
function Welcome(props) {
  return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}

A child treats its props as immutable. It reads them to decide what to render and never changes them. A prop can be any JavaScript value, such as a string, a number or an object. Function props work too, which is how a child tells its parent that something happened.

State is data React keeps for a component, and it can change over the component's lifetime. When state changes, React re-renders the component.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

State is local to its component, and each copy of the component gets its own. It is mutable in the sense that it changes over time, but you never modify it directly. You call the setter, like setCount, and React re-renders with the new value.

Props are inputs a component receives from its parent, and state is data a component owns and changes itself. Props flow down and are read-only, while state is the component's own memory.

A component can't change its own props. When the parent passes new props, the component re-renders with them. State changes through the component's setter, like setCount, and each change also triggers a re-render. The two often meet, because a parent's state becomes a child's props.

Pass a function as a camelCase prop on the element, like onClick={handleClick}. React calls it with an event object when the event fires, such as a click or a key press.

function Button() {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Button clicked!');
    console.log('Event type:', event.type);
  };
  
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Pass the function itself, not a call. onClick={handleClick()} would run the handler during rendering instead of on click.

The event object is a SyntheticEvent, React's wrapper around the native browser event. It behaves the same across browsers and has the usual methods and properties, such as preventDefault() and type.

Call preventDefault() on the event object that React passes to your handler. The usual case is a form, where it stops the browser from submitting and reloading the page, so your code can handle the data instead.

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Prevents form from submitting
    console.log('Form submitted');
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

Returning false from the handler doesn't work in React the way it does in plain HTML. You must call preventDefault() explicitly. To stop the event from bubbling up to parent elements, call stopPropagation(), which is a different thing.

Wrap the handler in an arrow function inside the JSX, and call your handler with the values you need. React calls the arrow on click, and the arrow calls your handler with the item's ID.

There are two common ways to do it:

1. An arrow function, like onClick={() => handleClick(item.id)}, puts the call and its arguments right in the JSX.
2. The function's bind method pre-fills the arguments, as in handleClick.bind(null, item.id). React passes the event after them.

function ItemList({ items }) {
  const handleClick = (id) => {
    console.log('Clicked item:', id);
  };
  
  return (
    <div>
      {items.map(item => (
        <button key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </button>
      ))}
    </div>
  );
}

To use the event as well, pass it along with (e) => handleClick(item.id, e). Both ways create a new function on every render. That only matters when the handler goes to a memoized child.