Learn how to migrate a create-react-app project to Gatsby!

Sign up for our newsletter to get notified when the course is launched and get a free preview

Mr Jam taking react on a road to Gatsby

"GatsbyJS can be a create-react-app replacement"

GatsbyJS and create-react-app are similar in that can help you set up an application and removes much of the configuration headache. However, GatsbyJS offers more like backed in performance optimizations and static rendering without the need for a server and a thriving ecosystem of plugins.

Why Migrating to GatsbyJS?

Webpack support
Hot Reloading
Static Rendering
Code and data splitting
SEO Friendly App
Plugins Support
Unified Data Layer

Zero config performance optimazations

GatsbyJS provides code and data splitting out-of-the-box. It loads your critical HTML and CSS, then prefetches resources for other pages. That way, clicking around feels so fast. Additionally, it offers things like:

  • gatsby-link uses an intersection observer to preload linked pages when they appear in the viewport, making them feel like they load instantly
  • gatsby-image creates optimized versions of your images in Different sizes, loading a smaller, optimized version of an image and replacing it with a higher resolution version when loading has finished. It also uses an intersection observer to cheaply lazy load images.

Server side rendering without a server

At build time, GatsbyJS takes all your react component with all the needed data and generates static HTML, JavaScript, and CSS files. Once the website is fully loaded it rehydrates it into a fully fledge React PWA

A unified Data layer using GraphQL

GatsbyJS unifies all data sources into one layer using GraphQL

A rich plugin ecosystem

With GatsbyJS's flexible plugin system, it lets you bring your data source. From anywhere like CMS, database, or filesystem and makes it queriable through GraphQL.

Who is this for (and not for)?

This course Guides you to port your existing create-react-app project to GatsbyJS by reusing as much code from the project as you can. It explains the difference between the two. The course also helps you to understand GatsbyJS and how it works, so if you want to learn GatsbyJS, this course is for you. If this is your first working with React in general, then this course might not be a good fit for you.

  • Front End devs looking to understand the JAMstack
  • JS Developers looking to advance in their career
  • Wordpress Developer moving to GatsbyJS
  • Anyone who wants to get better at GatsbyJS and React

What you'll learn?

This course will guide through the process of porting a create-react-app to GatsbyJS. It will cover topics like.

  • Difference in project structure between create-react-app and GatsbyJS
  • Use GatsbyJS plugins to inject static data into your app instead of calling service directly
  • Transform React Route Components to GatsbyJS pages
  • How to use React features like Context and hooks with GatsbyJS
  • How to dynamically load data at runtime

Videos && Modules

The basic

  • Bootstrap the simplest GatsbyJS project
  • Port React component to GatsbyJS pages
  • Combine mutiple data sources using plugins
  • Routing in GatsbyJS
  • Handling state in GatsbyJS
  • Handling Environment Variables in GatsbyJS
  • Advanced customizations

Putting everything together

  • Load Data using GraphQL
  • Wrap all GatsbyJS Component in a Context
  • Use React hooks with GatsbyJS
  • Load dynamic graphql data in GatsbyJS
  • Use GatsbyJS without GraphQL
  • Build an deploy a GatsbyJS project

Learn how to migrate a create-react-app project to Gatsby!

Sign up for our newsletter to get notified when the course is launched and get a free preview

Mr Jam taking react on a road to Gatsby

Who teaches this?

Khaled Garbaya's avatar

Hi my name is Khaled Garbaya I am a long-time contributor to GatsbyJS. I love the framework and been working with it since pre v1 version. I work on a variety of projects with different frameworks and environments, not only on the frontend and browsers but also on the server-side, command-line tools, and other environments capable of running JavaScript. I love to share my knowledge through e-books and videos. you can check out some of my work here