Configure react

colebemis · Aug 20, 2023 · Aug 20, 2023 · Aug 20, 2023 · Aug 20, 2023 · Aug 20, 2023
commit af89f6b746428e97665d6b94d8ebd8777f1dbc41
@@ -1,8 +1,8 @@
 import { defineConfig } from 'astro/config';
-
-import tailwind from "@astrojs/tailwind";
+import tailwind from '@astrojs/tailwind';
+import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
-});
+  integrations: [tailwind(), react()],
+});
@@ -8,8 +8,13 @@
     "preview": "astro preview"
   },
   "dependencies": {
+    "@astrojs/react": "^2.3.2",
     "@astrojs/tailwind": "^4.0.0",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "astro": "^2.10.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.3"
   }
 }
@@ -0,0 +1,3 @@
+export function Button(props: React.ComponentPropsWithoutRef<'button'>) {
+  return <button className="bg-emerald-300" {...props} />;
+}
@@ -1,4 +1,5 @@
 ---
+import {Button} from '../components/Button'
 // Welcome to Astro! Everything between these triple-dash code fences
 // is your "component frontmatter". It never runs in the browser.
 console.log('This runs in your terminal, not the browser!');
@@ -9,5 +10,6 @@ console.log('This runs in your terminal, not the browser!');
 <html>
   <body>
     <h1 class="text-orange-600">Hello, World!</h1>
+    <Button>Click me</Button>
   </body>
 </html>
@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}