React Material-UI Pure Javascript
I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)
Solution 1:
Even if you import material-ui framework, you need to indicate where the Button component has to be found.
The problem is, I'm not sure it's possible without using babel.
You will find a complete exemple here in the Material-UI doc
Solution 2:
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.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bridge Bridge.React.Examples</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@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>Solution 3:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bridge Bridge.React.Examples</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/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>
Post a Comment for "React Material-UI Pure Javascript"