React Quick Start Notes: A Beginner-Friendly Tutorial

This tutorial turns the React "Quick Start" material into a compact reference for JavaScript learners who want a beginner-friendly path.

1) Components and JSX

A component is a JavaScript function that returns JSX. JSX is a syntax extension that looks like HTML but compiles to JavaScript.

function Hello({ name }) {
  return <h1>Hello, {name}</h1>
}

Props are inputs to components. They flow from parent to child.

function Avatar({ src, alt }) {
  return <img src={src} alt={alt} />
}

State is component-local data that changes over time.

function Counter() {
  const [count, setCount] = React.useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Use map to render lists and provide stable keys.

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  )
}

Render different UI based on conditions.

function Status({ online }) {
  return <span>{online ? "Online" : "Offline"}</span>
}