DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Julio Santacruz
Julio Santacruz

Posted on

Gatsby for beginners pt1

Hello there..!

Now I want to tell you about Gatsby... Yes it's a JavaScript Framework, yes it uses React to. Well let me start and if you have questions put it on the comment section and I'll look for it... Maybe some day...

Gatsby...?

Gatsby is a React-based Framework, designed to preformat static websites from your React-app (It's a statis site generator that used React, GraphQL and webpack)

Yes, there are other frameworks that works the same, like NEXT.js but it's not the same...

The main benefits of the usages of static site like Gatsby are:

  1. Loading Speed
  2. Search Engine Optimization (SEO)
  3. Security

Gatsby Ecosystem

Well parentally it's big, but its hard to say how big it is... according to stack overflow survey only 3.77% choose Gatsby as web technology they used professionally, more then Drupal but lees then NUXT...
I must say that until now I have not found a negative review.

Let's Start a Project

there are many way to start a project with Gatsby, lets check three of them...

  • Only Gatsby

For this method we only require to install react and gatsby

npm install react react-dom gatsby
Enter fullscreen mode Exit fullscreen mode
  • Gatsby with the CLI (like 'create-react-app')

This option make a full project sample with config files and a 'src' directory and it's ready for us to modify.

First we need to install Gatsby CLI

npm install -g gatsby-cli
Enter fullscreen mode Exit fullscreen mode

with this were are available to create a new project using

gatsby new <name-of-your-project>
Enter fullscreen mode Exit fullscreen mode
  • Using a Starter A starter it's like a theme template based project, that you can personalize for your convenience. There are free to used and you can find them here. To install one you need to have the name of the starter and the name of the user that made it
gatsby new <name-of-your-project> <name-of-user>/<name-of-starter>
Enter fullscreen mode Exit fullscreen mode

Gatsby Router

Gatsby Router is simple to use, in this case simple is better...
Each file in the pages folder is a page

Image description

To navigate between the pages we must use the Link component of gatsby and assign it the parameter 'to=//'

Image description
The importance of this last images it is the component 'Link', the component Button it is only a styled button

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post