Setup React and JSX

babel.config.json

@@ -8,6 +8,6 @@
       }
     ],
     "@babel/typescript",
-    "@babel/preset-react"
+    "@babel/react"
   ]
 }

src/app.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const App = () => <p>Hallo, hier ist alles schön :)</p>;
+
+export default App;

src/index.tsx

@@ -0,0 +1,8 @@
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./app";
+
+ReactDOM.render(<App />, document.getElementById("root"));

tsconfig.json

@@ -1,4 +1,7 @@
 {
+  "compilerOptions": {
+    "jsx": "react"
+  },
   "compiler": {
     "jsx": "react",
     "noImplicitAny": false,

webpack.config.js

@@ -1,39 +1,39 @@
-const path = require('path');
+const path = require("path");
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const getPath = (file) => {
-  return path.resolve(__dirname, 'src', file);
+  return path.resolve(__dirname, "src", file);
 };
 
 module.exports = () => {
   return {
-    target: 'web',
-    devtool: 'eval-source-map',
-    entry: getPath('index.jsx'),
+    target: "web",
+    devtool: "eval-source-map",
+    entry: getPath("index.tsx"),
     resolve: {
-      extensions: ['.js', '.jsx'],
+      extensions: [".js", ".ts", ".tsx"],
     },
     module: {
       rules: [
         {
-          test: /\.jsx?/,
+          test: /\.tsx?/,
           exclude: /node_modules/,
           use: [
             {
-              loader: 'babel-loader',
+              loader: "babel-loader",
             },
             {
-              loader: 'eslint-loader',
+              loader: "eslint-loader",
             },
           ],
         },
       ],
     },
     plugins: [
       new HtmlWebpackPlugin({
-        filename: 'index.html',
-        template: getPath('index.html'),
+        filename: "index.html",
+        template: getPath("index.html"),
       }),
     ],
     devServer: {