A web interfaces course with React

Problem

The program is right. Customers complain

The total of the cart is right, and the tests pass. But on a phone the "Order" button is off the screen. Someone who uses a screen reader hears only "button", with no idea which one. The product list freezes while it loads, and a quick double click sends the order twice.

People see the program through a screen. If the screen breaks, the program does not work, however right it is underneath. This course teaches how to make the screen.

The idea

How the browser shows a page

The browser asks the server for the page and gets HTML: text that says what is on it.
From HTML it builds a tree of the elements: a heading, a paragraph, a button. This tree is called the DOM.
It applies CSS: the rules for color, size and layout. It works out where every element goes and draws it.
JavaScript changes the tree: it adds a product to the list, changes the text of a button. The browser draws again only what was touched.

The whole course is about these four steps. First you do them by hand, and then you see how React and Vue do the fourth one for you.

The idea

The sandbox

The code in the lessons runs right in the page. Try it: press "Run", then the button in the page below. Change the text in script.js and run it again.

HTML, CSS, JS

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The cart</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>The cart</h1>
    <p id="count">The cart is empty</p>
    <button type="button" id="add">Add bread</button>
    <script src="script.js"></script>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }

let count = 0;
const text = document.querySelector('#count');
document.querySelector('#add').addEventListener('click', () => {
  count++;
  text.textContent = `In the cart: ${count} ${count === 1 ? 'item' : 'items'}`;
  console.log('bread added, total', count);
});

The files are in tabs: index.html, style.css, script.js, and later the components. Ctrl+Enter (⌘+Enter on a Mac) runs the code, and "Restore the code" brings the example back.
The console is under the page: console.log and the errors are there.
The sandbox is isolated. The code does not see the site, its cookies or its storage, and it has no network. A pretend API with the data of the shop answers fetch('/api/…'), and the lessons turn on a slow answer, an error or an empty list on purpose.
Tasks are checked by behavior. "Check" presses the buttons and types into the fields like a person, and finds the elements by role and name, the way a screen reader finds them. A button with no name is not found, so the task checks accessibility too.
An endless loop in the code stops the browser tab. Then reload the page: your code is saved.

The idea

The two parts

The first part is the platform: HTML, CSS and the DOM. It is the same for React and Vue, so the text and the code are the same on both pages.

The structure of the page: elements and the tree, text and links, forms, accessibility.
How it looks: the cascade, the boxes, flexbox, grid, a page for the phone.
JavaScript in the page: the DOM, events, a list from data, data from an API.

The second part is components: why changing the DOM by hand breaks in a big interface, and how the interface becomes a function of the data.

Components, State, Effects, data and forms, A whole app (routing, speed, tests, a real project).
Project: the shop window: a catalog, a cart and an order in one app.

The idea

React or Vue

The two libraries solve one task: you describe how the interface looks for some data, and the library updates the page when the data changes. Here is the same cart in both:

React

App.jsx

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>The cart</h1>
      <p>{count === 0 ? 'The cart is empty' : `In the cart: ${count} ${count === 1 ? 'item' : 'items'}`}</p>
      <button type="button" onClick={() => setCount(count + 1)}>Add bread</button>
    </main>
  );
}

This is the React code: the component is a function that returns JSX. The Vue code is on the page for Vue.

We do not rank them. The ideas are the same, and the difference is in how they are written: React is JavaScript with HTML inside, Vue is an HTML template with JavaScript inside. Pick one with "Library:" above the lesson and change it any time. If you do not know which: look at what the companies where you want to work use. Once you know one, you learn the other in days. There are others too (Angular, Svelte, Solid). They rest on the same ideas.

The idea

What you need to know

From JavaScript you need functions, objects and arrays with map and filter, modules with import and async/await: the JavaScript course up to "Modern JavaScript". Where a lesson uses something from there, it points to it.

In the browser you need to install nothing. For your own project outside the sandbox you need Node.js, an editor (for example VS Code) and Vite, which makes an empty project:

npm create vite@latest shop -- --template react
cd shop
npm install
npm run dev

These commands do not run here. What a real project looks like is the last lesson of "A whole app".

Test

Test yourself

1. The browser got HTML. What does it do before it draws anything?It draws the text line by lineIt runs JavaScript, and JavaScript draws the pageIt builds a tree of the elements (the DOM) and works out where each one goes

2. Code in the sandbox calls fetch("https://example.com/data"). What happens?The data comes from the internetThe request does not go out: the sandbox has no network and answers only /api/… of the shopThe lesson page reloads

3. React or Vue: which is better?Neither: they solve one task in different ways, and the choice is up to the teamReact, because it is better knownVue, because it is newer

Welcome

Cookies