Material UI

link - material-ui.com

This is a React UI framework.

npm install @material-ui/core 
npm install @material-ui/lab 
npm install @material-ui/icons

CDN

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

TreeView

link - https://material-ui.com/components/tree-view/

Embedding React

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>My page</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> 
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> 
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> 
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script> 
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script> 

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 
  </head> 

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

    <script type="text/babel"> 
const { 
  colors, 
  CssBaseline, 
  ThemeProvider, 
  Typography, 
  Container, 
  makeStyles, 
  createMuiTheme, 
  Box, 
  SvgIcon, 
  Link, 
} = MaterialUI; 


const theme = createMuiTheme({ 
  palette: { 
    primary: { 
      main: '#556cd6',  
    }, 
    secondary: { 
      main: '#19857b',  
    }, 
    error: { 
      main: colors.red.A400, 
    }, 
    background: { 
      default: '#fff',  
    }, 
  }, 
}); 

function LightBulbIcon(props) { 
  return ( 
    <SvgIcon {...props}> 
      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" /> 
    </SvgIcon> 
  ); 
} 

const useStyles = makeStyles(theme => ({ 
  root: { 
    margin: theme.spacing(6, 0, 3), 
  }, 
  lightBulb: { 
    verticalAlign: 'middle',  
    marginRight: theme.spacing(1), 
  }, 
})); 

function ProTip() { 
  const classes = useStyles(); 
  return ( 
    <Typography className={classes.root} color="textSecondary"> 
      <LightBulbIcon className={classes.lightBulb} /> 
      Icon Text : {' '} 
      <Link href="https://bettersolutions.com"> 
        Another Link 
      </Link>{' '} 
      some more text 
    </Typography> 
  ); 
} 

function Copyright() { 
  return ( 
    <Typography variant="body2" color="textSecondary" align="center"> 
      {'Copyright � '} 
      <Link color="inherit" href="https://bettersolutions.com/"> 
        bettersolutions.com 
      </Link>{' '} 
      {new Date().getFullYear()} 
      {'.'}  
    </Typography> 
  ); 
} 

function App() { 
  return ( 
    <Container maxWidth="sm"> 
      <div style={{ marginTop: 24, }}> 
        <Typography variant="h4" component="h1" gutterBottom> 
          BetterSolutions.com 
        </Typography> 
        <ProTip /> 
        <Copyright /> 
      </div> 
    </Container> 
  ); 
} 

ReactDOM.render( 
  <ThemeProvider theme={theme}> 
    <CssBaseline /> 
    <App /> 
  </ThemeProvider>, 
  document.querySelector('#root'),  
); 

    </script> 
  </body> 
</html>

using NotePad

If you want to use Material-UI React it makes sense to bundle all the modules together into a single file.
One way of doing this is to use WebPack which has its own development web server.
Before you read this page you should read [[Fluent UI > using NotePad]]

Install Material-UI

These modules include everything you need.

npm install --save @material-ui/core 
npm install --save @material-ui/icons 
npm install --save @material-ui/lab

Create index.jsx file

Create a NotePad file with the following contents and save it as 'index.jsx'.

import * as React from 'react';   
import * as ReactDOM from 'react-dom';     

import { makeStyles } from '@material-ui/core/styles';  
import TreeView from '@material-ui/lab/TreeView';  
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';  
import ChevronRightIcon from '@material-ui/icons/ChevronRight';  
import TreeItem from '@material-ui/lab/TreeItem';  

const useStyles = makeStyles({ 
  root: { 
    height: 240, 
    flexGrow: 1, 
    maxWidth: 400, 
  }, 
}); 

export default function FileSystemNavigator() { 
  const classes = useStyles(); 

  return ( 
    <TreeView 
      className={classes.root} 
      defaultCollapseIcon={<ExpandMoreIcon />} 
      defaultExpandIcon={<ChevronRightIcon />} 
    > 
      <TreeItem nodeId="1" label="Applications"> 
        <TreeItem nodeId="2" label="Calendar" /> 
        <TreeItem nodeId="3" label="Chrome" /> 
        <TreeItem nodeId="4" label="Webstorm" /> 
      </TreeItem> 
      <TreeItem nodeId="5" label="Documents"> 
        <TreeItem nodeId="10" label="OSS" /> 
        <TreeItem nodeId="6" label="Material-UI"> 
          <TreeItem nodeId="7" label="src"> 
            <TreeItem nodeId="8" label="index.js" /> 
            <TreeItem nodeId="9" label="tree-view.js" /> 
          </TreeItem> 
        </TreeItem> 
      </TreeItem> 
    </TreeView> 
  ); 
} 

export class BETTreeView extends React.Component { 
  render() { 
     return ( 
       <div> 
         <FileSystemNavigator/> 
      </div> 
     ); 
  } 
} 

ReactDOM.render( 
  <BETTreeView/>, 
  document.getElementById('app')   
);