reactjs - React Material-UI pure javascript - Stack Overflow|Programmer puzzle solving

I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)

<!DOCTYPE html>
<html lang="en" xmlns="">
   <head>
      <meta charset="utf-8" />
      <title>Bridge Bridge.React.Examples</title>
      <link rel="stylesheet" href=":300,400,500">
      <link rel="stylesheet" href="+Icons">
      <script crossorigin src="@16/umd/react.development.js"></script>
      <script crossorigin src="@16/umd/react-dom.development.js"></script>
      <script crossorigin src="/@material-ui/core/umd/material-ui.development.js"></script>
   </head>
   <body>
      <div id="main"></div>
      <script>
         ReactDOM.render(
          React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
          document.getElementById('main')
         );
      </script>
   </body>
</html>

I have this error. Could you please help?

'Button' is not defined

I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title>Bridge Bridge.React.Examples</title>
      <link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500">
      <link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
      <script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
      <script crossorigin src="https://unpkg./@material-ui/core/umd/material-ui.development.js"></script>
   </head>
   <body>
      <div id="main"></div>
      <script>
         ReactDOM.render(
          React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
          document.getElementById('main')
         );
      </script>
   </body>
</html>

I have this error. Could you please help?

'Button' is not defined

Share Improve this question asked Feb 11, 2019 at 18:26 user1576055 5841 gold badge6 silver badges20 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

UPDATE For v3 (when this answer was originally written) the window variable was 'material-ui'. In v4 this was changed to 'MaterialUI'. The answer has been updated accordingly.

Since you aren't using JSX in your example, you don't need babel. You just need to define Button before using it via const {Button} = window['MaterialUI'];.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bridge Bridge.React.Examples</title>
    <link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
    <script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg./@material-ui/core/umd/material-ui.development.js"></script>
</script>
</head>
<body>
<div id="main"></div>
<script>
    const {
        Button
    } = window['MaterialUI'];

    ReactDOM.render(
        React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
        document.getElementById('main')
    );
</script>
</body>
</html>

Even if you import material-ui framework, you need to indicate where the Button ponent has to be found.

The problem is, I'm not sure it's possible without using babel.

You will find a plete exemple here in the Material-UI doc

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bridge Bridge.React.Examples</title>
    <link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
    <script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg./@material-ui/core/umd/material-ui.development.js"></script>
    <script src="https://unpkg./babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
    const {
        Button
    } = window['material-ui']

    ReactDOM.render(
        React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
        document.getElementById('main')
    );
</script>
</body>
</html>

Programmer puzzle solving

reactjs - React Material-UI pure javascript - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)