From bc288717c78b3fd3e67d25b2cecb93cc1da77d0c Mon Sep 17 00:00:00 2001
From: Alex <116060421+n0one42@users.noreply.github.com>
Date: Mon, 25 Mar 2024 10:43:45 +0100
Subject: [PATCH] Implementation of tsx support for react

Implementation of tsx support for react
---
 src/Web/ClientApp-React/package.json          |  2 ++
 .../ClientApp-React/src/components/Home.js    |  3 ++-
 .../src/components/SampleComponent.tsx        | 12 ++++++++++++
 src/Web/ClientApp-React/tsconfig.json         | 19 +++++++++++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/Web/ClientApp-React/src/components/SampleComponent.tsx
 create mode 100644 src/Web/ClientApp-React/tsconfig.json

diff --git a/src/Web/ClientApp-React/package.json b/src/Web/ClientApp-React/package.json
index dbbfaea81..44f8e26cc 100644
--- a/src/Web/ClientApp-React/package.json
+++ b/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",
diff --git a/src/Web/ClientApp-React/src/components/Home.js b/src/Web/ClientApp-React/src/components/Home.js
index 26fdbc3fc..33736f78a 100644
--- a/src/Web/ClientApp-React/src/components/Home.js
+++ b/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>
diff --git a/src/Web/ClientApp-React/src/components/SampleComponent.tsx b/src/Web/ClientApp-React/src/components/SampleComponent.tsx
new file mode 100644
index 000000000..96a07679f
--- /dev/null
+++ b/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;
diff --git a/src/Web/ClientApp-React/tsconfig.json b/src/Web/ClientApp-React/tsconfig.json
new file mode 100644
index 000000000..d59fb3a8c
--- /dev/null
+++ b/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"]
+}