In this tutorial we are going to create a Gatsby site with two pages. The home page with an introduction about the store and some features, and the second page is a product list page with a simple pagination.

The main objective of this tutorial is:

- Show you the basics of Gatsby.

- Learn how to navigate between pages.

- Create a simple pagination.

- How to change site MetaData and add new things.

- Learn how to use different plugins like gatsby-source-filesystem and get dynamic data from json files.

- How to make gatsby compile SASS.

How to create some pretty nice and simple animations using react-spring.

Next, two screenshots of the Application we gonna create.

Gatsby is a blazing fast modern site generator for React.

To create the project we will follow the gatsby documentation and use the gatsby hello-world starter template.

Navigation in Gatsby it’s pretty straightforward. To add pages you just need to create a file inside /src/pages . We have created two pages, one called index.js (homepage) and another one called products.js. The main route is always going to be the index.js, and in order to navigate to the products page you just need to go to /products .

Before we dive into it, we are going to add some gatsby plugins to handle sass files and get dynamic data from json files. We are going to add plugins inside the file gatsby-config.js in the root directory of the repository.

Inside siteMetaData we can add some static content. You can add any data you want, in our case we added the title, description and an array of features. We used this data on the homepage. gatsby-plugin-sass because it provides drop-in support for SASS/SCSS stylesheets. We used the gatsby-source-filesystem, for sourcing data into the Gatsby application from our local filesystem.

We used gatsby-transformer-json because it parses raw JSON strings into JavaScript objects e.g. from JSON files, supports arrays of objects and single objects. This plugin checks for json data inside the folder src/data.

We imported the main sass file to the application inside the file gatsby-browser.js

Now let’s add content to the index.js file, and query some data with the use off gatsby graphql. Graphql is awesome you can query and get only the data you want. So we query throughout the site in order to find the siteMetaData and thus get all the data we need for the homepage. To render the content we need to access props.data.site.siteMetadata.

In Gatsby in order to navigate between pages we just need to add a Link component with the attribute “to” and pass the url path.

In order to render a list of products on the products page we will create a json file.

Keep in mind that for query this file the plugin expects a query named allProductsJson.

We continue by adding content to the page products, query the data and adding pagination. To get the data from the products json we need to query allProductsJson and enter the nodes and call the attributes we want to retrieve. Then we access the content inside the component with this.props.data.allProductsJson.nodes.

The calcpagenumbers method is responsible for rendering the pagination. In order to get the current items of each page we created a few variables.

To get the index of the last item we need to multiply the current page number with the number of items per page. To get the index of the first item we need to subtract the index of the last item with the number of items per page. To get the current items we slice all products data with slice and pass index of first item and index of last item.

We added an onClick method to handle pagination and change pages on products listings. We put scrollTop to navigate between pages on products listings in order to get the page to reset its position.

Functionality done, let’s add some style !

Once we have all the functionality done, it’s time to add a bit of style and some simple animations using the react-spring library.

We’ll use bootstrap so we can speed up the styling process, to get things going lets download bootstrap minified css version ( we don’t need the js part of bootstrap ) and paste it to the styles folder and import it on index.js like this :

import “../styles/bootstrap.min.css”

You can download bootstrap files from http://getbootstrap.com

In your styles folder you should see two files, the bootstrap.min.css and the global.sass that we will use for some extra customization.

After this import, Bootstrap will work across all our project so we don’t need to import it on any other file.

Now we are ready to drop some standard bootstrap css classes on index.js and products.js so we can quickly transform the “face” of our app.

Now our app looks a little better so lets focus on animations.

We will use the react-spring library for some easy spring animations (www.react-spring.io). Open your console and install the library using npm :

npm install — save react-spring

Open your index.js file and import it to our project, we will need to import useSpring, animated and config from the react-spring library

import { useSpring, animated, config } from “react-spring”

We will create 5 different animations on this file but lets focus on the first one so we can see how react-spring works.

On index.js file we will use the hooks api because its a functional component, for a class component we will need to use the render-props api.

First we create a variable with the name we wish to give to the animation and then pass the useSpring function to it, next useSpring will receive an object with a couple of values, for this example we will add :

from -> initial state of the animation

to -> final state of the animation

config -> a generic preset for our animation

delay -> some delay in ms before animation starts

Now we only need to define where we want to add this animation. In this particular case we will add it to a <p> tag, to do this we add animated to the <p> tag :

<animated.p> … </animated.p>

and add a style prop with the name of the animation, the final result will look like this:

<animated.p style={leftAnimation}> … </animated.p>

and that’s it , we are done with our first react-spring animation.

Our final index.js will look like this:

→ github link for index.js (https://github.com/nunosoares27/GatsbyTutorial01/blob/master/src/pages/index.js )

For the products.js file we will use the render-props library because it’s a class component so we will import it in a different way:

import { useSpring, config } from “react-spring/renderprops”

Now we will wrap our original component in a <Spring> component where we can add the values of the animation like in the hooks example, the Spring component will look like this:

<Spring

config={config.wobbly}

from={{

transform: “translate3d(0, 30px, 0)”,

opacity: 0

}}

to={{

transform: “translate3d(0, 0, 0)”,

opacity: 1

}}>

{props => (

…

)}

</Sping>

our final products.js will look like this:

→ github link for products.js ( https://github.com/nunosoares27/GatsbyTutorial01/blob/master/src/pages/products.js )

and that’s how we quickly make a gatsby site , using bootstrap to style it and adding a couple of simple animations using the amazing react-spring library.

As a final note I would like to add that react-spring has an amazing documentation full with real examples and playgrounds were we can try different combinations of values and explore the full capabilities of this library.

Authors:

Nuno Soares — Software Frontend Engineer at Mindera.com. Use mostly React, React Native, Redux, Laravel, Wordpress.

https://nunosoares.dev/

Nuno Pereira — Frontend Developer. I don’t Like to define myself by the work I have done . I define myself by the work I want to do . Skills can be taught, personality is inherent. I prefer to keep learning , to continue challenge myself, and to do interesting things that are meaningful.

https://www.nunopereira.dev