Components and props: building the notes list

What React does for you

React is a JavaScript library for building user interfaces (UI: what the user sees and taps). You describe what the screen should look like for the current data, and React updates the real page (the DOM) to match. You do not write code like "find this div and change its text" by hand.

You can start a React 19 app with Vite (a fast build tool: npm create vite@latest notes-web -- --template react) or inside Next.js, which adds routing and server features. The components you write look the same in both.

A component is a function that returns UI

A component is a JavaScript function whose name starts with a capital letter and which returns JSX. JSX is HTML-like syntax inside JavaScript. A build tool turns it into plain JavaScript calls before the browser runs it. Inside JSX, curly braces { } mean "run this JavaScript and show the result".

function NoteCard({ note, onDelete }) {
  return (
    <article className="note-card">
      <h3>{note.title}</h3>
      <p>{note.body}</p>
      <button type="button" onClick={() => onDelete(note.id)}>
        Delete
      </button>
    </article>
  );
}

Props: the inputs of a component

Props (short for properties) are the values a parent component passes to a child, written like HTML attributes: <NoteCard note={note} onDelete={removeNote} />. The child reads them from its first argument. Props are read-only: a child must never change them. If something must change, the parent passes a function (like onDelete) and the child calls it.

Composition: small pieces inside bigger ones

Composition means building a big component out of small ones. Our notes page is a tree: NotesPage contains a SearchBar and a NoteList; NoteList contains one NoteCard per note. Each piece is easy to read, test and reuse.

NotesPage
  SearchBar
  NoteList
    NoteCard (one per note)
  NewNoteButton

Rendering a list with map and key

To show many notes, call notes.map() and return one NoteCard per note. React also needs a key on each item: a value that is unique among the siblings and stays the same for that item over time. React uses the key to know which card is which when the list changes.

function NoteList({ notes, onDelete }) {
  if (notes.length === 0) return <p>No notes yet.</p>;
  return (
    <ul className="note-list">
      {notes.map((note) => (
        <li key={note.id}>
          <NoteCard note={note} onDelete={onDelete} />
        </li>
      ))}
    </ul>
  );
}

React escapes text for you

When you write {note.title}, React treats the value as plain text. If a user saves a title like <img src=x onerror=alert(1)>, React shows those characters on screen instead of running them. This protects you from XSS (cross-site scripting: an attacker getting their script to run in other users' browsers).