How to use Material-UI without create-react-app
Question
my goal is to use Material-UI without using create-react-app as the latter abstracts too much away for me to learn these things. All instruction I found are unfortunately entirely based on create-react-app.
I want to generate the most minimalistic setup to achieve this, mostly for learning purpose. To start with, I want to display just a simple Material-UI Button.
For this I used the most minimalistic React-"Hello World" example from reactjs.org and added the Material-UI UMD in the following way:
<!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'm having trouble importing the Button from material-ui.development.js and then rendering this Button.
I've tried different import and require() expressions at different places in the code but it's more a try and error instead of a real understanding of what is necessary.
I hope someone can help me out here.
2 answers
solution1
0 ACCPTED 2021-02-11 01:33:42
This touches a number of topics. Your script file contains a module , in this case the module function is a IIFE . It's not exactly trivial code, but the key part is this:
factory(global.MaterialUI = {}, global.React, global.ReactDOM)
global is a function parameter passed in as this and factory is another function parameter that is a function itself. this points to an object, which in this case is window . So what you have access to is window.MaterialUI .
You can omit the window for convenience when accessing it. Your Button component is available via MaterialUI.Buttton . If you want to use multiple components, you may want to use an destructuring assignment:
const { Button, TextField, Typography } = MaterialUI
I'd like to add that none of the underlying concepts are specific to Material-UI or React, so if you want to learn those CRA is perfectly fine imho.
solution2
0 2021-02-12 19:18:29
Thanks hotpink for your explanations. That solved it, In my particular setting described in the initial question: the code looks like as follows:
<!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(
<MaterialUI.Button variant="contained" color="primary">
Thanks hotpink
</MaterialUI.Button>,
document.getElementById('root')
);
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.