React: your first component and how it all works

Why this exists

While a page is simple, plain JavaScript suffices: find an element, change its contents. Problems begin when state gets complex: a list here, a counter there, a form over there, all interdependent.

Keeping data and what the person sees in sync by hand becomes painful. "Changed the data, forgot to update the screen" is the commonest bug in such code.

Libraries like React take a different approach: you describe what the interface should look like for a given state, and the library handles updating. Change the data and the interface redraws.

What a component is

A function that returns markup. That's all.

function Greeting() {
  return <h1>Hello</h1>;
}

That function is already a complete component. Interfaces are built from components like bricks: small ones assemble into large ones.

One rule: a component's name starts with a capital letter. Otherwise it won't be recognised as a component.

Markup inside code

Syntax resembling markup written directly in JavaScript is disorienting at first. It's neither a string nor markup — it's notation that compiles into function calls.

A few differences from ordinary markup that everyone stumbles on:

• The class attribute is named differently, because "class" is taken by the language.
• Attributes use camel case: not "onclick" but "onClick".
• You can return only one root element. Need several? Wrap them in an empty container.
• Values are interpolated in braces.

Passing data

A component can be given data, much like markup attributes:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

<Greeting name="Anna" />

A component cannot change the data it receives. That's fundamental: data flows downward, and each component is responsible only for its own part.

Lists

A frequent task is rendering a list:

function NoteList(props) {
  return (
    <ul>
      {props.notes.map((note) => (
        <li key={note.id}>{note.title}</li>
      ))}
    </ul>
  );
}

Note the key: the library needs it to know which element is which when the list updates. A missing key is the commonest beginner's error, and the console warns about it directly.

Using an array index as a key is a poor idea: inserting in the middle shifts everything.

How this differs from plain markup

The way you think changes. You stop thinking "find the element and change it" and start thinking "in this state, the interface looks like this".

Markup lives next to logic. Unfamiliar at first for anyone used to keeping them apart, but in practice convenient: everything relating to one piece of interface sits together.

What to learn next

State — the whole point of the exercise. Without it, components are just templates. It gets an article of its own.

And an important warning: don't take on a framework before you know the language. Otherwise you can't tell where the language ends and the library begins, and any non-standard task leaves you stuck.