npx create-react-app react-mui --template typescript  Creating a new React app in /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...   added 1369 packages in 32s  169 packages are looking for funding   run `npm fund` for details  Initialized 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#deprecated  added 38 packages, and changed 1 package in 3s  169 packages are looking for funding   run `npm fund` for details  We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.  Your tsconfig.json has been populated with default values.  Removing template package using npm...   removed 1 package, and audited 1407 packages in 2s  169 packages are looking for funding   run `npm fund` for details  8 moderate severity vulnerabilities  To address all issues (including breaking changes), run:   npm audit fix --force  Run `npm audit` for details.  Created git commit.  Success! Created react-mui at /home/rodrigokamada/Development/React/react-mui Inside that directory, you can run several commands:    npm start     Starts the development server.    npm run build     Bundles the app into static files for 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 you do this, you can’t go back!  We suggest that you begin by typing:    cd react-mui   npm start  Happy hacking! 

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

import React from 'react'; import AppBar from '@mui/material/AppBar'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import FormControlLabel from '@mui/material/FormControlLabel'; import IconButton from '@mui/material/IconButton'; import Menu from '@mui/material/Menu'; import MenuIcon from '@mui/icons-material/Menu'; import MenuItem from '@mui/material/MenuItem'; import Modal from '@mui/material/Modal'; import Switch from '@mui/material/Switch'; import TextField from '@mui/material/TextField'; import Toolbar from '@mui/material/Toolbar'; import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; import AdapterDateFns from '@mui/lab/AdapterDateFns'; import DatePicker from '@mui/lab/DatePicker'; import LocalizationProvider from '@mui/lab/LocalizationProvider'; import './App.css';  const pages = ['Products', 'Pricing', 'Blog']; const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];  const modalStyle = {   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, };  function App() {   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);   const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);    const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {     setAnchorElNav(event.currentTarget);   };   const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {     setAnchorElUser(event.currentTarget);   };    const handleCloseNavMenu = () => {     setAnchorElNav(null);   };    const handleCloseUserMenu = () => {     setAnchorElUser(null);   };    const [value, setValue] = React.useState<Date | null>(null);    const [open, setOpen] = React.useState(false);   const handleOpen = () => setOpen(true);   const handleClose = () => setOpen(false);    return (     <Container maxWidth="xl" sx={{ p: '0px !important' }}>       <AppBar position="static">         <Container maxWidth="xl">           <Toolbar disableGutters>             <Typography               variant="h6"               noWrap               component="div"               sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}             >               React Material UI             </Typography>              <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>               <IconButton                 size="large"                 aria-label="account of current user"                 aria-controls="menu-appbar"                 aria-haspopup="true"                 onClick={handleOpenNavMenu}                 color="inherit"               >                 <MenuIcon />               </IconButton>               <Menu                 id="menu-appbar"                 anchorEl={anchorElNav}                 anchorOrigin={{                   vertical: 'bottom',                   horizontal: 'left',                 }}                 keepMounted                 transformOrigin={{                   vertical: 'top',                   horizontal: 'left',                 }}                 open={Boolean(anchorElNav)}                 onClose={handleCloseNavMenu}                 sx={{                   display: { xs: 'block', md: 'none' },                 }}               >                 {pages.map((page) => (                   <MenuItem key={page} onClick={handleCloseNavMenu}>                     <Typography textAlign="center">{page}</Typography>                   </MenuItem>                 ))}               </Menu>             </Box>             <Typography               variant="h6"               noWrap               component="div"               sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}             >               React Material UI             </Typography>             <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>               {pages.map((page) => (                 <Button                   key={page}                   onClick={handleCloseNavMenu}                   sx={{ my: 2, color: 'white', display: 'block' }}                 >                   {page}                 </Button>               ))}             </Box>              <Box sx={{ flexGrow: 0 }}>               <Tooltip title="Open settings">                 <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>                   <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />                 </IconButton>               </Tooltip>               <Menu                 sx={{ mt: '45px' }}                 id="menu-appbar"                 anchorEl={anchorElUser}                 anchorOrigin={{                   vertical: 'top',                   horizontal: 'right',                 }}                 keepMounted                 transformOrigin={{                   vertical: 'top',                   horizontal: 'right',                 }}                 open={Boolean(anchorElUser)}                 onClose={handleCloseUserMenu}               >                 {settings.map((setting) => (                   <MenuItem key={setting} onClick={handleCloseUserMenu}>                     <Typography textAlign="center">{setting}</Typography>                   </MenuItem>                 ))}               </Menu>             </Box>           </Toolbar>         </Container>       </AppBar>       <Box         component="form"         sx={{           mt: 3,           '& .MuiTextField-root': { my: 1, width: '100%' },         }}         noValidate         autoComplete="off"       >         <Container maxWidth="xl">           <div>             <TextField id="exampleInput" label="Example input" variant="outlined" />           </div>           <div>             <TextField id="exampleTextarea" label="Example textarea" multiline rows={4} />           </div>           <div>             <FormControlLabel control={<Switch defaultChecked />} label="Example switch" />           </div>           <div>             <LocalizationProvider dateAdapter={AdapterDateFns}>               <DatePicker                 label="Example date"                 value={value}                 onChange={(newValue: any) => {                   setValue(newValue);                 }}                 renderInput={(params: any) => <TextField {...params} />}               />             </LocalizationProvider>           </div>           <div>             <Button variant="contained" onClick={handleOpen}>Open modal</Button>             <Modal               open={open}               onClose={handleClose}               aria-labelledby="modal-modal-title"               aria-describedby="modal-modal-description"             >               <Box sx={modalStyle}>                 <Typography id="modal-modal-title" variant="h6" component="h2">                   Text in a modal                 </Typography>                 <Typography id="modal-modal-description" sx={{ mt: 2 }}>                   Duis mollis, est non commodo luctus, nisi erat porttitor ligula.                 </Typography>                 <Button variant="contained" onClick={handleClose} sx={{ mt: 2 }}>Close modal</Button>               </Box>             </Modal>           </div>         </Container>       </Box>     </Container>   ); }  export default App; 

npm start  Compiled successfully!  You can now view react-mui in the browser.    http://localhost:3000/react-mui  Note that the development build is not optimized. To create a production build, use npm run build.  assets by path static/js/*.js 3.57 MiB   asset static/js/bundle.js 3.56 MiB [emitted] (name: main) 1 related asset   asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.92 KiB [emitted] 1 related asset asset index.html 1.74 KiB [emitted] asset asset-manifest.json 508 bytes [emitted] orphan modules 295 KiB [orphan] 186 modules runtime modules 32.4 KiB 16 modules modules by path ./node_modules/ 2.66 MiB 574 modules modules by path ./src/ 27 KiB   modules by path ./src/*.css 8.82 KiB     ./src/index.css 2.72 KiB [built] [code generated]     ./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.css 1.37 KiB [built] [code generated]     ./src/App.css 2.72 KiB [built] [code generated]     ./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.css 2 KiB [built] [code generated]   modules by path ./src/*.tsx 16.7 KiB     ./src/index.tsx 1.83 KiB [built] [code generated]     ./src/App.tsx 14.9 KiB [built] [code generated]   ./src/reportWebVitals.ts 1.41 KiB [built] [code generated] webpack 5.69.1 compiled successfully in 7201 ms