Gatsby is a Great Way to Learn React

Joshua Isaac
Joshua Isaac
November 5, 2019
image resource

Gatsby is a great way to learn React because it takes away a lot of the burden needed to get going with a React project.

As many of us already know, React is a JavaScript library that allows developers to build quick and beautiful user-interfaces. Many people love to write React because of its ability to create reusable components. React components render something called JSX, which is an HTML-like syntax that allows JavaScript to coexist with this HTML-like code. The idea of components for me is what makes React so fun. Instead of worrying about your entire website/web app, it makes it possible to break down your interface into simple components.

Reusable components are also able to have their own props, or properties, populating the component with custom data. For example, you could have a reusable button component, but each button could have its own text label, like "Read More", or "View All".

Each component has the ability to hold a state. State allows you to create dynamic and interactive components. Imagine a shopping cart as a component. The shopping cart can have a state that stores the total number of items in the cart, and the total sum of prices for all the items stored.

React uses something called the VirtualDOM, which is why React applications are super fast. The VirtualDOM allows React to know where updates within the website/web app were made, so it only re-renders specific pieces of, and not the entire DOM (Document Object Model).

The developers at facebook created a neat tool called create-react-app which saves you from configuring babel, webpack, and others that are needed to compile your React code. With create-react-app, you can start building out a React application instantly, but a few issues that create-react-app faces are the lack of SEO, image optimization and routing. So you might love using React, but what if you wanted to create a full-fledged website built with React for yourself, or for a client? How can you get passed these pain points?

That's where Gatsby comes in.

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

Both create-react-app and Gatsby use React to allow developers to build apps quickly, however, there are some very important differences.

Gatsby takes care of a ton of performance optimization and app structuring so you don't have to.

  • gatsby-link: Set's up routing for your application, let's you link between components (pages).
  • gatsby-image: Creates an optimized version of your image in different sizes, lazy loads images, and has the ability to add neat effects to images.
  • SEO Component: Allows you to easily add metadata to components (pages) in your website/web app such as title, description, site URL, and much more.
  • Pages directory: The Gatsby Pages directory makes it easy to add pages to your website/web app, just add a new javascript file and name it accordingly!
    - index.js / home page
    - about.js / about page
    - contact.js / contact page

There are many other features that make Gatsby awesome, but these are the reason's why Gatsby makes it easier to learn React. Face it, writing React is fun, why wouldn't you want to use it to build awesome websites? Gatsby and React truly offer developers an amazing developing experience. You can learn to write React code while building yourself an awesome website, such as a blog or a portfolio, with all the speed, performance, and optimization you need!

Learn more at:

(This blog was previously published at:

Keep Reading

If you want to learn more about Gatsby, make sure you read this article: How to use Gatsby with Agility CMS as a Headless CMS

 About the Author

As a recent graduate with honours, Joshua is a front-end developer with a keen eye for design. He believes user interfaces should look great, and function even better. He absolutely loves learning React, and working with it whenever he can. Joshua hopes to expand and further his skills as a developer as he takes a deeper dive into JAMstack development and headless CMS architecture.

Back to All Articles

Our Latest Posts

Headless Commerce Explained: Definitions, Use Cases, and Roadblocks

Headless Commerce Explained: Definitions, Use Cases, and Roadblocks

Amazon has changed the game when it comes to eCommerce and omnichannel experiences. Now brands need to adjust to keep up...

omnichannel content delivery

Omnichannel Content Delivery: How a Headless CMS Helps

The benefits of omnichannel marketing are too great to be ignored. Thanks to its API-first architecture, a headless CMS ...

hybrid dxp cms

DXP vs Headless CMS: Why Headless CMS is now the foundation of a Modern DXP

Headless CMS (Content Management System) is in the heart of any Modern DXP. A modern DXP uses a Headless CMS and its API...