Why Gatsby?
Why would we need a framework on top of a framework (or a library)? Isn’t React a tool that “helps developers build websites and apps”? This is a reasonable question. It is often posed about tools such as Next.js.
“Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.” According to the Gatsby team.
React is a library meant to provide a particular set of core functionality for developers to leverage. It is intended to be lightweight and broadly applicable.
Gatsby, on the other hand, is “a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript, so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages, so clicking around the site feels incredibly fast.”
Gatsby is a static site generator that leverages React. With that, I decided to give a try, and I start to build a few websites. I bump in a simple situation, how to make a Carousel in Gatsby?
I found several different ways to solve it, and I tested 3. I’m going to talk about two (2) here.
Gatsby Background Image
Gatsby has a fantastic set of plugins, especially to handle imagens; however, none is a carousel. So, the “native” solution will be using the gatsby-background-image plugin to build a carousel.
You can check the result here, and the source code at Github. But, if you want to start from scratch. You can follow these steps:
1. Clone Gatsby Starter Defaulf (github)
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
2. Install Gastby Background Image (gastsby)
cd gastsby-starter-default
npm install --save gatsby-background-image
3. Start to create the {Background-Carousel}.
Create the file at componentes. Use my file as a starting point.
React Bootstrap
Bootstrap has a vast library, and one of them is the Carousel, which works all the time. So, I give a try, and the result was elegant. The only caveat between Gatsby and React-Bootstrap is the conflict on the CSS from bootstrap.
You can check the result here, and the source code at Github. But, if you want to start from scratch. You can follow these steps:
1. Clone Gatsby Starter Defaulf (github)
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
2. Install React Bootstrap (bootstrap)
cd gastsby-starter-default
npm install react-bootstrap bootstrap
3. Start to create the {Carousel}.
Create the js. Use my file as a starting point.
Share in the comments other solutions that you tested for Carousel at Gatsby.