In this course, learn to build blazing fast apps and websites with React using Gatsby, a static PWA (Progressive Web App) generator. Over 50% of people will abandon a mobile site if it takes more than 3 seconds to load. Unless you’re willing to give up half of your potential customers, performance is no longer optional on the modern web. Fortunately, there are a lot of tools available to help you build screaming fast websites. Unfortunately, there’s a frighteningly large number of performance considerations, and many of them are easy to get wrong.

• Learn how to leverage free, open source tools including Gatsby, React, and GraphQL to build high-performance websites.
• Deliver an excellent experience to your users by providing only critical assets on load and prefetching assets for subsequent page loads.
• Implement performance best practices, such as the PRPL pattern, lazy loading assets, and more.
• Learn to build and deploy blazing fast websites in the fraction of time.
• Create websites quickly with performance baked in.
• Deploy your sites for free in minutes with Netlify.

For windows users, go through the installation instructions for cross-env and add it to your package.json develop script.

1. npm install
2. npm run develop
3. Open http://localhost:8000/

Course Slides (hit the right/down arrow keys to progress through the slides)

1. Have a text editor installed, i.e. VSCode
2. Have the Gatsby CLI (gatsby-cli) installed globally by running: npm install -g gatsby-cli

Fixed code: See this commit to migrate to gatsby-plugin-mdx

Video: Jason installs this plugin in the Rendering Components in MDX video at 1 minute, 32 seconds.

View the step4/mdx-blog branch for final code for the section.

Fixed code: See this commit to configure gatsby-remark-images'

Video: Jason configures remark images in the Adding Optimized Images to Post at 1 minute, 49 seconds.

View the step6/blog-images branch for final code for the section.