How to Make a React Web App Powered by Spreadsheets

A tutorial about how to use ApiSpreadsheets.com to make a simple Web app with React and deploy it live. This is a great tutorial for someone familiar with basic Web development concepts and wants to make a switch to React.

Quick Notes About React

If this is your first time using React, please please go through the official tutorial either before OR after this post.

If you are the kind of person who learns best by doing, then go through this tutorial THEN go through the React documentation.

Otherwise, if you are a theoretical person, read the docs first.

Start by Creating Your Spreadsheet

Create a spreadsheet that contains the data you want to show up on your website.

You can make it on Google Sheets, upload it to Dropbox, or make it on Excel. I created mine on Google Sheets with information on Academy Award Winning Films in 2019.

With APISpreadsheets, you don’t need to worry about the format of your sheet because it’ll all get converted the same way.

Our data will power our front-end which will ultimately look like this

Upload or Connect your Spreadsheet on APISpreadsheets.com

Make an account if you don’t have one already (it’s free for up to 3 files!) and choose the file you want. Once you have uploaded the file, checkout the quick tour to get a deeper understanding of all the features!

For this tutorial, we will only be reading our spreadsheet so click on the “Read” tab and Javascript Code Sample

We will explain what to do with all this in a bit, but for now let’s start up our React App.

Open up your Terminal on Mac or Command Prompt on Windows

Before installing React we have to make sure we have node.js downloaded which you can do from here: https://nodejs.org/en/download/.

Now, to create a project run the following commands on your Terminal or Command Prompt:

1. npx create-react app (name of your app), I’ve named mine award-winning movies

$ npx create-react app award-winning-movies

2. cd award-winning-movies, this puts you in the folder you made so you can work on your app

 $ cd award-winning-movies

3. npm start, you should see your app open up on your localhost and it looks like this

$ npm start 

How your app should first look

Open the React App you created in your favorite IDE or Text Editor

An IDE stands for Integrated Development Environment where you can edit the React app we just created. I’m using WebStorm. You can also use a simple text editor like Atom.

On the left you can see all the files we get from React but we will mainly be focusing on our App.js component in the folder “src”.

When we are done with this tutorial, the App.js component will have the following code.

Don’t worry if all this looks confusing. We are going to walk you through it step by step below.

What is a Component?

A component is a block of code that renders your given HTML elements or other components. Components are the building blocks of React and you can read more about them in the React documentation.

For now all you need is components display the visuals for our app.

Our App.js Component

Our App.js component is the entry way to our React app.

Import Statements

We are going import React and the Component class from ‘react’. We will also be importing the App.css file and another Components: FilmCard. We will be walking through these individually later on.

import React, { Component } from ‘react’;
import './App.css';
import FilmCard from './FilmCard';

Initialize Our Component

We begin by declaring that our component is a class that extends the component class

class App extends Component {

Don’t forget to close this bracket at the end :)

We initialize the component by setting the component’s state and inheriting props.

constructor(props){
  super(props);
  
  this.state = {
    filmInfo: [],
    fetching: false,
    error: false
  }
}

this.state = {} initializes the local state of the object, where we will be including our filmInfo that’s an empty array right now, since we don’t have and fetching and any error that could happen is set to false.

State is the component’s brain. Any changes in the state render the component again so we always think carefully on what the state should contain

Add componentDidMount Method and immediately change fetching state to be true

componentDidMount() {
  this.setState({ fetching: true })

ComponentDidMount is a method that is part of React’s component lifecycle. It signals that the component and it’s sub-components have rendered properly and it’s where we will be making our API call.

Go back to APISpreadsheets to copy our Javascript Code from earlier and paste in the componentDidMount() method

fetch("https://api.apispreadsheets.com/data/568/").then(res => {
 if (res.status === 200){
  // SUCCESS
  res.json().then(data => {
    const yourData = data
  }).catch(err => console.log(err))
 }
 else{
  // ERROR
 }
})

By the way, this API URL is public so feel free to use it yourself

We are going to modify this code a bit so it handles all the different scenarios. Depending on the status of the fetch request, we will be changing the state using the this.setState function.

For example, if the fetch is successful (i.e. we have obtained our spreadsheet data), then we will set the filmInfo state to contain all our film data. Our film data will look like the following.

{"data":[{"title":"Parasite","awards_won":"Best Picture","rotten_tomato_score":"99%","imdb_score":"8.6","revenue":"$266.9 million","genre":"Comedy, Drama, Thriller","year":"2019","picture":"https://m.media-amazon.com/images/M/MV5BYWZjMjk3ZTItODQ2ZC00NTY5LWE0ZDYtZTI3MjcwN2Q5NTVkXkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_UY1200_CR90,0,630,1200_AL_.jpg","film_url":"https://en.wikipedia.org/wiki/Parasite_(2019_film)"}

We will also be adding different states for when the page is loading or if there is an error. Our final fetch code looks like the following:

If successful, our filmInfo state will contain an array of all the films and their attributes. The ones we put into our spreadsheet.

Now we will need another Component that can take each element of that array (aka the info for a particular film) and create a Card to display.

Create New Component FilmCard.js

Create a new file and name it FilmCard.js and put in the same directory as App.js.

This is where we will be displaying the info about the film. We will be passing props to this component that are equal to the film’s info.

If you go back to APISpreadsheets and click on “Sample Response” you can see what you would be naming each prop.

I gave each prop it’s own div and it looks like this:

We’re almost done! Now it’s time to work on our render() function on App.js

Your code will first run its constructor(props) method, then render(), then componentDidMount() and then render() anytime the state is change, for example when we call the this.setState function.

In the render we have if else statements that determine what should be displayed given a particular scenario. In our case, if the component is fetching, if there is an error, and if the data was successfully obtained.

The first and second if else blocks are for when the screen is loading and the third is if there are errors.

The last else is for getting your film info mapped to your FilmCard component to display the card. This is where we pass the film’s attributes as props to the FilmCard component. Our final render() code will look like this:

Very unformatted and non-abstract code. Feel free to simplify but we have found this is better for learning

Let’s talk about the Return ()

We have to have a return() something from the render() method because this is what React shows to our browser. Since we are setting what should be displayed to the body variable, we will be returning, aka telling React to display it, in the return().

Finally, we also need to export each component.

return (
        <div>
          <h1> Award Winning Movies</h1>
          {body}
        </div>
    )
  }
}

export default App;

When you run your code, it will display like this on your localhost.

Here you have all your data and now you just need to add some CSS to make it look nice! You can reference my full code on GitHub and use guides on W3Schools to see what you can do!

Congratulations! You have now made a React Web app powered by Spreadsheets!

Photo by Wil Stewart on Unsplash

Time to Deploy Your Code

After you created a nicer looking front-end you can use Heroku to host your site for free.

I followed this tutorial if you want to go more in depth but you basically just need to write this step by step in your terminal. First, make sure you make an account on heroku.com.

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

This gave me a randomly worded name but now my site can be shared and seen to anyone! Note, that free sites sometimes take a while to boot up on Heroku.

React App

And there you have it, a simple React web app powered by Spreadsheets.

The best part is, if you add or modify any data to your Google Sheets, it will automatically show up on your web app! Even if you are working on an Excel file you can upload that in the same section you originally did on APISpreadsheets and your app will update! No additional code would be required.

If you want a custom app, data cleaned, or a project built using spreadsheets, you can check out our consulting service here: https://www.lovespreadsheets.com!