Skip to content
wannacode

The first component

In short: A React component is a function that returns JSX: it describes how the screen looks for the data, and React changes only the difference on the page.

Problem

The field loses focus

The module "JavaScript in the page" ended with a cart drawn from the data by one render(). Here every change of the quantity field calls render(). The buyer wants 15 bottles of milk: they click into the field, delete 2 and type 15. Try it.

HTML, CSS, JS

After the delete the field is empty and no longer focused: 1 and 5 go nowhere. render() replaced the field with a new one on the very first key. The new field looks the same, but it is a different element, and the focus was on the old one. Touching separate places by hand forgets places. Drawing everything again loses the focus. There is a third way.

The idea

The interface as a function of the data

render() had a good idea: the screen is built only from the data. With the same data the screen is the same, whatever was on it before. The mistake was in the last step: render() removes and creates the elements itself.

So the work is split in two:

  • You write a function that says how the screen looks for these data. It does not touch the page; it returns a description: here is a <main>, in it an <h1> with the text "The cart", then a field with the value 2.
  • The library holds the real DOM. The first time it builds it from the description. On every change of the data it takes the new description, compares it with the old one and changes only the difference on the page.

Such a function is called a component. In short: the screen is a function of the data, and the component is that function. React and Vue do this in different ways. The idea is the same, and choosing between them is a matter of the team, not of a "better" library.

See it

The first component

In React a component is a function that returns JSX: notation that looks like HTML but lives in JavaScript.

const product = { name: 'Fresh milk', price: 1.6, stock: 35 };


export default function App() {
  return (
    <main>
      <h1>{product.name}</h1>
      <p>Price: {money(product.price)}</p>
    </main>
  );
}
  • function App() is an ordinary function. The name starts with a capital letter: that is how React tells a component from an HTML tag.
  • return ( … ) returns the description. The parentheses are only there so JSX can start on a new line.
  • {product.name} is a JavaScript expression in curly braces. Its result becomes text on the page.
  • export default lets another file import the component. The sandbox puts App on the page by itself. In a real project one line in main.jsx does it: createRoot(...).render(<App />).
React

Change the price or the stock in the object product and press "Run". You do not touch the description of the screen: the screen follows the data.

The idea

The rules of JSX

JSX looks like HTML, but it is not HTML: before it runs, every tag becomes a function call in JavaScript. That is why it has rules of its own.

  • One root. return returns one element. If several must sit side by side, wrap them in a fragment <>…</>: it does not create an element on the page.
  • className instead of class, htmlFor instead of for. class and for are JavaScript words. With class the page still works, but React logs an error in the console: "Invalid DOM property class. Did you mean className?".
  • {expression} in text and in attributes: <img src={product.image} alt={product.name} />. No quotes around the braces: alt="{product.name}" is the text {product.name}, letter by letter.
  • Every tag is closed, including those without content: <input />, <img />, <br />.
  • Events are camelCase and get a function: onClick={add}. Not onClick={add()}: that calls add right away, while the component is being drawn, and gives onClick its result.

Try it

Find the bug

A click on "Add" writes nothing to the console.

Pick the line with the bug.

Try it

Fill in

The screen reader should read the product name as the description of the image.

<img src={product.image} alt= />

The idea

Components from components

The shop page has parts: the top with the menu, the product card, the cart. Each part becomes a component in its own file, and a bigger component uses them as tags. Then App is not one long function but a few lines that say what is on the page.

ShopHeader.jsx
export default function ShopHeader() {
  return (
    <header>
      <a href="/">The shop</a>
      <nav>…</nav>
    </header>
  );
}
App.jsx
import ShopHeader from './ShopHeader';
import ProductCard from './ProductCard';


export default function App() {
  return (
    <>
      <ShopHeader />
      <main>
        <ProductCard />
      </main>
    </>
  );
}

The component name starts with a capital letter, and that is not a matter of taste. For React <ShopHeader /> is a component, and <shopHeader /> is an HTML tag <shopheader> that the browser does not know. Then the console has an error, and the top part is missing. The fragment <>…</> is there because ShopHeader and <main> sit side by side.

