Skip to content Skip to sidebar Skip to footer
Home / Javascript / Material Ui / Reactjs

React Material-ui Pure Javascript

Post a Comment
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><htmllang="en"xmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8" /><title>Bridge Bridge.React.Examples</title><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"><scriptcrossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script></script></head><body><divid="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><htmllang="en"xmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8" /><title>Bridge Bridge.React.Examples</title><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"><scriptcrossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script><scriptsrc="https://unpkg.com/babel-standalone@latest/babel.min.js"crossorigin="anonymous"></script></head><body><divid="main"></div><scripttype="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"