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

Description

Learn how to create SEO-friendly, powerful websites using Gatsby by harnessing the power of React Key FeaturesUnderstand how to use Gatsby to build, test, and deploy an end-to-end website and manage SEOBuild reusable templates to streamline your workflowsCreate plugins, add authentication, and work with real-time dataBook 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 learnUnderstand what GatsbyJS is, where it excels, and how to use itStructure and build a GatsbyJS site with confidenceElevate your site with an industry-standard approach to stylingConfigure your GatsbyJS projects with search engine optimization to improve their rankingGet to grips with advanced GatsbyJS concepts to create powerful and dynamic sitesSupercharge your site with translations for a global audienceDiscover how to use third-party services that provide interactivity to usersWho 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 ContentsAn Overview of Gatsby.js for the UninitiatedStyling Choices and Creating Reusable LayoutsSourcing and Querying Data (from Anywhere!)Creating Reusable TemplatesWorking with ImagesImproving Your Site’s Search Engine OptimisationTesting and Auditing Your SiteWeb Analytics and Performance MonitoringDeployment and HostingCreating Gatsby PluginsCreating Authenticated ExperiencesUsing Real Time DataInternationalization and Localization 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