Iniciando seu primeiro projeto React com ViteJS

Se você está pronto para mergulhar no mundo do desenvolvimento web com React e está procurando uma maneira mais rápida e eficiente de iniciar seu projeto, o ViteJS é a escolha perfeita para você. Neste artigo, vamos mostrar como começar o seu primeiro projeto React com ViteJS em apenas alguns passos simples.

Passo 1: Instalação do Node.js

O primeiro passo para começar um projeto React com ViteJS é garantir que você tenha o Node.js instalado em sua máquina. Você pode baixar e instalar o Node.js a partir do site oficial. Após a instalação, verifique se o Node.js está configurado corretamente executando o comando node -v no seu terminal.

Passo 2: Criando um novo projeto React

Depois de ter o Node.js instalado, o próximo passo é criar um novo projeto React usando o create-react-app. Execute o seguinte comando no seu terminal:

    npx create-react-app my-app
  

Este comando irá criar um novo projeto React chamado my-app no seu diretório atual.

Passo 3: Instalando o ViteJS

Depois de ter o projeto React criado, navegue até o diretório do projeto e instale o ViteJS usando o npm:

    cd my-app
npm install --save-dev vite
  

Passo 4: Configuração do ViteJS

Depois de instalar o ViteJS, adicione um arquivo de configuração chamado vite.config.js no diretório raiz do seu projeto com o seguinte conteúdo:

    import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  server: {
    port: 3000
  }
})
  

Passo 5: Atualizando o arquivo de entrada

Por fim, atualize o arquivo de entrada do seu projeto para utilizar o ViteJS. Altere o seguinte trecho no arquivo package.json:

    "scripts": {
  "start": "vite",
  "build": "vite build"
}
  

Passo 6: Iniciar o servidor de desenvolvimento

Para iniciar o servidor de desenvolvimento com ViteJS, execute o seguinte comando no seu terminal:

    npm start
  

Agora você pode começar a desenvolver seu projeto React com ViteJS e desfrutar de tempos de compilação muito mais rápidos e uma experiência de desenvolvimento mais eficiente.

Com estes simples passos, você está pronto para começar seu primeiro projeto React com ViteJS. Aproveite a jornada e boa sorte!