Introduction to React and JSX

React is a JavaScript library for building user interfaces out of small, reusable components. Instead of manually updating the page, you describe what the UI should look like for a given state, and React handles the updates.

Your first component

A component is just a JavaScript function that returns JSX, an HTML-like syntax that compiles down to regular JavaScript.

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

JSX needs a React app (and a build step) to render, so it's read-only here, every example in this course uses this style, you'll run real components in the final project.

Embedding JavaScript in JSX

Curly braces { } let you drop any JavaScript expression into your markup:

function Greeting() {
  const name = 'Ada';
  return <h1>Hello, {name}!</h1>;
}

One rule to remember

A component must return a single root element. To return multiple sibling elements without adding an extra <div>, wrap them in a Fragment: <>...</>.