Day 1: JavaScript to your first component

Today has two halves. In the morning you learn the JavaScript that React code uses on nearly every line: arrow functions, destructuring, spread, map and filter, and modules. In the afternoon you put it to work: you learn what React is, how JSX works, and you write your first components.

Why start with JavaScript? Because most "React problems" beginners hit are really JavaScript problems in disguise. A component is a JavaScript function, and once the JavaScript feels familiar, React becomes much easier to follow. If you already know modern JavaScript well, try the challenge at the end of each JS lesson. If you solve it easily, move on.

Time planCopy Anchor Link

Plan for about five hours, including breaks.

What you'll build todayCopy Anchor Link

By the end of today, your Reading List app shows a heading and two book cards, built from a BookCard component that lives in its own file.

Both cards show the same book, because BookCard has its title and author written directly inside it. That is on purpose. Tomorrow you will learn props, which let each card show a different book.

Today's lessonsCopy Anchor Link

export function BookCard() {
  return (
    <article className="book-card">
      <h2>The Hobbit</h2>
      <p>by J.R.R. Tolkien</p>
    </article>
  );
}

import { BookCard } from './BookCard.jsx';

export default function App() {
  return (
    <>
      <h1>My Reading List</h1>
      <BookCard />
      <BookCard />
    </>
  );
}