我的目标是不使用Material-UI而不使用create-react-app，因为后者对我来说太多了，无法学习这些东西。不幸的是，我发现的所有指令都完全基于create-react-app。
我想生成最简单的设置来实现此目的，主要是出于学习目的。首先，我只想显示一个简单的Material-UI按钮。
为此，我使用了reactjs.org中最简约的React-“ Hello World”示例，并通过以下方式添加了Material-UI UMD：
<!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>
我无法从material-ui.development.js导入Button，然后呈现此Button。
我在代码的不同位置尝试了不同的import和require（）表达式，但这更多是一次尝试和错误，而不是真正了解什么是必需的。
我希望有人可以在这里帮助我。
这涉及许多主题。您的脚本文件包含一个模块，在这种情况下，模块功能为IIFE。这不是简单的代码，但关键部分是这样的：
factory(global.MaterialUI = {}, global.React, global.ReactDOM)
global是传入作为函数参数this和factory另外一个函数参数是一个函数本身。this指向一个对象，在这种情况下为window。因此，您可以访问的是window.MaterialUI。
window为了方便起见，可以省略它。您的Button组件可通过访问MaterialUI.Buttton。如果要使用多个组件，则可能要使用解构分配：
const { Button, TextField, Typography } = MaterialUI
我想补充一点，没有一个基础概念是特定于Material-UI或React的，因此，如果您想学习那些CRA，那是完美的恕我直言。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句