⚛️ Gatsby is a great way to learn React

November 03, 2019

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 other 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.

❓ So... What's Gatsby

According to Gatsby.org: "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! ex: about.js (About 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:

Let's Work Together 🤝

The key to growing your brand or business starts with it’s online presence. Let’s bring it to life with a fast, modern and responsive website with remarkable user experience. Here’s how I can help you out:

  • 🕸 Web Design & Development
  • 🛒 E-Commerce
  • 🖥 Domain & Hosting Setup
  • 🔒 SSL Certificates
  • ✉️ Email Setup
  • 🔍 Search Engine Optimization (SEO)