Elevating React Web Development with Gatsby 4: Build performant, accessible, interactive web applications with React and Gatsby.js
- Length: 289 pages
- Edition: 1
- Language: English
- Publisher: Packt Publishing
- Publication Date: 2022-02-09
- ISBN-10: 1800209096
- ISBN-13: 9781800209091
- Sales Rank: #0 (See Top 100 Books)
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.
Elevating React Web Development with Gatsby Contributors About the author About the reviewer Preface Who this book is for What this book covers To get the most out of this book Download the example code files Download the color images Conventions used Get in touch 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 Why subscribe? Other Books You May Enjoy Packt is searching for authors like you
Donate to keep this site alive
How to download source code?
1. Go to: https://github.com/PacktPublishing
2. In the Find a repository… box, search the book title: Elevating React Web Development with Gatsby 4: Build performant, accessible, interactive web applications with React and Gatsby.js
, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.