如何在没有 create-react-app 的情况下使用 Material-UI

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.我的目标是在不使用 create-react-app 的情况下使用 Material-UI，因为后者抽象了太多东西，我无法学习这些东西。 All instruction I found are unfortunately entirely based on create-react-app.不幸的是，我发现的所有指令都完全基于 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.首先，我只想显示一个简单的 Material-UI 按钮。

For this I used the most minimalistic React-"Hello World" example from reactjs.org and added the Material-UI UMD in the following way:为此，我使用了 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>

I'm having trouble importing the Button from material-ui.development.js and then rendering this Button.我无法从 material-ui.development.js 导入 Button，然后渲染此 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.我在代码的不同位置尝试了不同的 import 和 require() 表达式，但这更像是一次尝试和错误，而不是真正了解什么是必要的。

I hope someone can help me out here.我希望有人可以在这里帮助我。

Answer 1

This touches a number of topics.这涉及到很多话题。 Your script file contains a module , in this case the module function is a IIFE .您的脚本文件包含一个模块，在这种情况下，模块 function 是一个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. global是作为this传入的 function 参数，而factory是另一个 function 参数，它本身就是 function。 this points to an object, which in this case is window . this指向 object，在本例中为window 。 So what you have access to is window.MaterialUI .因此，您可以访问的是window.MaterialUI 。

You can omit the window for convenience when accessing it.为了方便访问，您可以省略window 。 Your Button component is available via MaterialUI.Buttton .您的Button组件可通过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.我想补充一点，没有一个基础概念是特定于 Material-UI 或 React 的，所以如果你想学习这些 CRA，恕我直言。

Answer 2

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>

Result结果

如何在没有 create-react-app 的情况下使用 Material-UI

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-02-11 01:33:42

解决方案2
0 2021-02-12 19:18:29

如何在没有 create-react-app 的情况下使用 Material-UI

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-02-11 01:33:42

解决方案2 0 2021-02-12 19:18:29

解决方案1
0 已采纳 2021-02-11 01:33:42

解决方案2
0 2021-02-12 19:18:29