> Canonical URL: https://codingcat.dev/topic/react

# React Courses, Podcasts & Blog Posts | CodingCat.dev

🚀 Framework & UI Hub

# React.

React 19, Server Components, Actions & State Architecture

Explore CodingCat.dev hands-on courses, video lessons, podcast episodes, and technical deep-dive blog posts covering React: React 19, Server Components, Actions & State Architecture.

[Search All React Content](/search?q=React)![React official logo](/logos/tags/react-lockup-light.svg)![React official logo](/logos/tags/react-lockup-dark.svg)Official React Brand Lockup (7 Blog Posts · 4 Episodes)✏️ React Production Architecture Diagram✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]How React fits into a modern, type-safe full-stack production architecture on CodingCat.dev.AAA Contrast Verified

## React Courses.

[All Courses→](/courses)[![Remotion Skills: Teaching AI Agents to Build Videos the Right Way](https://cdn.sanity.io/images/hfh83o0w/production/0980e327798a7bfa3580457d05953c763b3ce650-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/remotion-skills-ai-agents)November 4, 2026[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/remotion-symbol-light.svg)![](/logos/tags/remotion-symbol-dark.svg)Remotion](/topic/remotion)

### [Remotion Skills: Teaching AI Agents to Build Videos the Right Way](/course/remotion-skills-ai-agents)

Install and customize remotion-dev/skills so Claude Code, Cursor, and Google Antigravity write deterministic, well-paced React video compositions on the first try.

[![Remotion in Production: Building & Rendering Videos with React](https://cdn.sanity.io/images/hfh83o0w/production/c0df1c0b840ce9f8a609f92c8aba7bc7959e3fe7-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/remotion-react-video-production)November 4, 2026[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/remotion-symbol-light.svg)![](/logos/tags/remotion-symbol-dark.svg)Remotion](/topic/remotion)

### [Remotion in Production: Building & Rendering Videos with React](/course/remotion-react-video-production)

Turn React components into frame-accurate 60fps MP4 videos. Master Remotion Compositions, Sequences, spring physics, dynamic data props, and headless rendering.

[![Flagship 1: Programmatic Video with React, Remotion & Agent Skills](https://cdn.sanity.io/images/hfh83o0w/production/6d8796fc4acf1eb630a1d99a3a7cbd4e5cde5cba-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/programmatic-video-react-remotion-agent-skills)November 4, 2026[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/remotion-symbol-light.svg)![](/logos/tags/remotion-symbol-dark.svg)Remotion](/topic/remotion)

### [Flagship 1: Programmatic Video with React, Remotion & Agent Skills](/course/programmatic-video-react-remotion-agent-skills)

Master declarative React video composition with Remotion and Remotion Skills. Learn how to teach AI coding agents to render multi-aspect-ratio 60fps product launch videos without timer drift.

[![The Odin Project 6: Modern React 19, State Architecture & TypeScript](https://cdn.sanity.io/images/hfh83o0w/production/638109d3eb8a895902f71dbb25851fa9c1ddbc69-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-modern-react-and-typescript)November 4, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [The Odin Project 6: Modern React 19, State Architecture & TypeScript](/course/odin-modern-react-and-typescript)

Master React 19 components, strict TypeScript props, derived state vs. useEffect traps, Server Actions, and island hydration in Astro.

## React Blog Posts.

Showing 7 of 7 blog postsFiltered: React[Open Full Topic Hub →](/topic/react)[![Zero-flicker Firestore SSR with React in Firebase: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/2de683dfd1881b7c8d680aa048f35c041f8d59c7-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2026-06-firestore-serialization-react)June 25, 2026[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)

### [Zero-flicker Firestore SSR with React in Firebase: Web Architecture & Implementation Guide](/post/firebase-2026-06-firestore-serialization-react)

Alex Patterson's hands-on web engineering breakdown of "Zero-flicker Firestore SSR with React" (2026-06-24). Learn how to wire up Firebase, Google Cloud, Web Dev, Next.js in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Live text search with Firestore pipelines and React in Firebase: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/ee10881baf1384db4f0d47907d47fb388f9399fd-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2026-05-react-firestore-search)May 29, 2026[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)

### [Live text search with Firestore pipelines and React in Firebase: Web Architecture & Implementation Guide](/post/firebase-2026-05-react-firestore-search)

Alex Patterson's hands-on web engineering breakdown of "Live text search with Firestore pipelines and React" (2026-05-28). Learn how to wire up Firebase, Google Cloud, Web Dev, React in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Simplify development with public ports in Firebase Studio: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/72164c39c3566bee05da269793d5ea1fdd1111c5-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2025-07-firebase-studio-public-ports)July 2, 2025[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)

### [Simplify development with public ports in Firebase Studio: Web Architecture & Implementation Guide](/post/firebase-2025-07-firebase-studio-public-ports)

Alex Patterson's hands-on web engineering breakdown of "Simplify development with public ports in Firebase Studio" (2025-07-01). Learn how to wire up Firebase, Google Cloud, Web Dev, React in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Angular and React Bindings for Data Connect in Firebase: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/bce6d819c0ba33e647e3f0b9a48ff6720fb942a5-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2025-04-dataconnect-web-bindings)April 30, 2025[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)

### [Angular and React Bindings for Data Connect in Firebase: Web Architecture & Implementation Guide](/post/firebase-2025-04-dataconnect-web-bindings)

Alex Patterson's hands-on web engineering breakdown of "Angular and React Bindings for Data Connect" (2025-04-29). Learn how to wire up Firebase, Google Cloud, Web Dev, SQL in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![React Native Support and Gemini Live APIs for Vertex AI in Firebase: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/6d5e80d838d8c1e52be3ef9a99576645a34603af-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2025-04-vertex-ai-updates)April 10, 2025[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)

### [React Native Support and Gemini Live APIs for Vertex AI in Firebase: Web Architecture & Implementation Guide](/post/firebase-2025-04-vertex-ai-updates)

Alex Patterson's hands-on web engineering breakdown of "React Native Support and Gemini Live APIs for Vertex AI in Firebase" (2025-04-09). Learn how to wire up Firebase, Google Cloud, Web Dev, AI in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![RxFire in ReactJS using Firebase Firestore and Authentication](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/14c859eab1d212d8e8bfa6c43bcfe965cec07a11-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/rxfire-in-reactjs-using-firebase-firestore-and-authentication)May 23, 2022[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [RxFire in ReactJS using Firebase Firestore and Authentication](/post/rxfire-in-reactjs-using-firebase-firestore-and-authentication)

Introduction to Create React App, Firebase, and RxFire. RxFire provides a set of observable creation methods. You simply call a function with some parameters to receive an RxJS observable. With that observable in hand you can use any operators provided by RxJS to transform the stream as you like.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Scully - Angular Static Site Generator](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/c27886125a50aba7e81aaf12868fe6b2616833fd-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/scully-io-angular-static-site-generator)December 17, 2019[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/vue-symbol-light.svg)![](/logos/tags/vue-symbol-dark.svg)Vue](/topic/vue)

### [Scully - Angular Static Site Generator](/post/scully-io-angular-static-site-generator)

In the Static Site Generator (SSG) space, ReactJs has Gatsby and VueJs has Vuepress/Gridsome. This left for a space to be filled for Angular, introducing Scully the Angular solution for SSG.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)

No matching blog posts found for this filter.

Try clearing the filter above to browse the full feed.

Loading more blog posts...✓ All blog posts loaded

## React Podcast Episodes.

Showing 4 of 4 episodesFiltered: React[Open Full Topic Hub →](/topic/react)[![WebDev Fundamentals | React, Angular, and Vue](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/cc72a566723af57a17e0ef0b6e7b1214ffb70c60-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/webdev-fundamentals-or-react-angular-and-vue)July 24, 2024[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [WebDev Fundamentals | React, Angular, and Vue](/podcast/webdev-fundamentals-or-react-angular-and-vue)

Dive into web development fundamentals with Corbin. Explore frameworks, APIs, and developer education. Purrfect for new and seasoned developers looking to expand their knowledge.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Corbin Crutchley](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f2988b9aabd6a19cc725bff5771b82202139fbc3-512x512.png?w=96&h=96&q=82&fit=max&auto=format)Corbin Crutchley](/guest/corbin-crutchley)[![Expo from a Web Developers View](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/343e2649e927e4e44c23609ae4ebaca2ad2b05d0-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/cwcc-1-expo-react-native)December 18, 2023[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)

### [Expo from a Web Developers View](/podcast/cwcc-1-expo-react-native)

Dive into the seamless world of cross-platform app development as we unravel the magic of React Native with Expo, combining power and simplicity for an unparalleled mobile experience.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Simon Grimm](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4317219ac0c1f192d953db4954ff03c3cdb07aae-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Simon Grimm](/guest/simon-grimm)[![Live Coding with the Amplify UI team](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/91553c5a23390467ddeff3b49326b8bffee905f1-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)](/podcast/cwcc-0-8-amplify-ui)August 19, 2022[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [Live Coding with the Amplify UI team](/podcast/cwcc-0-8-amplify-ui)

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Erik Hanchett](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a0343d7b1b3a9df7807a0affe5302caab16f0a28-352x352.jpg?w=96&h=96&q=82&fit=max&auto=format)Erik Hanchett](/guest/erik-hanchett)[![Scott Rees](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/7d0c8440a9c84d142b4014620a30824de6466cbf-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Scott Rees](/guest/scott-rees)[![Heather Buchel](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/024716658cd5ebec11629edc7b2c84e7a918a4da-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Heather Buchel](/guest/heather-buchel)[![MDX with Chris Biscard](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/de947917268702f04e1e8eff044d0c028fa755c1-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/1-5-mdx-with-chris-biscardi)January 1, 2021[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [MDX with Chris Biscard](/podcast/1-5-mdx-with-chris-biscardi)

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. We talk about MDX and the technology surrounding MDX with Chris Biscardi.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Chris Biscardi](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/c6a431a8d4d6ab16f573757400a70fba65389c13-400x400.png?w=96&h=96&q=82&fit=max&auto=format)Chris Biscardi](/guest/chris-biscardi)

No matching episodes found for this filter.

Try clearing the filter above to browse the full feed.

Loading more episodes...✓ All episodes loaded