Using a React library

This example shows how to import and use Material UI.

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

https://unpkg.com/@material-ui/core@4.11.4/umd/material-ui.development.js

In this path, umd indicates that the CDN bundle uses the UMD format.

In the code editor's HTML tab, add the following:

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

Switch 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 Material UI
            </Button>
            <Button variant="outlined" color="secondary">
                Another button
            </Button>
        </>
    );
}

After you save the changes, the widget renders like this: