Hands-On Web Development with React and GatsbyJS

Hands-On Web Development with React and GatsbyJS

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 3h 54m | 863 MB

Create a super-fast web app with Gatsby and React, and deploy it with Netlify

GatsbyJS is a modern static site generator for React that comes with all the tools you need to build fast and highly performant applications. In this 3-hour course, you will learn how to use GatsbyJS by leveraging React skills you already possess.

First, we introduce you to GatsbyJS. Then you’ll set up your environment, clone a simple starter web app repo, and go over some of the fundamentals. You’ll learn how to use GraphQL to query data from flexible sources and take advantage of Gatsby’s templating functionality to programmatically generate pages. You will incorporate some plugins to improve performance and usability, optimize images, and finally deploy your site with Netlify.

By the end of the course, you will have a fully functioning, end-to-end blog web application and will feel confident about building applications with GatsbyJS.

Learn

  • Build an end-to-end web application that has all the tools you’ll need to track performance and scalability
  • Discover the power of Gatsby by diving into the features and functionality it comes with out of the box
  • Create intuitive and flexible queries to source data with GraphQL
  • Design an application that takes advantage of Gatsby’s templating functionality, allowing you to programmatically create pages
  • Optimize the performance of your web application by integrating Gatsby plugins and built-in features
  • Improve the usability of your web apps with Contentful and wire it into your Gatsby application
  • Deploy your static website with Netlify, the simplest way to deploy JavaScript apps
Table of Contents

Getting Started with GatsbyJS
1 The Course Overview
2 What is GatsbyJS
3 Installing Gatsby and Cloning Our Gatsby Project
4 An Overview of Typography and Styling
5 Using React Helmet to Add Metadata
6 Creating a New Page and Linking Between Pages

Querying Data with GraphQL
7 Introduction to GraphQL
8 Querying Data in Pages with GraphQL
9 Using the StaticQuery API
10 Updating SEO.js with the useStaticQuery Hook

Gatsby Plugins
11 Source Plugins
12 Transformer Plugins
13 Welcome to the Gatsby Plugin Library
14 Tracking Events with Plugins
15 Increasing Your Click Rates with Social Cards

Programmatically Creating Pages
16 Making Our First Post Markdown Files
17 Building Our Web Apps Post Template
18 Working with the createPage API in gatsby-node.js
19 Adding the onCreateNode API and Updating Our Query
20 Writing a Page Query in Our Template

Working with Images in Gatsby
21 Importing Files with GraphQL
22 Using Gatsby Image
23 Adding Images to Our Markdown Files
24 Adding a Video to Our App

Contentful В– Content Infrastructure
25 What is Contentful
26 Creating a Contentful Account
27 Connecting Gatsby to Contentful
28 Updating gatsby-node with a Contentful Query
29 Updating Our Queries

Deploying Your App
30 Deploying and Hosting
31 Creating a Netlify Account
32 Linking to Your Repository and Deploying Your Web App
33 Updating Your App
34 Upping the Game with Gatsby Preview