Elevating React Web Development with Gatsby

Practical guide to building performant, accessible, and interactive web apps with React and Gatsby.js 4

Samuel Larsen-Disney

• Publisher: Packt Publishing
• Year: 2022
• ISBN:
  9781800202962
• Edition: 1
• Topic: Diseño
• Subtopic: Diseño web

Learn how to create SEO-friendly, powerful static websites using Gatsby by harnessing the power of React

Key Features

• Understand how to use Gatsby to build, test, and deploy an end-to-end website and manage SEO
• Build reusable templates to streamline your workflows
• Create plugins, add authentication, and work with real-time data

Book Description

Gatsby is a powerful React static site generator that enables you to create lightning-fast web experiences. With the latest version of Gatsby, you can combine your static content with server-side rendered and deferred static content to create a fully rounded application. Elevating React Web Development with Gatsby provides a comprehensive introduction for anyone new to GatsbyJS and will help you get up to speed in no time.

Complete with hands-on tutorials and projects, this easy-to-follow guide starts by teaching you the core concepts of GatsbyJS. You'll then discover how to build performant, accessible, and scalable websites with the GatsbyJS framework. Once you've worked through the practical projects in the book, you'll be able to build anything from a personal website to large-scale applications with authentication and make your site rise through those SEO rankings.

By the end of this Gatsby development book, you'll be well-versed in every aspect of the tool's performance and accessibility and have learned how to build client websites that your users will love.

What you will learn

• Understand what GatsbyJS is, where it excels, and how to use it
• Structure and build a GatsbyJS site with confidence
• Elevate your site with an industry-standard approach to styling
• Configure your GatsbyJS projects with search engine optimization to improve their ranking
• Get to grips with advanced GatsbyJS concepts to create powerful and dynamic sites
• Supercharge your site with translations for a global audience
• Discover how to use third-party services that provide interactivity to users

Who this book is for

This book is for web developers who want to use GatsbyJS with React to build better static and dynamic client-side apps. Prior experience of working with React basics is necessary. Knowledge of Node.js fundamentals will help you to get the most out of this web development book.

Part 1: Getting Started

Upon finishing this part, you should have a clear understanding of what Gatsby.js is. You should also be at a point where you can comfortably develop basic sites in Gatsby.js on your local machine.

In this part, we include the following chapters:

• Chapter 1, An Overview of Gatsby.js for the Uninitiated
• Chapter 2, Styling Choices and Creating Reusable Layouts
• Chapter 3, Sourcing and Querying Data (from Anywhere!)
• Chapter 4, Creating Reusable Templates
• Chapter 5, Working with Images

Chapter 1: An Overview of Gatsby.js for the Uninitiated

In this book, we will take your existing React knowledge and supplement it with Gatsby.js (which we will refer to as Gatsby from now on) to create performant and accessible static sites. I hope to give you the tools you need to create better websites using Gatsby and get you to join the static site revolution. So, happy hacking!

This chapter starts with a brief historical look at the static web and why Gatsby was created. Then, we'll think about what Gatsby is and how it builds on React. Next, we'll go through some of the use cases of Gatsby and identify Gatsby's competitors. Finally, we'll set up a basic Gatsby project, having created our first few pages.

In this chapter, we will cover the following topics:

• A brief history of the static web
• What is Gatsby?
• Gatsby use cases
• Gatsby's competitors
• Setting up a project

Technical requirements

The code present in this chapter can be found at https://github.com/PacktPublishing/Elevating-React-Web-Development-with-Gatsby-4/tree/main/Chapter01.

A brief history of the static web

Static sites have been around nearly as long as the internet itself. They are the original blueprint for any website – HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). In the 1990s, HTML was the only publishing mechanism for the web. To get content on the internet, you would have to create a static HTML file and expose it to the internet via a server. If you wanted to modify one of your web pages, you would need to change its corresponding HTML file directly.

While learning HTML is part of primary education these days, back in the 1990s, it was a novel skill to understand and write the language. Creating or editing content was costly, as you would require someone with this skill set for every modification. Luckily, Content Management Systems (CMSes) (WordPress, Drupal, and so on) soon swooped in to allow non-technical users to control a webpage's design and content. It also gave users the ability to store and manage files via a user interface. CMSs continue to be utilized today with increasing popularity. The number of websites using a CMS has risen from 23.6% to 63% in the last decade. Over 75 million sites use WordPress today – that's 30% of the web!

At an almost identical pace, frontend frameworks and libraries have gained notoriety. Building single-page applications became commonplace. Today, the most dominant UI library in the JS world is Facebook's React.js, which is a small library with a handful of functions but some big ideas – a virtual DOM, JavaScript Syntax Extension (JSX), and componentization. There is no denying how much impact React has had on web development. In 2020, 80% of JS developers had used it, and 70% of JS developers said they would use it again.

Frontend frameworks have entirely changed how developers approach web development, giving them the flexibility to focus on functionality over content and drastically speeding up their workflows. But you're only as fast as your slowest team member. The clunky nature of CMS platforms was revealed when developers started to employ these frameworks and integrate them with CMSs. Traditional CMS workflows made use of databases and environments that frontend frameworks had removed from the equation. Combining this with CMS security and bottleneck issues led to the rebirth of static sites.

Kyle Mathews, the founder of Gatsby, was a catalyst for this trend. He noticed that the expectations on website accessibility and performance increased dramatically. He observed apps investing millions of dollars in user experience. There is no denying that the disparity between a 2005 and 2015 website was significant. In a competitive environment such as the web, you have to have a product that can stand out. Mathews took a step back, identified gaps in existing tooling, and asked what the ideal product might be. This research is what led him to create Gatsby.

It's almost poetic that we have gone full circle and returned to static content because there is no beating it when it comes to speed and performance.

What is Gatsby?

Gatsby is a free, open source static site generator that harnesses React. Static site generators are software applications that create static pages from a template or component and supplement them with content from a source. Static site generators are an alternative to a more traditional database-driven CMS, such as WordPress. In these conventional systems, content is managed and stored in a database. When the server receives a particular URL request, the server retrieves data from the database, mixes it with a template file, and generates an HTML page as its response. Generating HTML on demand can be a time-consumi...

Table of contents

• Elevating React Web Development with Gatsby
• Contributors
• Preface
• Part 1: Getting Started
• Chapter 1: An Overview of Gatsby.js for the Uninitiated
• Chapter 2: Styling Choices and Creating Reusable Layouts
• Chapter 3: Sourcing and Querying Data (from Anywhere!)
• Chapter 4: Creating Reusable Templates
• Chapter 5: Working with Images
• Part 2: Going Live
• Chapter 6: Improving Your Site's Search Engine Optimization
• Chapter 7: Testing and Auditing Your Site
• Chapter 8: Web Analytics and Performance Monitoring
• Chapter 9: Deployment and Hosting
• Part 3: Advanced Concepts
• Chapter 10: Creating Gatsby Plugins
• Chapter 11: Creating Authenticated Experiences
• Chapter 12: Using Real-Time Data
• Chapter 13: Internationalization and Localization
• Other Books You May Enjoy