My objective is to utilize Material-UI without relying on create-react-app, as I feel that it abstracts too much and hinders my learning process. Unfortunately, all the instructions I have come across are centered around create-react-app.
I am aiming to set up the most minimalistic configuration possible for this, particularly for educational purposes. To begin with, my goal is to simply display a basic Material-UI Button.
To achieve this, I started with the most stripped-down React "Hello World" example from reactjs.org and integrated the Material-UI UMD in the following manner:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<Button variant="contained" color="primary">
Hello World
</Button>,
document.getElementById('root')
);
</script>
</body>
</html>
I am encountering difficulties importing the Button from material-ui.development.js and then rendering it.
I have experimented with various import and require() expressions at different points in the code, but it has been more of trial and error rather than truly understanding what is required.
I am hopeful that someone can provide guidance on this matter.