Elevating React Web Development with Gatsby 4: Build performant, accessible, interactive web applications with React and Gatsby.js

✍ Scribed by Samuel Larsen-Disney

• Publisher: Packt Publishing - ebooks Account
• Year: 2022
• Tongue: English
• Leaves: 315
• Category: Library

✦ Synopsis

Learn how to create SEO-friendly, powerful 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 4 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 your 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 with 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.

Table of Contents

1. An Overview of Gatsby.js for the Uninitiated
2. Styling Choices and Creating Reusable Layouts
3. Sourcing and Querying Data (from Anywhere!)
4. Creating Reusable Templates
5. Working with Images
6. Improving Your Site’s Search Engine Optimisation
7. Testing and Auditing Your Site
8. Web Analytics and Performance Monitoring
9. Deployment and Hosting
10. Creating Gatsby Plugins
11. Creating Authenticated Experiences
12. Using Real Time Data
13. Internationalization and Localization

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Contributors
Table of Contents
Preface
Part 1: Getting Started
Chapter 1: An Overview of Gatsby.js for the Uninitiated
Technical requirements
A brief history of the static web
What is Gatsby?
Community
Sourcing content from anywhere
Building tooling you already know
Supercharging web performance
Gatsby use cases
Documentation sites
Online courses
SaaS products
Design agencies and photo-heavy sites
Gatsby's competitors
Setting up a project
Node.js version 14.15.0+
Gatsby command-line interface
Directory and package setup
Framework files and folders
Creating your first few pages
Summary
Chapter 2: Styling Choices and Creating Reusable Layouts
Technical requirements
Styling in Gatsby
Vanilla CSS
Sass
Tailwind (utility-first CSS framework)
CSS in JS
Picking a styling tool
Styling with CSS
Creating a wrapper component
Using gatsby-browser.js
Verifying our implementation
Styling with Sass
Styling with Tailwind.css
Styling with styled-components
Creating a reusable layout
Site header
Site footer
Layout component
Organization with atomic design
Summary
Chapter 3: Sourcing and Querying Data (from Anywhere!)
Technical requirements
Data in Gatsby
Introducing GraphQL
GraphQL for Gatsby
Using GraphiQL
Using constructed GraphQL queries
Sourcing data from local files
Site metadata
Markdown
MDX
Sourcing data from a Headless CMS
GraphCMS
Prismic
Summary
Chapter 4: Creating Reusable Templates
Technical requirements
Creating templates and programmatic page generation
Blog post template
Blog preview template
Tag page template
Search functionality
Summary
Chapter 5: Working with Images
Technical requirements
Images on the web
Images in Gatsby
The StaticImage component
The GatsbyImage component
Overriding the gatsby-plugin-image defaults
Sourcing images from CMS
Sourcing images from GraphCMS
Sourcing images from Prismic
Summary
Part 2: Going Live
Chapter 6: Improving Your Site's Search Engine Optimization
Technical requirements
Introducing SEO
On-page search engine optimization
Creating an SEO component
Exploring meta previews
Open Graph metadata
Twitter metadata
Merging tags
Validating tags
Learning about XML sitemaps
Hiding your site from search engines
Summary
Chapter 7: Testing and Auditing Your Site
Technical requirements
Exploring unit testing
Testing simple components
Testing the SEO component
Testing Gatsby page components
Adding Git hooks for tests
Auditing core web vitals
Using Chrome's lighthouse tool
Using the web-vitals JavaScript package
Summary
Chapter 8: Web Analytics and Performance Monitoring
Technical requirements
Introducing website analytics
Privacy
Implementing page analytics
Adding Google Analytics
Using Fathom Analytics
Monitoring the performance of your site
Using Sentry.io analytics
Summary
Chapter 9: Deployment and Hosting
Technical requirements
Understanding build types
Common build errors
Your pre-deployment checklist
Platforms for deploying hybrid builds
Deploying to Gatsby Cloud Hosting
Platforms for deploying static builds
Deploying to Netlify
Deploying to Render
Deploying to Firebase
Serving a Gatsby site with reduced user access
Summary
Part 3: Advanced Concepts
Chapter 10: Creating Gatsby Plugins
Technical requirements
Understanding Gatsby plugins
Introducing local plugin development
Debugging local plugins
Creating source plugins
Creating theme plugins
Contributing to the plugin ecosystem
Pre-publish checklist
Publishing a plugin
Summary
Chapter 11: Creating Authenticated Experiences
Technical requirements
Routing and authentication in React applications
Private routes
Authentication using client-only routes within Gatsby
Site-wide authentication using context within Gatsby
Summary
Chapter 12: Using Real-Time Data
Technical requirements
Introduction to web sockets
Socket.io in action
Live site visitor count
Gaining further insights with rooms
Summary
Chapter 13: Internationalization and Localization
Technical requirements
Understanding localization and internationalization
Implementing routes for internationalization
Page translations for programmatic pages
Providing locale translations for single-instance pages
Summary
Index
Other Books You May Enjoy