In this module we’re going to create a new React app from scratch, and build a Spreadsheet app similar to Google Sheets or Excel.
Making a stripped down version of a spreadsheet like Google Sheets is really a good example of showing many of the capabilities of React.
At the end of this tutorial you’ll have a working, configurable, reusable spreadsheet React Component to power all your calculations 🙂
In the previous projects we only used function components and hooks. In this project we’ll use class components, which in my opinion are going to be gradually used less, because of the power that hooks give to function components. Nonetheless, we’ll still see class components in existing code for years, so it’s an absolute must to know them inside out.
First steps
The code of this tutorial is available on GitHub at https://github.com/flaviocopes/react-spreadsheet
First thing, we’re going to detail what we’re going to build. We’ll create a Table component that will have a fixed number of rows. Each row has the same number of columns, and into each column we’ll load a Cell component.
We’ll be able to select any cell, and type any value into it. In addition, we’ll be able to execute formulas on those cells, effectively creating a working spreadsheet that won’t miss anything from Excel or Google Sheets 😏 </sarcasm>.
Here’s a little demo gif:
The tutorial first dives into the basic building blocks of the spreadsheet, and then goes into adding more advanced functionality such as:
- adding the ability to calculate formulas
- optimizing performance
- saving the content to local storage
I’m going to use CodeSandbox in my tutorial. You can choose to develop locally, or use CodeSandbox.
The choice is yours.
If you choose to work locally, just start a new React app by using the command npx create-react-app react-spreadsheet, then go into that folder and run npm run start.
Here is the link to create a new CodeSandbox project: https://codesandbox.io/s. You just visit the page, click React and start coding.