Using a React library

This example showcases how to import and use MaterialUI.

Add the library's CDN to the Widget's 3rd party libraries:

https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js

Note that in the path, the umd tells that this CDN is exposed through UMD format.

Now, in the code editor's HTML tab, put the following:

<div id="root"></div>

Change to the Javascript (JSX) tab and paste the following:

const { createRoot } = ReactDOM;
const { Button } = MaterialUI;


function App() {
    return (
        <>
            <Button variant="contained" color="primary">
                First button using react and MaterialUI
            </Button>
            <Button variant="outlined" color="secondary">
                Another button
            </Button>
        </>
    );
}

After saving the changes, the widget will be rendered as: