Typescript port.

Demo/React/HelloWorld.WebPack/package.json

@@ -11,19 +11,23 @@
     ]
   },
   "dependencies": {
-    "dotnetify": "^3.6.0",
+    "dotnetify": "file:dotnetify-4.0.0-DEV.tgz",
     "react": "~16.11.0",
     "react-dom": "~16.11.0"
   },
   "devDependencies": {
+    "@types/react": "~16.9.35",
+    "@types/react-dom": "~16.9.8",
     "aspnet-webpack": "^3.0.0",
     "babel-core": "~6.26.3",
     "babel-loader": "~7.1.4",
     "babel-preset-env": "~1.7.0",
     "babel-preset-react": "~6.24.1",
-    "webpack": "^4.18.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-middleware": "^3.3.0",
-    "webpack-hot-middleware": "^2.23.1"
+    "ts-loader": "~7.0.4",
+    "typescript": "~3.9.3",
+    "webpack": "~4.18.0",
+    "webpack-cli": "~3.3.11",
+    "webpack-dev-middleware": "~3.3.0",
+    "webpack-hot-middleware": "~2.23.1"
   }
 }

Demo/React/HelloWorld.WebPack/src/HelloWorld-withHook.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useConnect } from 'dotnetify';
+
+interface State {
+  Greetings: string;
+  ServerTime: string;
+}
+
+export const HelloWorld = () => {
+  const { state } = useConnect<State>('HelloWorld', this);
+  return (
+    <div>
+      <p>{state.Greetings}</p>
+      <p>Server time is: {state.ServerTime}</p>
+    </div>
+  );
+};

Demo/React/HelloWorld.WebPack/src/HelloWorld.js → Demo/React/HelloWorld.WebPack/src/HelloWorld.tsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 import dotnetify from 'dotnetify';
 
-export default class HelloWorld extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { Greetings: '', ServerTime: '' };
+interface State {
+  Greetings: string;
+  ServerTime: string;
+}
 
+export class HelloWorld extends React.Component<any, State> {
+  state: State = { Greetings: '', ServerTime: '' };
+
+  constructor(props: any) {
+    super(props);
     dotnetify.react.connect('HelloWorld', this);
   }
 

Demo/React/HelloWorld.WebPack/src/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { HelloWorld } from './HelloWorld-withHook';
+
+ReactDOM.render(<HelloWorld />, document.getElementById('App'));

Demo/React/HelloWorld.WebPack/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "noImplicitAny": false,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "jsx": "react",
+    "allowJs": true,
+    "declaration": true,
+    "declarationDir": "./typings",
+    "lib": ["dom", "es7"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
+}

Demo/React/HelloWorld.WebPack/webpack.config.js

@@ -2,15 +2,19 @@
 
 module.exports = {
   mode: 'development',
-  entry: { main: './src/index.js' },
+  entry: { main: './src/index' },
   output: {
     path: __dirname + '/wwwroot/dist',
-    publicPath: '/dist/'
+    publicPath: '/dist/',
   },
   resolve: {
-    modules: [ 'src', 'node_modules' ]
+    extensions: ['.tsx', '.ts', '.js'],
+    modules: ['src', 'node_modules'],
   },
   module: {
-    rules: [ { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ } ]
-  }
+    rules: [
+      { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
+      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
+    ],
+  },
 };