Adeus create-react-app: Veja como criar um projeto React utilizando o Vite

O Vite é um servidor de desenvolvimento e ferramenta de empacotamento para projetos front-end, especialmente para aplicações React, Vue e Vuex. Ele se destaca por sua velocidade e desempenho incrível, proporcionando uma experiência de desenvolvimento mais rápida e fluida. O Vite também é uma ferramenta que tem uma comunidade muito ativa, o que nos gera segurança ao utiliza-lo.

Vamos ver a seguir como fazer a instalação e como exibir um simples Hello World a partir de um novo componente. Para isso você precisa do Node.js e do NPM instalado no seu computador.

Primeiramente crie uma nova pasta no seu computador, sem seguida, abra o terminal e rode o comando abaixo para instalar o Vite a nível global.

npm install -g vite

Após a instalação e com o terminal ainda aberto da pasta do seu projeto, execute o comando abaixo para criar um novo projeto React a partir do Vite.

npm init vite@latest meu-projeto-react -- --template react

No comando npm init vite@latest meu-projeto-react -- --template react, o -- solto após meu-projeto-react serve para separar os argumentos do comando npm init dos argumentos do comando vite.

• npm init vite@latest meu-projeto-react: Inicia o processo de criação de um novo projeto npm. Específica que você deseja usar a versão mais recente do Vite para criar o projeto.
• meu-projeto-react: Nome do projeto que você deseja criar.
• --: Este separador indica ao npm que os argumentos a seguir pertencem ao comando vite e não ao comando npm init.
• --template react: Esta opção informa ao Vite que você deseja criar um projeto React.

Agora você precisa acessar a pasta do seu projeto, que foi criada com o comando acima, para isso, ainda no terminal rode o comando abaixo.

cd meu-projeto-react

Em alguns casos é necessário ainda rodar o comando npm install.

Para subir o servidor, basta rodar npm run dev.

Criando um simples componente

Dentro da pasta src/ crie uma nova pasta chamada de components/, nela crie um arquivo chamado Hello.jsx contendo o código abaixo.
 

const Hello = () => {
    return (
        <>
            <h1>Hello World!</h1>
        </>
    )
}

export default Hello

Agora no arquivo src/App.jsx importe o componente Hello e insira ele dentro do delimitador de renderização.

import './App.css'
import Hello from './components/Hello'

function App() {

  return (
    <>
      <Hello />
    </>
  )
}

export default App

Viu só como é simples?