Created
September 16, 2024 13:53
-
-
Save matefs/d7a6b564f6546b83772038c6a2617305 to your computer and use it in GitHub Desktop.
How to run react and mui.js using babel and html tags
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> | |
| <meta charset="UTF-8"> | |
| <title>CodePen - React Material UI Template</title> | |
| </head> | |
| <body> | |
| <!-- partial:index.partial.html --> | |
| <div id="root"></div> | |
| <!-- partial --> | |
| <script src='https://unpkg.com/react@latest/umd/react.development.js'></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'></script> | |
| <script src='https://unpkg.com/babel-standalone@latest/babel.min.js'></script> | |
| <script type="text/babel"> | |
| const { | |
| AppBar, | |
| colors, | |
| Avatar, | |
| CssBaseline, | |
| ThemeProvider, | |
| Typography, | |
| Container, | |
| createMuiTheme, | |
| Box, | |
| Grid, | |
| makeStyles, | |
| Button, | |
| SvgIcon, | |
| FormControlLabel, | |
| Checkbox, | |
| TextField, | |
| Link | |
| } = MaterialUI; | |
| // Create a theme instance. | |
| const theme = createMuiTheme({ | |
| palette: { | |
| primary: { | |
| main: "#556cd6" | |
| }, | |
| secondary: { | |
| main: "#19857b" | |
| }, | |
| error: { | |
| main: colors.red.A400 | |
| }, | |
| background: { | |
| default: "#fff" | |
| } | |
| } | |
| }); | |
| const useStyles = makeStyles((theme) => ({ | |
| paper: { | |
| marginTop: theme.spacing(8), | |
| display: "flex", | |
| flexDirection: "column", | |
| alignItems: "center" | |
| }, | |
| avatar: { | |
| margin: theme.spacing(1), | |
| backgroundColor: theme.palette.secondary.main | |
| }, | |
| form: { | |
| width: "100%", // Fix IE 11 issue. | |
| marginTop: theme.spacing(3) | |
| }, | |
| submit: { | |
| margin: theme.spacing(3, 0, 2) | |
| } | |
| })); | |
| 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() { | |
| const classes = useStyles(); | |
| return ( | |
| <Container component="main" maxWidth="xs"> | |
| <CssBaseline /> | |
| <div className={classes.paper}> | |
| <Avatar className={classes.avatar}></Avatar> | |
| <Typography component="h1" variant="h5"> | |
| Sign up | |
| </Typography> | |
| <form className={classes.form} noValidate> | |
| <Grid container spacing={2}> | |
| <Grid item xs={12} sm={6}> | |
| <TextField | |
| autoComplete="fname" | |
| name="firstName" | |
| variant="outlined" | |
| required | |
| fullWidth | |
| id="firstName" | |
| label="First Name" | |
| autoFocus | |
| /> | |
| </Grid> | |
| <Grid item xs={12} sm={6}> | |
| <TextField | |
| variant="outlined" | |
| required | |
| fullWidth | |
| id="lastName" | |
| label="Last Name" | |
| name="lastName" | |
| autoComplete="lname" | |
| /> | |
| </Grid> | |
| <Grid item xs={12}> | |
| <TextField | |
| variant="outlined" | |
| required | |
| fullWidth | |
| id="email" | |
| label="Email Address" | |
| name="email" | |
| autoComplete="email" | |
| /> | |
| </Grid> | |
| <Grid item xs={12}> | |
| <TextField | |
| variant="outlined" | |
| required | |
| fullWidth | |
| name="password" | |
| label="Password" | |
| type="password" | |
| id="password" | |
| autoComplete="current-password" | |
| /> | |
| </Grid> | |
| <Grid item xs={12}> | |
| <FormControlLabel | |
| control={<Checkbox value="allowExtraEmails" color="primary" />} | |
| label="I want to receive inspiration, marketing promotions and updates via email." | |
| /> | |
| </Grid> | |
| </Grid> | |
| <Button | |
| type="submit" | |
| fullWidth | |
| variant="contained" | |
| color="primary" | |
| className={classes.submit} | |
| > | |
| Sign Up | |
| </Button> | |
| <Grid container justify="flex-end"> | |
| <Grid item> | |
| <Link href="#" variant="body2"> | |
| Already have an account? Sign in | |
| </Link> | |
| </Grid> | |
| </Grid> | |
| </form> | |
| </div> | |
| <Box mt={5}> | |
| <Copyright /> | |
| </Box> | |
| </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