-
-
Save developit/f40e0ff81028e23b84c569e1360b0413 to your computer and use it in GitHub Desktop.
React-MUI using jsDelivr CDN for in-browser hydration.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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://cdn.jsdelivr.net/combine/npm/react@16.12/umd/react.development.js,npm/react-dom@16.12/umd/react-dom.development.js,npm/@material-ui/core@4.8/umd/material-ui.development.js,npm/@babel/standalone@7.8/babel.min.js" crossorigin="anonymous"></script> | |
| <!-- Seperate Links | |
| src: https://github.com/mui-org/material-ui/blob/master/examples/cdn/index.html --> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.development.js" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.development.js" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@material-ui/core@4.8/umd/material-ui.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.8/babel.min.js" crossorigin="anonymous"></script> --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" /> | |
| <!-- Icons to support Material Design --> | |
| <!-- <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; | |
| // Create a theme instance. | |
| 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} /> | |
| Pro tip: See more{' '} | |
| <Link href="https://material-ui.com/getting-started/templates/"> | |
| templates | |
| </Link>{' '} | |
| on the Material-UI documentation. | |
| </Typography> | |
| ); | |
| } | |
| function Copyright() { | |
| return ( | |
| <Typography variant="body2" color="textSecondary" align="center"> | |
| {'Copyright © '} | |
| <Link color="inherit" href="https://material-ui.com/"> | |
| Your Website | |
| </Link>{' '} | |
| {new Date().getFullYear()} | |
| {'.'} | |
| </Typography> | |
| ); | |
| } | |
| function App() { | |
| return ( | |
| <Container maxWidth="sm"> | |
| <div style={{ marginTop: 24, }}> | |
| <Typography variant="h4" component="h1" gutterBottom> | |
| CDN v4-beta example | |
| </Typography> | |
| <ProTip /> | |
| <Copyright /> | |
| </div> | |
| </Container> | |
| ); | |
| } | |
| ReactDOM.render( | |
| <ThemeProvider theme={theme}> | |
| {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} | |
| <CssBaseline /> | |
| <App /> | |
| </ThemeProvider>, | |
| document.querySelector('#root'), | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment