Подключил React для создания ui страницы

cp/.babelrc

+{
+  "presets": [
+    "es2015", "stage-0", "react"
+  ]
+}
\ No newline at end of file

cp/javascript/src/typos.js

-

cp/javascript/src/typos.jsx

+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+    <h1>Hello, world!</h1>,
+    document.getElementById('root')
+);
\ No newline at end of file

cp/package.json

@@ -7,12 +7,17 @@
   "dependencies": {
     "free-jqgrid": "^4.15.3",
     "jquery": "^3.3.1",
-    "jquery-ui": "^1.12.1"
+    "jquery-ui": "^1.12.1",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+
     "webpack": "^4.4.1",
     "webpack-cli": "^2.0.13"
   },

cp/webpack.config.js

 const path = require("path");
+const webpack = require("webpack");
 
 module.exports = {
     entry: [
         // Application code
-        "./javascript/src/typos.js",
+        "./javascript/src/typos.jsx",
     ],
 
     output: {
@@ -12,21 +13,17 @@ module.exports = {
     },
 
     mode: "development",
-};
-
-module.loaders = [
-    {
-        loader: "babel-loader",
 
-        include: [
-            path.resolve(__dirname, "javascript/src")
-        ],
+    module: {
+        rules: [
+            {
+                loader: "babel-loader",
 
-        test: "/\.js$/",
+                exclude: /node_modules/,
 
-        query: {
-            presets: ['es2015']
-        }
+                test: /\.js[x]?$/,
+            }
+        ]
     }
-];
+};