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.
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.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.
- 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: https://hello-joshua.netlify.com/posts/gatsby-is-a-great-way-to-learn-react)
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.