React installed inside Django's frontend app

Author: Toruitas

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

djsr/frontend/src/components/App.js

@@ -0,0 +1,13 @@
+import React, { Component} from "react";
+
+class App extends Component{
+  render(){
+    return(
+      <div className="site">
+        <h1>Ahhh after 10,000 years I'm free. Time to conquer the Earth!</h1>
+      </div>
+    );
+  }
+}
+
+export default App;

djsr/frontend/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react'
+import {render} from 'react-dom'
+import App from './components/App';
+
+render(<App  />, document.getElementById('root'));

djsr/frontend/static/frontend/public/main.js

@@ -11,5 +11,6 @@
     <div id="root" class="content">
         This will be the base template.
     </div>
+<script type="text/javascript" src="{% static 'frontend/public/main.js' %}"></script>
 </body>
 </html>

djsr/frontend/templates/frontend/index.html

@@ -0,0 +1,24 @@
+{
+  "name": "django-jwt-react",
+  "version": "1.0.0",
+  "description": "To learn how to merge React and Django",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "test": "test"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.4"
+  },
+  "dependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

package-lock.json

@@ -0,0 +1,32 @@
+const path = require('path');
+
+module.exports = {
+    mode: "development",
+    entry: path.resolve(__dirname, 'djsr/frontend/src/index.js'),
+    output: {
+        // options related to how webpack emits results
+
+        // where compiled files go
+        path: path.resolve(__dirname, "djsr/frontend/static/frontend/public/"),
+
+        // 127.0.0.1/static/frontend/public/ where files are served from
+        publicPath: "/static/frontend/public/",
+        filename: 'main.js',  // the same one we import in index.html
+    },
+    module: {
+        // configuration regarding modules
+        rules: [
+            {
+                // regex test for js and jsx files
+                test: /\.(js|jsx)?$/,
+                // don't look in the node_modules/ folder
+                exclude: /node_modules/,
+                // for matching files, use the babel-loader
+                use: {
+                    loader: "babel-loader",
+                    options: {presets: ["@babel/env"]}
+                },
+            }
+        ],
+    },
+};