4 files changed, 18 insertions, 3 deletions
diff --git a/examples/framework-react/.vscode/extensions.json b/examples/framework-react/.vscode/extensions.json
new file mode 100644
index 000000000..22a15055d
--- /dev/null
+++ b/examples/framework-react/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/examples/framework-react/.vscode/launch.json b/examples/framework-react/.vscode/launch.json
new file mode 100644
index 000000000..d64220976
--- /dev/null
+++ b/examples/framework-react/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
diff --git a/examples/framework-react/src/components/Counter.jsx b/examples/framework-react/src/components/Counter.tsx
index 97ddf34c7..6321469d3 100644
--- a/examples/framework-react/src/components/Counter.jsx
+++ b/examples/framework-react/src/components/Counter.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import './Counter.css';
 
-export default function Counter({ children, count: initialCount }) {
+export default function Counter({ children, count: initialCount }: { children: JSX.Element, count: number }) {
 	const [count, setCount] = useState(initialCount);
 	const add = () => setCount((i) => i + 1);
 	const subtract = () => setCount((i) => i - 1);
diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro
index 8f3142393..61806949a 100644
--- a/examples/framework-react/src/pages/index.astro
+++ b/examples/framework-react/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 // Component Imports
-import Counter from "../components/Counter.jsx";
+import Counter from "../components/Counter";
 const someProps = {
 	count: 0,
 };