Your first component

Write a component, put values into JSX with braces, and render the first card of the watchlist.

A component is a function

A component is a JavaScript function that returns markup. You use it by writing its name as a tag.

// A component: a function that returns markup.
function Title() {
  return <h1>The Bear</h1>;
}

export default function App() {
  // Use it by writing its name as a tag.
  return <Title />;
}

App is a component too. The sandbox renders App, and App renders Title.

Light up each part of the definition in turn, hover a use to find the card it draws, then switch on Lowercase the name.

function ShowCard({ show }) {  return (    <div>      {/* the still, with the genre on it */}      <div>        <span>{show.genre}</span>      </div>      <span>{show.title}</span>      <span>{show.year} ★ {show.rating}</span>      <button>+ Watchlist</button>    </div>  );}

<ShowCard show={theBear} /><ShowCard show={severance} /><ShowCard show={andor} />

The name is the part to remember. React reads a name that starts with a capital letter as your component, and a lowercase one as an HTML tag. There is no showcard tag, so nothing is drawn and no error is shown.

The figure also has a Props part: the data a component is given. Props are the next lesson, so the components here take none.

The markup is JSX

The markup a component returns is called JSX. It looks like HTML, but it is JavaScript, and a build step turns every tag into a function call.

Pick a part of the card to follow it across the three panels, then type a new title.

function ShowCard({ show }) {  return (    <div className="card">      <div        className="still"        style={{ backgroundImage: gradient }}      >        <span className="genre">          {show.genre}        </span>      </div>      <span className="title">        {show.title}      </span>      <span className="meta">        {show.year} · <Star />{show.rating}      </span>      <button className="action">        + Watchlist      </button>    </div>  );}

jsx("div", {  className: "card",  children: [    jsx("div", {      className: "still",      style: { backgroundImage: gradient },      children: jsx("span", {        className: "genre",        children: "Drama",      }),    }),    jsx("span", {      className: "title",      children: "The Bear",    }),    jsx("span", {      className: "meta",      children: [2022, " · ", jsx(Star, {}), 8.6],    }),    jsx("button", {      className: "action",      children: "+ Watchlist",    }),  ],})

You write the left panel, but the middle panel is what runs. Each call returns a plain object, and React draws the screen from those objects.

The strip at the bottom names the three ways JSX parts from HTML:

• className, not class, because class is already a word in JavaScript.
• style takes an object, not a string: style={{ color: "red" }}.
• Every tag closes. A tag with nothing inside closes itself, like <Title />.

One root element

A function returns one value, so a component returns one root element. Two elements side by side is an error.

Wrap them in one element, or in <> and </>. That pair is called a fragment, and it adds nothing to the page.

function Heading() {
  // A fragment groups the two lines without wrapping them in a box.
  return (
    <>
      <h1>The Bear</h1>
      <p>2022</p>
    </>
  );
}

export default function App() {
  return <Heading />;
}

Braces run JavaScript

Curly braces switch from markup back into JavaScript. What is inside them runs, and the answer goes on the screen.

import "./styles.css";

export default function App() {
  const title = "The Bear";
  const year = 2022;

  return (
    <div className="page">
      <p>{title}</p>
      <p>{year + 3}</p>
      <p>{title.toUpperCase()}</p>
      <p>title</p>
    </div>
  );
}

The first three lines run JavaScript: a variable, a sum, and a method call. The last line has no braces, so it is plain text and reads title.

Braces take an expression: something that produces a value. if and for produce no value, so they cannot go inside braces.

style={{ ... }} has two sets of braces for two reasons. The outer pair drops into JavaScript, and the inner pair makes the object.

The first card

Here is the watchlist's first screen. ShowCard is a component of your own, and App renders it.

import "./styles.css";
import ShowCard from "./ShowCard";

export default function App() {
  return (
    <div className="page">
      <ShowCard />
    </div>
  );
}

Every value is typed straight into the markup, so the card can only ever show The Bear. Props fix that in the next lesson.

Common mistakes

• A lowercase component name. React reads it as an HTML tag, so nothing is drawn and nothing is reported. Start every component name with a capital.
• class instead of className. class is a JavaScript keyword, so JSX uses className for the same job.
• A style string. style takes an object, so write style={{ padding: 16 }}, not style="padding: 16px".

Exercise

This is the same card, with one thing changed: the component's name. The page is blank, and no error appears.

Fix the name so the card comes back:

A soft grey page with one white card on it. The card has an orange
still with a Drama pill on it, the title The Bear, and 2022 · ★ 8.6
under it.

Hint: a name React reads as your component starts with a capital letter. Two lines have to change.

import "./styles.css";

function showcard() {
  return (
    <article className="card">
      <div className="still still-warm">
        <span className="pill">Drama</span>
      </div>
      <div className="body">
        <h2 className="title">The Bear</h2>
        <p className="meta">
          2022 · ★ 8.6
        </p>
      </div>
    </article>
  );
}

export default function App() {
  return (
    <div className="page">
      <showcard />
    </div>
  );
}