Prerequisites

Getting started

Create the React application

npx create-react-app react-mui--template typescriptCreating a new React appin/home/rodrigokamada/Development/React/react-mui.Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts with cra-template-typescript...added1369 packagesin 32s169 packages are lookingfor funding  run`npm fund`for detailsInitialized a git repository.Installing template dependencies using npm...npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecatedadded38 packages, and changed1 packagein 3s169 packages are lookingfor funding  run`npm fund`for detailsWe detected TypeScriptin your project (src/App.test.tsx) and created a tsconfig.json filefor you.Your tsconfig.json has been populated withdefault values.Removing template package using npm...removed1 package, and audited1407 packagesin 2s169 packages are lookingfor funding  run`npm fund`for details8 moderate severity vulnerabilitiesTo address all issues (including breaking changes), run:  npm audit fix--forceRun`npm audit`for details.Created git commit.Success! Created react-mui at/home/rodrigokamada/Development/React/react-muiInside that directory, you can run several commands:  npm start    Starts the development server.  npm run build    Bundles the app intostatic filesfor production.  npm test    Starts the test runner.  npm run eject    Removes this tool and copies build dependencies, configuration files    and scripts into the app directory.If youdo this, you can’t go back!We suggest that you begin by typing:  cd react-mui  npm startHappy hacking!

npm install@mui/material@mui/icons-material@mui/lab@emotion/react@emotion/styled@types/date-fns

