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:
- Loading Speed
- Search Engine Optimization (SEO)
- 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
- 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
with this were are available to create a new project using
gatsby new <name-of-your-project>
- 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>
Gatsby Router
Gatsby Router is simple to use, in this case simple is better...
Each file in the pages folder is a page
To navigate between the pages we must use the Link component of gatsby and assign it the parameter 'to=//'
The importance of this last images it is the component 'Link', the component Button it is only a styled button
Top comments (0)