Introduction & Setup
Why Astro, the islands architecture, MPA vs SPA, ship less JS, your first page. Start →
Astro for React Developers
You already know components, props, and JSX. This course maps it all to Astro — its server-first .astro components, the islands architecture, and content collections — and shows you how to keep using your React components along the way.
What you’ll learn
Section titled “What you’ll learn”.astro Components
Frontmatter that runs on the server, Astro.props, slots, expressions — vs JSX. Build →
Islands & Using React
Drop your React components in and hydrate with client: directives — partial vs full-app hydration. Hydrate →
Routing & Layouts
File-based routing, dynamic routes, layouts — vs react-router/Next. Route →
Content & Data
Fetch in frontmatter at build time, content collections — vs getServerSideProps/useEffect. Load data →
Styling
Scoped styles, global styles, CSS variables, Tailwind — vs CSS modules/styled-components. Style →
Tooling, Testing & Deployment
The astro CLI, integrations, astro check, static vs SSR, deploy — vs the Next toolchain. Ship it →
Micro-Frontends with Astro
Compose independently-built UIs — islands across frameworks, build-time vs run-time integration, and independent deploys. Compose →
How this course works
Section titled “How this course works”Comparison-first
Every concept starts from the React you know, then shows the Astro way — and flags the differences.
Real runnable Astro
Examples open in StackBlitz as a real, runnable Astro project — one click, no local setup.
Quizzes & progress
Check your understanding after each lesson; your progress is saved locally.
Bilingual
Available in English and ไทย — switch anytime from the top bar.