importReactfrom'react';importAppBarfrom'@mui/material/AppBar';importAvatarfrom'@mui/material/Avatar';importBoxfrom'@mui/material/Box';importButtonfrom'@mui/material/Button';importContainerfrom'@mui/material/Container';importFormControlLabelfrom'@mui/material/FormControlLabel';importIconButtonfrom'@mui/material/IconButton';importMenufrom'@mui/material/Menu';importMenuIconfrom'@mui/icons-material/Menu';importMenuItemfrom'@mui/material/MenuItem';importModalfrom'@mui/material/Modal';importSwitchfrom'@mui/material/Switch';importTextFieldfrom'@mui/material/TextField';importToolbarfrom'@mui/material/Toolbar';importTooltipfrom'@mui/material/Tooltip';importTypographyfrom'@mui/material/Typography';importAdapterDateFnsfrom'@mui/lab/AdapterDateFns';importDatePickerfrom'@mui/lab/DatePicker';importLocalizationProviderfrom'@mui/lab/LocalizationProvider';import'./App.css';constpages=['Products','Pricing','Blog'];constsettings=['Profile','Account','Dashboard','Logout'];constmodalStyle={position:'absolute'as'absolute',top:'50%',left:'50%',transform:'translate(-50%, -50%)',width:400,bgcolor:'background.paper',border:'2px solid #000',boxShadow:24,p:4,};functionApp(){const[anchorElNav,setAnchorElNav]=React.useState<null|HTMLElement>(null);const[anchorElUser,setAnchorElUser]=React.useState<null|HTMLElement>(null);consthandleOpenNavMenu=(event:React.MouseEvent<HTMLElement>)=>{setAnchorElNav(event.currentTarget);};consthandleOpenUserMenu=(event:React.MouseEvent<HTMLElement>)=>{setAnchorElUser(event.currentTarget);};consthandleCloseNavMenu=()=>{setAnchorElNav(null);};consthandleCloseUserMenu=()=>{setAnchorElUser(null);};const[value,setValue]=React.useState<Date|null>(null);const[open,setOpen]=React.useState(false);consthandleOpen=()=>setOpen(true);consthandleClose=()=>setOpen(false);return(<ContainermaxWidth="xl"sx={{p:'0px !important'}}><AppBarposition="static"><ContainermaxWidth="xl"><ToolbardisableGutters><Typographyvariant="h6"noWrapcomponent="div"sx={{mr:2,display:{xs:'none',md:'flex'}}}>ReactMaterialUI</Typography><Boxsx={{flexGrow:1,display:{xs:'flex',md:'none'}}}><IconButtonsize="large"aria-label="account of current user"aria-controls="menu-appbar"aria-haspopup="true"onClick={handleOpenNavMenu}color="inherit"><MenuIcon/></IconButton><Menuid="menu-appbar"anchorEl={anchorElNav}anchorOrigin={{vertical:'bottom',horizontal:'left',}}keepMountedtransformOrigin={{vertical:'top',horizontal:'left',}}open={Boolean(anchorElNav)}                onClose={handleCloseNavMenu}sx={{display:{xs:'block',md:'none'},}}>{pages.map((page)=>(<MenuItemkey={page}onClick={handleCloseNavMenu}><TypographytextAlign="center">{page}</Typography></MenuItem>))}</Menu></Box><Typographyvariant="h6"noWrapcomponent="div"sx={{flexGrow:1,display:{xs:'flex',md:'none'}}}>ReactMaterialUI</Typography><Boxsx={{flexGrow:1,display:{xs:'none',md:'flex'}}}>{pages.map((page)=>(<Buttonkey={page}onClick={handleCloseNavMenu}sx={{my:2,color:'white',display:'block'}}>{page}</Button>))}</Box><Boxsx={{flexGrow:0}}><Tooltiptitle="Open settings"><IconButtononClick={handleOpenUserMenu}sx={{p:0}}><Avataralt="Remy Sharp"src="/static/images/avatar/2.jpg"/></IconButton></Tooltip><Menusx={{mt:'45px'}}id="menu-appbar"anchorEl={anchorElUser}anchorOrigin={{vertical:'top',horizontal:'right',}}keepMountedtransformOrigin={{vertical:'top',horizontal:'right',}}open={Boolean(anchorElUser)}                onClose={handleCloseUserMenu}>{settings.map((setting)=>(<MenuItemkey={setting}onClick={handleCloseUserMenu}><TypographytextAlign="center">{setting}</Typography></MenuItem>))}</Menu></Box></Toolbar></Container></AppBar><Boxcomponent="form"sx={{mt:3,'& .MuiTextField-root':{my:1,width:'100%'},}}noValidateautoComplete="off"><ContainermaxWidth="xl"><div><TextFieldid="exampleInput"label="Example input"variant="outlined"/></div><div><TextFieldid="exampleTextarea"label="Example textarea"multilinerows={4}/></div><div><FormControlLabelcontrol={<SwitchdefaultChecked/>}label="Exampleswitch"/></div><div><LocalizationProviderdateAdapter={AdapterDateFns}><DatePickerlabel="Example date"value={value}onChange={(newValue:any)=>{setValue(newValue);}}renderInput={(params:any)=><TextField{...params}/>}/></LocalizationProvider></div><div><Buttonvariant="contained"onClick={handleOpen}>Openmodal</Button><Modalopen={open}onClose={handleClose}aria-labelledby="modal-modal-title"aria-describedby="modal-modal-description"><Boxsx={modalStyle}><Typographyid="modal-modal-title"variant="h6"component="h2">Textinamodal</Typography><Typographyid="modal-modal-description"sx={{mt:2}}>Duismollis,estnoncommodoluctus,nisieratporttitorligula.</Typography><Buttonvariant="contained"onClick={handleClose}sx={{mt:2}}>Closemodal</Button></Box></Modal></div></Container></Box></Container>);}exportdefaultApp;

npm startCompiled successfully!You can now view react-muiin the browser.  http://localhost:3000/react-muiNote that the development build is not optimized.To create a production build, use npm run build.assets by pathstatic/js/*.js3.57 MiB  assetstatic/js/bundle.js3.56 MiB [emitted] (name: main)1 related asset  assetstatic/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js6.92 KiB [emitted]1 related assetasset index.html1.74 KiB [emitted]asset asset-manifest.json508 bytes [emitted]orphan modules295 KiB [orphan]186 modulesruntime modules32.4 KiB16 modulesmodules by path ./node_modules/2.66 MiB574 modulesmodules by path ./src/27 KiB  modules by path ./src/*.css8.82 KiB    ./src/index.css2.72 KiB [built] [codegenerated]    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css1.37 KiB [built] [codegenerated]    ./src/App.css2.72 KiB [built] [codegenerated]    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css2 KiB [built] [codegenerated]  modules by path ./src/*.tsx16.7 KiB    ./src/index.tsx1.83 KiB [built] [codegenerated]    ./src/App.tsx14.9 KiB [built] [codegenerated]  ./src/reportWebVitals.ts1.41 KiB [built] [codegenerated]webpack5.69.1 compiled successfullyin7201 ms

Cloning the application

git clone git@github.com:rodrigokamada/react-mui.git

npm ci

npm start