Iniciando nosso projeto Final

Configurando de TSX para JSX

Em virtude do template do Vite vir configurando com TSX, precisamos remover os arquivos desnecessários para que o projeto funcione corretamente além de configurar o TSX para JSX, pois nosso projeto será apenas em React utilizando JavaScript (JSX).

1º Passo

Remova os seguintes arquivos do projeto:

• tsconfig.json
• tsconfig.node.json
• tsconfig.app.json

2º Passo

Renomeie os seguintes arquivos

• main.tsx para main.jsx
• App.tsx para App.jsx

3º Passo

Remova todo o código em main.jsx e coloque o seguinte:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.js'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

        

4º Passo

Vá ao index.html e mude de main.tsx para main.jsx a referência abaixo

    <div id="root"></div>
    // <script type="module" src="/src/main.tsx"></script> //
    <script type="module" src="/src/main.jsx"></script>

        

5º Passo

Vá ao eslint.config.js e mude para o código abaixo

Substitua na linha 11 de files: ['**/*.{ts,tsx}'] para files: ["**/*.{js,jsx}"],

    files: ["**/*.{js,jsx}"],

        

6º Passo

Vá ao package.json e mude para o código abaixo

Substitua na linha 8 de files: "build": "tsc -b && vite build", para "build": "vite build",

    "build": "vite build",

        

7º Passo

Rode npm install e depois npm run dev

Veja se seu projeto não vai dar nenhum erro no terminal e no navegador

8º Passo

Faça o commit e push clicando no botão de commit e push do VS Code