How to use React and material-ui with flask backend?

I am a beginner with react. I was just trying to make a web app with flask backend and react frontend with material-ui but I was facing problems with setting it up.

What I did

I downloaded the React Scripts from here. Then the material-ui from CDN links available here and babel from here. I downloaded and self hosted them all as I am developing for a local network which needs to have offline support.

My code

index.html

<html>
    <head>
        <script src="/src/libs/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script src="/src/js/index.js" type="text/babel"></script>
</html>

index.js

import {React} from './src/libs/react.min.js';
import {ReactDOM} from './src/libs/react-dom.min.js';
import * as mui from './src/libs/material-ui.min.js';

ReactDOM.render(<mui.Switch />, document.getElementById('root'))

Its almost empty because I am just setting up things.

The error I am facing

Uncaught ReferenceError: require is not defined
    at <anonymous>:5:17
    at VH (babel.min.js:1)
    at a (babel.min.js:1)
    at s (babel.min.js:1)
    at XMLHttpRequest.HH.t.forEach.e.src.o.onreadystatechange (babel.min.js:1)

Now I don't know how do I get this require thing working with a python backend. Is there any other way of solving this problem? It doesn't matter even if all of the code has to be changed as its just the setup and no actual code.

Solution

Babel requires some configuration to work for JSX, and it doesn't support browsers in production. Instead, I'd recommend using create-react-app. All you need to do is create an app and copy your index.js into src, then you can use the build command to get static HTML/JS/CSS files for your Python backend.