TypeScript: Modern JavaScript Development

Writing the view

The application will show an input box at the top of the screen, which is used to type the title of the spreadsheet. Below the title, a table is shown which contains all fields of the spreadsheet. When the user clicks on a field, a popup is created which allows the user to change the content of that field. If the field contains errors, these errors are shown in the popup:

We will use React to create the view of our application. With Stateless Functional Components, we can write pure functions that render the state.

Rendering the grid

In lib/client/sheet.tsx, we will import React and functions and types that we created before:

import ...