Learn how to migrate a create-react-app project 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?
| Gatsby | Create-React-App | |
|---|---|---|
| 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.
- Setup a Gatsby project
- Create static pages in Gatsby
- Create static pages programatically in Gatsby
- Create a Layout component in Gatsby
- Create client side routes in Gatsby
- Explaining Gatsby plugins
- Breaking down CRA routes into pages(static and client side)
- Deconstructing Content transformation in a CRA app and map it to Gatsby plugins
- Break down the content part in a CRA
- Add a CSS preprocessor in Gatsby
- Use React Context with Gatsby
- Gatsby gotcha
Videos && Modules
Main Modules
- Bootstrap the simplest GatsbyJS project
- Create a Static page in Gatsby
- Combine mutiple data sources using plugins
- Create static pages programatically in Gatsby
- Create client only pages in Gatsby
- Create a Layout component in Gatsby
- Add a plugin to a Gatsby
- How does a source plugin work
- How does a transformer plugin work
- Extract Static pages from a CRA project
- Extract Client side pages from a CRA project
- Transform data at build instead of runtime using a transformer plugin
- Load content at build time using a source plugin
- Load dynamic content at runtime in Gatsby
- Add a CSS preprocessor in Gatsby
- Use React Context in Gatsby
- Fix the Context mounting issue in Gatsby
- Fix the window object issue in Gatsby
- Optimize images using gatsby-transformer-sharp and gatsby-images
- Build and serve the production ready project locally
- Deploy a Gatsby project to Netlify
Bonus Content
- Add authentication in Gatsby
- Use Apollo GraphQL in Gatsby
- Trigger build on content change
- Use Gatsby cloud preview feature
- Use Gatsby cloud for incremental build
Learn how to migrate a create-react-app project to Gatsby!
Who teaches this?
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