How to Create a React MUI Project from Scratch

1 Create the React project

Firstly, run the command that would create the project outside the target folder:

abc@34d63bfc5d13:~/workspace$ npx create-react-app <your-project-name>

Waiting for the following information to appear:

We suggest that you begin by typing:

  cd <your-project-name>
  npm start

Happy hacking!

This means the installation has been completed!

2 Install MUI related packages

The version installed in this article is the latest stable version as of the time of publication: v5.

To begin with, go to the project folder:

cd <your-project-name>

Then use pnpm to resolve dependencies（also npm or yarn ）：

pnpm add @mui/material @emotion/react @emotion/styled

Then install Roboto font and icons：

pnpm add @fontsource/roboto
pnpm add @mui/icons-material

Well begun, half done; Happy Hacking！