Introduction to React

React is a JavaScript library for building user interfaces, created by Meta. It lets you build complex UIs from small, isolated pieces of code called components.

The core idea: describe what the UI should look like for a given state, and React efficiently updates the DOM to match when that state changes — you don't manipulate the DOM by hand.

function Welcome() {
  return <h1>Hello, React!</h1>;
}

Why React?

• Component-based — build encapsulated, reusable pieces and compose them.
• Declarative — describe the UI for each state; React handles the DOM updates.
• Virtual DOM — React computes the minimal set of real DOM changes for fast updates.
• Huge ecosystem — Next.js, React Native, and thousands of libraries.

A first component

Components are just functions that return JSX (HTML-like markup). Their names must start with a capital letter.

function Greeting() {
  const name = "Priya";
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

The {name} syntax embeds a JavaScript value into the markup. Anything inside {} is evaluated as a JavaScript expression.