Criando aplicações React com Vite e TypeScript

A princípio vale reforçar que a ferramenta convencional “create-react-app” para o desenvolvimento de aplicações React foi descontinuada (a última atualização é de abril de 2022 conforme o repositório no GitHub) ou seja, é importante saber como podemos criar novas aplicações React com ferramentas contemporâneas e em uso no momento.

Atualmente, na documentação do React, há uma sugestão para iniciar suas aplicações React utilizando algum framework, onde é recomendado o uso do Next.js, Remix ou Gatsby. Contudo, é possível utilizar o React sem frameworks, nestes caso a documentação sugere o uso de ferramentas como o Vite ou Parcel.

Portanto, vamos falar sobre uma dessas ferramentas: O Vite.

Curso React - Fundamentos

Conhecer o curso

Vite

O Vite é uma ferramenta desenvolvida para projetos front-end, desta forma, traz recursos modernos para a construção de novas aplicações, melhorando o processo de compilação, alterações refletidas instantaneamente no navegador, otimizando o fluxo de desenvolvimento, entre outras que podem ser consultadas na documentação do Vite.

Criando aplicação React com Vite

Antes de tudo, precisamos ter o Node.js instalado em nosso computador, portanto, vamos acessar o site node.org e fazer a instalação correspondente ao seu sistema operacional. Você pode acessar o nosso artigo instalação do node.js no windows, mac e linux para ver o passo a passo. É importante ressaltar que o Vite exige no mínimo a versão 18 do Node.js.

Depois que você realizar a instalação ou atualização do Node.js, podemos criar uma aplicação utilizando o npm com o seguinte comando:

npm create vite@latest

Em seguida teremos que fazer algumas configurações pelo terminal:

✔ Project name: … first-app-vite-react
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Primeiramente, nomeamos o projeto, escolhemos qual tecnologia vamos utilizar e por fim optamos pelo desenvolvimento com TypeScript (você pode selecionar JavaScript puro caso seja de sua preferência).

Ao selecionar suas preferências, o Vite cria o projeto com a seguinte estrutura:

first-app-vite-react
├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

A pasta public contém arquivos estáticos que serão servidos pelo servidor web.
A pasta src contém o código-fonte do aplicativo React.
Os arquivos App.css e App.tsx definem o estilo e o comportamento do componente App.
O arquivo index.css define estilos globais para o aplicativo.
O arquivo main.tsx é o ponto de entrada do aplicativo React.
O arquivo vite-env.d.ts define variáveis de ambiente para o Vite.
O arquivo .eslintrc.cjs define as regras de lint para o projeto.
O arquivo .gitignore lista os arquivos que não devem ser rastreados pelo Git.
O arquivo index.html é o arquivo HTML principal do aplicativo.
O arquivo package.json define as dependências do projeto e os scripts de build.
O arquivo README.md é o arquivo README do projeto.
O arquivo tsconfig.json define as configurações do compilador TypeScript.
O arquivo tsconfig.node.json define as configurações do compilador TypeScript para o ambiente Node.js.
O arquivo vite.config.ts define a configuração do Vite.

Curso React - Despertando o Poder dos Hooks

Conhecer o curso

Agora vamos entrar na pasta raiz do projeto, com o comando:

cd first-app-vite-react

Logo após vamos fazer a instalação das dependências:

npm install

Por fim, execute o projeto:

npm run dev

Testando aplicação

Desta forma nosso projeto React com o Vite e TypeScript está funcionando, como podemos ver ao acessar http://localhost:5173/:

Aplicação React com Vite

Outro ponto interessante é testar o Hot Module Replacement (HMR). O HMR permite que ao atualizarmos o código, essa atualização será refletida na página sem a necessidade de um “refresh”.

Ao realizar uma alteração no arquivo src/App.tsx:

Testando HMR

Enfim, atualizamos o texto adicionando “TreinaWeb” e a página foi atualizada automaticamente, portanto, nossa aplicação React foi configurada e está funcionando corretamente com o Vite e TypeScript.

Conclusão

Em conclusão, a utilização do Vite para criar aplicações React oferece uma abordagem moderna e eficiente para o desenvolvimento front-end. Com recursos como compilação otimizada e alterações refletidas instantaneamente no navegador através do HMR, entre outros recursos, o Vite simplifica o processo de construção de aplicações React, permitindo uma experiência de desenvolvimento mais fluida e produtiva. Ao adotar essa ferramenta, os desenvolvedores podem aproveitar ao máximo as capacidades do React, enquanto se beneficiam das vantagens proporcionadas pelo Vite.

Caso você queira se aprofundar na carreira front-end, principalmente no desenvolvimento com React, saiba que temos a formação para Desenvolvedor React Funcional, que irá ajudá-lo a se tornar um desenvolvedor muito melhor. São 14h17 de vídeo com muito conteúdo e um total de 59 exercícios.

Veja quais são os cursos que fazem parte desta formação: