Моя цель - использовать Material-UI без использования приложения create-response-app, поскольку последнее слишком сильно отвлекает меня, чтобы я мог изучить эти вещи. К сожалению, все инструкции, которые я нашел, полностью основаны на приложении create-react-app.

Я хочу создать максимально минималистичную настройку для достижения этой цели, в основном для целей обучения. Для начала я хочу отобразить простую кнопку Material-UI.

Для этого я использовал самый минималистичный пример React- "Hello World" с сайта reactjs.org и добавил UMD Material-UI следующим образом:


    <!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, а затем с визуализацией этой кнопки.

Я пробовал разные выражения import и require () в разных местах кода, но это скорее попытка и ошибка, чем реальное понимание того, что необходимо.

Я надеюсь, что здесь кто-нибудь сможет мне помочь.

0
McFly 11 Фев 2021 в 02:25

2 ответа

Лучший ответ

Это касается ряда тем. Ваш файл сценария содержит модуль, в данном случае функция модуля - это 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, это прекрасно, imho.

0
hotpink 11 Фев 2021 в 01:33

Спасибо hotpink за ваши объяснения! Это решило проблему. В моей конкретной настройке, описанной в начальном вопросе, код выглядит следующим образом:

<!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>

Результат

0
McFly 12 Фев 2021 в 19:18
66146647