Fix jsx setup

Author: sophiiistika

babel.config.json

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

src/app.tsx

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

src/index.tsx

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

tsconfig.json

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

webpack.config.js

@@ -2,12 +2,12 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-  mode: 'development',
-  target: 'web',
-  devtool: 'eval-source-map',
-  entry: './src/index.tsx',
+  mode: "development",
+  target: "web",
+  devtool: "eval-source-map",
+  entry: "./src/index.tsx",
   resolve: {
-    extensions: ['.ts', '.tsx']
+    extensions: [".js", ".ts", ".tsx"],
   },
   module: {
     rules: [
@@ -16,19 +16,16 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: 'babel-loader'
+            loader: "babel-loader",
           },
-          {
-            loader: 'ts-loader'
-          },
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   },
   plugins: [
     new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: path.resolve(__dirname, 'src', 'index.html')
-    })
-  ]
+      filename: "index.html",
+      template: path.resolve(__dirname, "src", "index.html"),
+    }),
+  ],
 };