Ao trabalhar com React, o Vite oferece uma experiência de desenvolvimento simplificada com algumas diferenças importantes em relação à configuração tradicional do aplicativo Create React. Esta postagem do blog explorará a estrutura de um projeto típico do Vite, com foco em arquivos-chave como index.html, main.jsx e App.jsx.

1. index.html

Em um aplicativo React desenvolvido pelo Vite, index.html serve como um ponto de partida crítico. Ao contrário do Create React App, onde os scripts são injetados automaticamente, o Vite exige que você especifique os arquivos de script diretamente. Essa inclusão explícita simplifica a compreensão dos pontos de entrada e das dependências do seu aplicativo.

Neste exemplo, você pode ver a tag do script carregando main.jsx diretamente. Essa inclusão direta é um grande diferencial do Create React App, aumentando a clareza e o controle sobre os pontos de entrada do projeto.

1.1 Dependências

Para garantir que seus arquivos de script sejam carregados corretamente, o Vite aproveita as importações de módulos ES modernos. Certifique-se de que seu package.json inclua as dependências necessárias:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

A inclusão explícita do script no arquivo HTML garante o carregamento correto e a ordem de execução do seu aplicativo, mitigando possíveis problemas com o carregamento do script.

2. principal.jsx

O arquivo main.jsx serve como ponto de entrada para seu aplicativo React. Este arquivo é responsável por renderizar o componente raiz no DOM. Normalmente é o arquivo especificado no atributo src da tag de script em seu index.html.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Render the root component into the root element in the HTML
ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
);

Neste arquivo, ReactDOM.createRoot é usado para renderizar o componente App no ​​elemento HTML com o id root. Essa abordagem de renderização direta, sem manter nenhum elemento raiz temporariamente, agiliza o processo, deixando claro onde o aplicativo inicia e quais componentes estão envolvidos.

3. Aplicativo.jsx

O arquivo App.jsx contém a definição do seu componente principal do aplicativo. Este componente serve como raiz da árvore de componentes do React.

import React from 'react';

const App = () => {
  return (
    

      
Hello, Vite and React!
    
  );
};

export default App;

Neste arquivo você define a estrutura principal e o comportamento da sua aplicação. O componente App é onde você construirá a UI e a funcionalidade primárias, assim como faria em qualquer outro projeto React.

Materiais Adicionais e Melhores Práticas

4. Usando Tailwind CSS com Vite

Tailwind CSS pode ser facilmente integrado a um projeto Vite para um estilo utilitário.

1. Instale CSS do Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. Configurar o Tailwind:

Atualize tailwind.config.js com os caminhos específicos do seu projeto:

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. Inclua Tailwind em seu CSS:

Atualize index.css para incluir a base, componentes e utilitários do Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Substituição de módulo a quente (HMR)

Vite oferece HMR pronto para uso, permitindo que você veja as alterações em tempo real sem atualizar a página.

6. Variáveis ​​de ambiente

Vite usa arquivos .env para gerenciar variáveis ​​de ambiente. Crie um arquivo .env na raiz do seu projeto e defina suas variáveis:

VITE_API_URL=https://api.example.com

Acesse essas variáveis ​​em seu aplicativo usando import.meta.env:

const apiUrl = import.meta.env.VITE_API_URL;

7. Processo de construção otimizado

O comando de construção do Vite (vite build) usa Rollup nos bastidores para produzir ativos estáticos altamente otimizados para produção. Isso garante que sua aplicação seja rápida e eficiente.

Conclusão

Trabalhar com Vite em um projeto React oferece uma experiência de desenvolvimento simplificada e eficiente. Compreender o fluxo e a estrutura dos arquivos principais como index.html, main.jsx e App.jsx pode melhorar significativamente seu processo de desenvolvimento. Com os benefícios adicionais da integração Tailwind CSS, HMR e compilações otimizadas, o Vite se destaca como uma ferramenta moderna e poderosa para desenvolvedores React.

Ao aproveitar esses recursos e práticas recomendadas, você pode criar aplicativos de alto desempenho, escalonáveis ​​e fáceis de manter com facilidade.