Try it

Put the page together

ShopHeader and ProductCard are ready in their files. Put App together: ShopHeader at the top, and the product card in main, under the heading "Dairy".

React

The idea

Only the difference

Here is the cart from the problem as a component.

useState('2') is the memory of the component: a value React keeps between two drawings, and a function (setMilk) that changes it and tells React to draw the component again. It is the topic of the module "State". Here it is only so that something can change.

React

Do the same as in the problem: click into the milk field, delete 2 and type 15. The field keeps the focus and what you typed, and the total becomes €25.20. The component describes the whole screen on every key, like render(). The difference is that the page is not built again. The library sees that in the new description the field is in the same place with the same tag, and changes only its value and the text of the total.

See it

See the comparison

import { useState } from 'react';
const money = (x) => '€' + x.toFixed(2);


export default function App() {
  const [milk, setMilk] = useState('2');
  const [bread, setBread] = useState('1');
  const total = Number(milk) * 1.6 + Number(bread) * 1.2;


  return (
    <main>
      <h1>The cart</h1>
      <label>
        Fresh milk
        <input type="number" value={milk} onChange={(e) => setMilk(e.target.value)} />
      </label>
      <label>
        White bread
        <input type="number" value={bread} onChange={(e) => setBread(e.target.value)} />
      </label>
      <p>Total: {money(total)}</p>
    </main>
  );
}
Step by step, in words
  1. The buyer has deleted 2 and typed 1: the data say milk = "1". In the middle is the last description the component returned; on the right is the DOM, with the focus in the milk field.
  2. The buyer types 5. onChange calls setMilk("15"): the data change, and React notes that App has to be drawn again.
  3. React calls the function App again. It does not touch the page: it returns a new description, a tree of plain objects. Building it is cheap.
  4. The library compares the new description with the previous one. Same tags in the same order; two differences: the value of the field and the text of the total.
  5. Only the two differences reach the DOM. The <input> is the same element as before, so the focus and the cursor stay in it.
  6. You describe the whole screen for the given data, as with render(). The library finds what changed and touches only that. Both libraries do this, each in its own way.

The description is cheap: it is a tree of plain objects, and the component makes it again every time. The DOM is the expensive part, so the library touches only the differences there. You write as with render(): the whole screen from the data. The price of render() (lost focus, thousands of new elements) is not paid.

More precisely, if you are curious

Virtual DOM. The description is often called the virtual DOM, and comparing it with the old one is called reconciliation (React) or patching (Vue). A node of the description is an object like { type: 'h1', props: { children: 'The cart' } }.

The two ways. JSX compiles to calls like jsx('h1', { children: product.name }). When the memory of a component changes, React calls its function again, and the functions of the components inside it, then compares. In both cases there is a new description at the end, a comparison and a few changes in the DOM.

Text is text. {product.name} puts in text, like textContent. A name like <img src=x onerror=alert(1)> shows as characters and does not become a tag. HTML from a string goes in only with dangerouslySetInnerHTML, and the name tells you to be careful.

Class components. In older code a component is a class: class Cart extends React.Component { render() { … } }. It still works, but new code uses functions and hooks (useState is a hook).

StrictMode. A new Vite project wraps App in <StrictMode>. In development mode it calls every component twice, to bring out code that touches something outside itself. That is why a console.log in the body of a component can appear twice. The sandbox draws App without StrictMode.

Exercise

The product card

ProductCard holds the object product (White cheese). Make the card: the name as a level-two heading, "Price: €7.90" (with money), "In stock: 12 pcs" and an "Add" button whose name for the screen reader is "Add White cheese". A click on the button writes "Added: White cheese" to the console (the function add is ready). Then put App together: ShopHeader at the top, and the card in main, under the heading "Dairy".

React

Test

Check yourself

1. A component is drawn a second time with the same data. What does it show?
2. Which line is valid JSX?
3. Why does the focus stay in the field in the component, while render() from the previous module loses it?
4. The file has function productCard(), and App uses <productCard />. What happens?

Made by Ivo Gergov as part of Evo Tech's campaign for accessible programming education ·