feat: Add complete React tutorial module and SQL database learning path

astro.config.ts

@@ -12,6 +12,8 @@ import { rehypeTasklistEnhancer } from './config/plugins/rehype-tasklist-enhance
 import { remarkFallbackLang } from './config/plugins/remark-fallback-lang';
 
 import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
@@ -97,6 +99,8 @@ export default defineConfig({
 			// Disable the default base styles:
 			applyBaseStyles: false,
 		}),
+		mdx(),
+		react(),
 	],
 	markdown: {
 		// Override with our own config

astro.sidebar.ts

@@ -172,6 +172,104 @@ export const sidebar = [
 						],
 						collapsed: true,
 					},
+					{
+						label: 'React Intro',
+						items: [
+							{
+								label: 'Intro',
+								link: 'guides/web/react-intro/intro/',
+							},
+							{
+								label: 'Setup & Tooling',
+								link: 'guides/web/react-intro/setup/',
+							},
+							{
+								label: 'JSX & Rendering',
+								link: 'guides/web/react-intro/jsx/',
+							},
+							{
+								label: 'Components & Props',
+								link: 'guides/web/react-intro/components/',
+							},
+							{
+								label: 'Props Deep Dive',
+								link: 'guides/web/react-intro/props-deep-dive/',
+							},
+							{
+								label: 'Events & Interactivity',
+								link: 'guides/web/react-intro/events/',
+							},
+							{
+								label: 'State & Hooks',
+								link: 'guides/web/react-intro/state-and-hooks/',
+							},
+							{
+								label: 'useEffect Guide',
+								link: 'guides/web/react-intro/useeffect-guide/',
+							},
+							{
+								label: 'useRef & DOM access',
+								link: 'guides/web/react-intro/use-ref/',
+							},
+							{
+								label: 'Saving data (localStorage)',
+								link: 'guides/web/react-intro/local-storage/',
+							},
+							{
+								label: 'Conditional Rendering & Lists',
+								link: 'guides/web/react-intro/conditional-lists/',
+							},
+							{
+								label: 'Animations & Transitions',
+								link: 'guides/web/react-intro/animations/',
+							},
+							{
+								label: 'Routing',
+								link: 'guides/web/react-intro/routing/',
+							},
+							{
+								label: 'Styling React Components',
+								link: 'guides/web/react-intro/styling/',
+							},
+							{
+								label: 'Build Your First App!',
+								link: 'guides/web/react-intro/first-project/',
+							},
+							{
+								label: 'Forms & Validation',
+								link: 'guides/web/react-intro/forms/',
+							},
+							{
+								label: 'Fetching Data & APIs',
+								link: 'guides/web/react-intro/fetching-data/',
+							},
+							{
+								label: 'Accessibility basics',
+								link: 'guides/web/react-intro/accessibility/',
+							},
+							{
+								label: 'State Management',
+								link: 'guides/web/react-intro/state-management/',
+							},
+							{
+								label: 'Fun Component Patterns',
+								link: 'guides/web/react-intro/component-patterns/',
+							},
+							{
+								label: 'Debugging & DevTools',
+								link: 'guides/web/react-intro/debugging/',
+							},
+							{
+								label: 'Testing & Deployment',
+								link: 'guides/web/react-intro/testing-deploy/',
+							},
+							{
+								label: 'React Tips & Tricks',
+								link: 'guides/web/react-intro/tips-tricks/',
+							},
+						],
+						collapsed: true,
+					},
 				],
 			}),
 			group('guide.javascript', {

package.json

@@ -61,6 +61,8 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/cloudflare": "^12.0.0",
+    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/starlight": "^0.30.3",
     "@astrojs/starlight-tailwind": "^3.0.0",
@@ -69,6 +71,8 @@
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@62a858f",
     "canvas-confetti": "^1.6.0",
     "jsdoc-api": "^9.3.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",