Add react imports

Author: thejfreitas

.babelrc

@@ -4,7 +4,7 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic"
+        "runtime": "automatic" 
       }
     ],
     "@babel/preset-typescript"

src/App.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Header from './components/Header';
 import Footer from './components/Footer';
 

src/components/Footer.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Footer = () => {
   return <footer>----</footer>;
 };

src/components/Header.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Header = () => {
   return <header>----</header>;
 };

src/index.tsx

@@ -1,6 +1,12 @@
+import React from 'react';
+
 import { createRoot } from 'react-dom/client';
 import App from './App';
 
-const root = createRoot(document.getElementById('root'));
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+  const root = createRoot(rootElement);
 
-root.render(<App />);
+  root.render(<App />);
+}

webpack.common.ts

@@ -5,7 +5,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 const config: Configuration = {
   entry: path.resolve(__dirname, './src/index.tsx'),
   resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['.tsx', '.ts', '.js', 'jsx'],
   },
   module: {
     rules: [