react-ts: make sure react-scripts works, use new jsx runtime (#13)

react-ts/package.json

@@ -2,19 +2,23 @@
   "name": "react-ts",
   "version": "0.0.0",
   "private": true,
-  "dependencies": {
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
+  "dependencies": {
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "devDependencies": {
-    "react-scripts": "latest"
-  }
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.9.5"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

react-ts/src/App.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react';
+import { FC } from 'react';
+
 import './style.css';
 
-export default function App() {
+export const App: FC<{ name: string }> = ({ name }) => {
   return (
     <div>
-      <h1>Hello StackBlitz!</h1>
+      <h1>Hello {name}!</h1>
       <p>Start editing to see some magic happen :)</p>
     </div>
   );
-}
+};

react-ts/src/index.tsx

@@ -1,14 +1,12 @@
-import * as React from 'react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './App';
+import { App } from './App';
 
-const rootElement = document.getElementById('root');
-const root = createRoot(rootElement);
+const root = createRoot(document.getElementById('root'));
 
 root.render(
   <StrictMode>
-    <App />
+    <App name="StackBlitz" />
   </StrictMode>
 );

react-ts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ES2022"],
+    "moduleResolution": "node",
+    "target": "ES2022"
+  }
+}