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.
What is React?
As many of us already know, React is a JavaScript library that allows developers to build quick and beautiful user-interfaces. In short, React.js is a toolkit for building user interfaces. Developed by Facebook in 2011, the JavaScript framework has gone through a myriad of upgrades that have strengthened the platform and improved its functionalities.
React allows developers to build optimized user interfaces that can be quickly changed and tested, all without having to write a lot of code.
The framework organizes HTML elements into components, generating HTML for the application it consumes. This is done in an intuitive way, so that it can be integrated with a static site generator or built into single-page applications.
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.
What is Gatsby.js?
According to Gatsby.org: "Gatsby is a free and open-source framework based on React that helps developers build blazing fast websites and apps".
Benefits of Gatsby.js
Blazing Fast Sites
Gatsby's speed relies on creating an HTML file with pre-rendered content for every page your website has. Therefore, when a user accesses a website, the browser accesses a pre-rendered page without JavaScript and then updates the page and loads JS code on an as-needed basis.
Extensive Open Source Ecosystem
Gatsby's popularity has resulted in an exponential increase in the size of its ecosystem. Gatsby's robust API hooks give developers the tools they need to extend Gatsby, be it customizing, loading data into it, or adding third-party tools.
JAMstack-ready
Gatsby is just perfect for JAMstack builds because it's very easy to install and integrate with. For content creation, users can integrate Gatsby with a headless CMS like Agility CMS and act as a static site generator that delivers markup text through APIs.
App-like Experience for Websites
Gatsby gives users an experience similar to a progressive web app with little to no reloads between pages using gatsby-link instead of hyperlinks, making pages load thanks to lazy-loading images and code-splitting smoothly.
GraphQL-based Data Normalization
Gatsby leverages GraphQL to access and normalize data, including remote APIs, headless CMSs, databases, Markup files, and image assets, safeguarding the user experience by loading only what needs to be loaded to render the page and thus simplifying maintenance.
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:
How to build a website with Gatsby.js
Easy! Start with Agility CMS Gatsby Blog Starter!
Gatsby is one of the most exciting technologies on the internet today, and Agility CMS goes great with it!
This template gets you off and running with a simple blog with additional content on a home page. Now it's up to you to take it to the next level, personalizing it with your content.
You don't have to stop there, either. Use this as starting point to build a fully featured website. When you're ready, share your creation with us - we'd love to hear about your work!
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.
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
- Check out our Help Center Docs
- Case Study: Agility CMS Case Study: A simple and effective Gatsby website for "Flow With Victoria
