Web interfaces: React

Library:ReactVue

The course is the same for React and Vue, and the examples here use React. The first part (HTML, CSS, the DOM) is shared, the second is components. Every example runs and changes right in the page.

Module 0

Welcome

1 lesson · how the browser shows a page, the sandbox, React or Vue

1. 1Welcome

Module 1

HTML: the structure of a page

4 lessons · elements, text, forms, accessibility

1. 1The HTML document
2. 2Text, links, images, tables
3. 3Forms
4. 4Accessibility

Module 2

CSS: how the page looks

5 lessons · the cascade, boxes, flexbox, grid, for phones

1. 1Selectors and the cascade
2. 2The box model
3. 3Flexbox: row and column
4. 4Grid: rows and columns
5. 5Responsive design

Module 3

JavaScript in the page

4 lessons · the DOM, events, a list from data, fetch

1. 1The DOM: the page from JavaScript
2. 2Events
3. 3A list from data
4. 4Data from an API

Module 4

Components

4 lessons · JSX and templates, props, lists, conditions

1. 1The first component
2. 2Props: data from above
3. 3Lists and keys
4. 4Conditions: empty, error, loading

Module 5

State

4 lessons · useState and ref, updates, derived, shared

1. 1State
2. 2Updating objects and arrays
3. 3Derived state
4. 4Lifting state up

Module 6

Effects, data and forms

4 lessons · effects, data from an API, forms, shared state

1. 1Effects
2. 2Data from an API in a component
3. 3Forms in a component
4. 4Shared state

Module 7

A whole app

4 lessons · routing, speed, tests, a real project

1. 1Routing
2. 2Speed: when a component renders again
3. 3Testing components
4. 4From the sandbox to a project

Module 8

Project: the shop front

1 lesson · catalogue, cart, checkout and API in one

1. 1The shop front

Practice

Tasks

Every task from the lessons in one place, by module.