Astha Sharma on 2020-06-09
If you are the kind of person who learns best by doing, go through this tutorial first THEN go through the React docs.
Otherwise, if you are a theoretical person, read the React docs first.
Create a spreadsheet that contains the data you want to show 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.
Our data will power our front-end which will ultimately look like this
Make an account if you don’t have one already (there's a free tier!) 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!
We will explain what to do with all this in a bit, but for now let’s start up our React App.
Before installing React we have to make sure we have node.js downloaded which you can do from here: nodejs.org
Now, to create a project run the following commands on your Terminal or Command Prompt:
$ npx create-react-app award-winning-movies this creates a folder with all the files you need for your react app. You can change award-winning-movies to any other name.$ cd award-winning-movies this puts you in the folder you made so you can work on your app$ npm start you should see your app open up on your localhost and it looks like this
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.
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 to know is components display the visuals for our app.
Our App.js component is the entry way to our React app.
We are going to import React and the Component class from ‘react’. We will also be importing the App.css file and another Component: FilmCard. We will be walking through these individually later on.
We begin by declaring that our component is a class that extends the component class
We initialize the component by setting the component’s state and inheriting props.
this.state = {} initializes the local state of the component. This is where we will be including "filmInfo", an empty array right now. Fetching and error are set to false because nothing is happening for them.
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.
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.
We will also be changing states for when the page is loading or if there is an error. Our final fetch and componentDidMountcode 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 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 we would be naming each prop.
I gave each prop its own <div> and it looks like this:
Your code will first run its constructor(props) method, then render(), then componentDidMount() and then render() anytime the state is changed, for example when we call the this.setState function in componentDidMount and fetch.
In the render we have if else statements that determine what should be displayed given a particular scenario. In our case we have 3 scenarios.
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:
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.
When you run your code, it will display like this on your localhost.
Here you have all your data and now you can 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!
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 want to get started right away, copy and run each step in your terminal.
First, make an account on heroku
$ 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.
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 have any further questions, feel free to email us at info@lovespreadsheets.com! We can’t wait to see what you build.
Checkout our other tutorials!
Let us know what you think