DEV Community

Cover image for My first close encounter from the third kind... of React with Gatsby!

My first close encounter from the third kind... of React with Gatsby!

gabesharpton profile image gabesharpton ・2 min read

What is Gatsby?

Alt Text

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps

You can build seriously fast static websites very quickly with Gatsby. Gatsby also uses GraphQL which is a really nice query language that just might replace REST for my personal projects. Another great thing about Gatsby is all of the plugins available! There are so many great ones that can really make Gatsby shine.

Being a new developer I try to not get to distracted by the new shiny technologies, but I can say that I am really glad I got distracted by Gatsby. It has not only helped me understand React on a larger scale but has also really helped me understand query languages and API development. After finishing Scott Tolinksi Pro Gatsby 2 tutorial on Level up Tutorials I fell in love with the way Gatsby handles not just API calls but the way you can build multiple pages very quickly using Markdown files.

Getting started

You can download the Gatsby CLI to get started very fast, just run npm install -g gatsby-cli
Gatsby comes equipped with a create-react-app <appName> clone of its own in gatsby new <appName>.
After that cd <appName> and run gatsby develop and see your base site appear at localhost:8000

One really cool thing that gatsby new <appName> does for you is after the app is running on localhost:8000, you can go to localhost:8000/__graphiql (thats two _ _) and have your own mini Postman built-in. It makes it really easy to write your queries and confirm the data is what you want. Then you can simply copy and paste the query you wrote in graphiql into your code! Pretty great in my opinion.

Next, I want to become more familiar with GraphQL, as it has been fairly simple to pick up given my previous knowledge of REST. I would also like to learn about implement Apollo into my stack because I recently attended a React JS Meetup and really like hearing what the speaker was able to do with Apollo. If anyone has any resources for strengthening these skills I would appreciate any advice!


Editor guide
waylonwalker profile image
Waylon Walker

Gatsby is pretty incredible! I had never used a site with a client side router before. The first time you click a Link component in Gatsby is mind blowing 🤯

gabesharpton profile image
gabesharpton Author

It really is incredible how fast everything is in Gatsby! And yes that Gatsby Link is so satisfying! Almost instant page transition.