Implementation of tsx support for react

Implementation of tsx support for react

src/Web/ClientApp-React/package.json

@@ -29,6 +29,8 @@
     "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
     "ajv": "^8.12.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.39.0",

src/Web/ClientApp-React/src/components/Home.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import SampleComponent from './SampleComponent';
 
 export class Home extends Component {
   static displayName = Home.name;
@@ -13,7 +14,7 @@ export class Home extends Component {
           <li><a href='https://facebook.github.io/react/'>React</a> for client-side code</li>
           <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
         </ul>
-        <p>To help you get started, we have also set up:</p>
+        <SampleComponent title={"To help you get started, we have also set up:"} />
         <ul>
           <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
           <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>

src/Web/ClientApp-React/src/components/SampleComponent.tsx

@@ -0,0 +1,12 @@
+// SampleComponent.tsx
+import React from "react";
+
+interface SampleComponentProps {
+  title: string;
+}
+
+const SampleComponent: React.FC<SampleComponentProps> = ({ title }) => (
+  <p>{title}</p>
+);
+
+export default SampleComponent;

src/Web/ClientApp-React/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}