Week 7 — 4 / 16

Introduction to React

You will have noticed in working on Exercise 6 that it can be tedious and difficult when writing a single-page application to manage what state the app is supposed to be in and what elements should be displayed to the user. You have to change the navigation bar, update variables, and show/hide page elements all manually, and trigger updates after each API callback.

React is a framework for developing interactive web pages, and especially single-page applications, developed and released as open source by Meta (neé Facebook). The powerful thing about it (and competing frameworks like Vue and Svelte) is it lets you define how the page should look in various states, and when you update the state, the framework updates the page automatically for you. That's less work for you as a developer, and fewer opportunities to make mistakes.