Gatsby is a great way to learn React

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, beautiful, and reactive user interfaces.

Many developers love to use 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 within this HTML-like markup.

Think of Lego blocks

The idea of components for me is what makes using React so fun. Instead of worrying about your entire website or application, components let you break down your interface into smaller, simpler components.

These reusable components are also to have their own props, or properties, populating the component with custom data. For example, you could have a reusable <Button /> component, where each button could have its own text label, like "Read More" or "View All".

const Button = (props) => {
	return (
		<button>{props.label}</button>
	)
}

State Management

Each component also 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 or application were made, so it only re-renders specific pieces of, and not the entire DOM (Document Object Model).

Where React lacks

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 there are a few issues where create-react-app and React in general faces issues such as 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?

Along comes 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.

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

Benefits of Gatsby

• 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!