DEV Community 👩‍💻👨‍💻

mugichaba
mugichaba

Posted on

Create React app with TypeScript

Run the following command.

$ npx create-react-app my-app --template typescript
Enter fullscreen mode Exit fullscreen mode

After finish the creating process...

$ cd my-app
$ npm start
Enter fullscreen mode Exit fullscreen mode

Image description

Simple.

What's next...?

It was really easy to create an application.
Then, What I should do next?

I am not a designer, so I would like to develop a website as easy as possible.
Maybe Material UI is the best library for people like me?

Let's install it.

$ npm install @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

And I also want to use cool icons.

$ npm install @mui/icons-material
Enter fullscreen mode Exit fullscreen mode

Then, just comment out the code on src/App.tsx and add Button (Also add a style to the button on src/App.css).

Image description

After just saving the code.

Image description

Awesome. How about a header?
The official website shows how to add a header named AppBar.

I just copied the code.

import './App.css';
import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material';
import { Box } from '@mui/system';
import MenuIcon from '@mui/icons-material/Menu';

function App() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Then...

Image description

Great!
It seems too easy to develop a website using those components...

Top comments (1)

Collapse
 
suhakim profile image
sadiul hakim

nice

Dark Mode?

🌖🌗🌘 Turn on dark mode in your DEV Settings