React & Gatsby Learning Series

September 9th, 2025

Introduction

After years of building Angular applications, I decided to explore React. What I discovered wasn’t just another framework—it was a completely different way of thinking about user interfaces. If you’re an Angular developer curious about React, you’ll find that while both frameworks solve similar problems, the mental models behind them are surprisingly different.

This blog series is designed specifically for Angular developers transitioning into React and Gatsby. We’ll explore React fundamentals, advanced concepts, and eventually move into Gatsby for static site generation. Along the way, we’ll consistently compare React with Angular (and Gatsby with Angular’s Scully) so you can anchor new concepts to familiar ones.

By the end of this series, you’ll not only understand React and Gatsby—you’ll also be able to build complete applications with confidence.

Why This Series?

  • Angular to React: Angular provides a full-featured, opinionated ecosystem. React, by contrast, is lightweight, flexible, and focused on the UI layer. Understanding this philosophical difference is the first hurdle.

  • Angular Developers in Mind: We’ll consistently connect React concepts back to Angular patterns: templates vs JSX, services vs Context, lifecycle hooks vs useEffect, Angular Router vs React Router, etc.

  • Project-Driven Learning: Each post includes a hands-on project, so you’ll immediately apply what you learn. By the end, you’ll have built a fully functional Gatsby blog site.

  • Skill Progression: We’ll start from beginner-friendly fundamentals and gradually scale up to advanced patterns, performance optimizations, and deployment strategies.

What You’ll Learn (Series Outline)

The series is divided into five parts + bonus content:

  1. Foundation Series – React Fundamentals

  2. Advanced React Concepts

    • Performance optimization (memoization, lazy loading)

    • Custom hooks and reusable logic

    • Forms and complex data handling

  3. Introduction to Gatsby

    • What Gatsby is and when to use it

    • Setting up your first Gatsby site

    • GraphQL data layer deep dive

  4. Building with Gatsby

    • Pages, layouts, and SEO

    • Markdown/MDX content

    • Image and asset optimization

    • Styling strategies (Tailwind, styled-components, etc.)

  5. Advanced Gatsby Features

    • Client-side dynamic features

    • Plugins and customization

    • SEO, analytics, and performance

    • Deployment to Netlify/Vercel

  6. Bonus Content

    • Migrating from Angular’s Scully to Gatsby

    • Advanced Gatsby architecture and scaling patterns

Who Should Follow This Series?

Angular developers curious about React and Gatsby.

Intermediate front-end developers ready to expand beyond Angular.

Anyone who wants to understand how modern static site generators (like Gatsby) fit into the React ecosystem.

How to Use This Series

Each post builds on the previous one. If you’re already comfortable with React basics, you can skip ahead to Gatsby. But if you’re completely new to React, I recommend starting from the very beginning.

Expect to spend 5–6 months if you follow the weekly cadence. By the end, you’ll not only have a working Gatsby blog, but you’ll also be fluent in React patterns that will serve you in any front-end role.

Next Up

In the next post, we’ll dive into Part 1: From Angular to React—Understanding the Mental Model Shift. We’ll compare Angular’s prescriptive ecosystem with React’s flexible approach, and we’ll build a simple counter component in both frameworks to highlight the differences.

Note: This post will serve as the hub for the entire series. As new parts go live, I’ll add links here so you can easily find everything in one place.