React

02How it works

In React, a screen is assembled from components. A component is a small, self-contained piece of the interface: a button, a search field, a table of invoices, a customer card. Larger components are built from smaller ones, and a whole page is a component as well.

Each component describes what it should look like for the data it receives. A customer card says: show the name in bold, the city below it, and a red badge if an invoice is overdue. The developer writes that description once and does not write instructions for updating the screen.

When the data changes, React works out which parts of the screen are affected and updates only those. If one invoice is marked as paid, the red badge disappears from that one card, and the rest of the page stays as it is. This is why React applications feel quick even when a screen shows hundreds of records.

03An example from a business application

Imagine a ticket system for a support team. The ticket list, the ticket detail view and the dashboard all show a ticket's status as a small coloured label. In React that label is one component, used in all three places.

If the team later adds a fifth status, such as "waiting for client", a developer changes that one component. The new status then appears with the right colour everywhere it is shown. The same goes for a date picker, a currency field or a confirmation dialog: built once, tested once, used throughout.

Components also keep their own small pieces of state. A table component can remember how it is sorted and which rows are selected, while the rest of the page does not need to know.

04Alternatives

React has a few established competitors. Each of them can build a good web application:

• Vue, released in 2014 and developed by an independent open-source team. Often described as easy to learn.
• Angular, developed by Google. A complete framework with many built-in parts, common in large companies.
• Svelte, a newer approach that does more of its work before the code reaches the browser.

05Why we chose React

React is the most widely used of these libraries. That has practical consequences for you as a client. There are many developers who know it, so the code can be maintained by someone else if you ever want that. There are ready-made, well-tested components for things like tables, charts and date pickers, which saves time and money. And problems that come up have usually been solved and documented by someone before.

React also works closely with Next.js, the framework we build on, and with TypeScript, which checks that every component receives the data it expects.

06What to look out for

React itself is free. The cost of a React application lies in the work of building it, and the quality of that work varies. These points tell you a lot about it:

• Are components reused, or is the same button rebuilt slightly differently on every page?
• Does the application work with the keyboard and with screen readers? React allows it, but someone has to build it.
• How large is the code the browser has to download? Too many add-on libraries make the first page load slow.
• Is the React version current? Old versions still run, but upgrading late gets more expensive with every year.

07How we use it

Every screen we build is made of React components, written in TypeScript. We start each project with a small set of base components, such as buttons, form fields, tables and dialogs, styled in one consistent design. The pages are then assembled from these parts, which keeps the application uniform and makes later changes quick.

React runs inside Next.js in our projects. Many components are prepared on the server, so the page arrives in the browser ready to show and only the interactive parts need JavaScript there. Every proposed change to them goes through the type check and the automated tests before it can be merged.

Frequently asked questions