Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Para quem não está conseguindo iniciar o projeto

Boa noite, pessoal!

Houve atualização do Material-UI, por isso, muita gente está com dificuldade de rodar o projeto. Consegui resolver seguindo os seguintes passos:

1 - Crie um projeto novo utilizando npx create-react-app nome-projeto

2 - Use cd nome-projeto para entrar na pasta do projeto

3 - Digite npm install styled-components

4 - Digite npm install @mui/material @emotion/react @emotion/styled

5 - Digite npm install @mui/icons-material

6 - Digite npm install @mui/lab

7 - Baixe o zip da aula 1.2

8 - Copie os arquivos das pastas public e src deles e cole dentro do seu projeto em seus devidos lugares

9 - Copie o arquivo jsconfig.json deles e cole dentro do seu projeto

10 - No arquivo index.js, atualize os seguintes imports:

  • Troque import { ThemeProvider, createTheme } from '@material-ui/core/styles' por import { ThemeProvider, createTheme } from '@mui/material/styles'
  • Troque import { StylesProvider } from '@material-ui/core/styles' por import { StyledEngineProvider } from '@mui/material/styles'
  • Dentro do render, troque StylesProvider por StyledEngineProvider

11 - No arquivo index.js do Login, atualize os seguintes imports:

  • Apague o import { Button } from '@material-ui/core'
  • Troque o import { Input, InputLabel, InputAdornment } from '@material-ui/core' por import { Button, Input, InputLabel, InputAdornment } from '@mui/material';

12 - No arquivo styles.js, ainda na pasta Login, atualize o seguinte import:

  • Troque import FormControl from '@material-ui/core/FormControl' por import { FormControl } from '@mui/material'

13 - Digite npm start

Com esses passos, vocês já conseguirão abrir o projeto inicial (aula 1.2). Porém, o Material-UI também foi utilizado nos arquivos que ainda não estão sendo usados nessa primeira aula (carrinho, feira, produto), então, será necessário atualizar os imports em todos eles para a continuação do curso. Vou deixar aqui o link da documentação para que possa ajudar: https://mui.com/material-ui/migration/migration-v4/

1 resposta
solução!

Olá, Thaís.

Tudo bem?

Que ótimo ver você compartilhando sua solução aqui no nosso fórum! Isso é muito valioso, tenho certeza que vai ajudar muita gente.

Sua sugestão de passos para atualizar o Material-UI e iniciar o projeto é muito clara e detalhada. Você fez um excelente trabalho ao identificar as mudanças necessárias nos imports e ao fornecer um link para a documentação.

Portanto, para quem está enfrentando dificuldades para iniciar o projeto, seguir os passos que você sugeriu pode ser uma ótima solução.

Valeu e bons estudos :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software