Criando aplicações React com Vite e TypeScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 23 Min 57 Seg Tempo restante da oferta: 04 23 57 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando aplicações React com Vite e TypeScript [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ React ](https://www.treinaweb.com.br/blog/categoria/react) # Criando aplicações React com Vite e TypeScript Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT.jpg) 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](https://github.com/facebook/create-react-app)) 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](https://react.dev/learn/start-a-new-react-project), há uma sugestão para iniciar suas aplicações React utilizando algum framework, onde é recomendado o uso do [Next.js](https://nextjs.org/), [Remix](https://remix.run/) ou [Gatsby](https://www.gatsbyjs.com/). Contudo, é possível utilizar o [React sem frameworks](https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework), nestes caso a documentação sugere o uso de ferramentas como o [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/). Portanto, vamos falar sobre uma dessas ferramentas: O Vite. [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) ## **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](http://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](https://www.treinaweb.com.br/blog/instalacao-do-node-js-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: ```bash npm create vite@latest ``` Em seguida teremos que fazer algumas configurações pelo terminal: ```bash ✔ 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: ```bash 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. [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) Agora vamos entrar na pasta raiz do projeto, com o comando: ```bash cd first-app-vite-react ``` Logo após vamos fazer a instalação das dependências: ```bash npm install ``` Por fim, execute o projeto: ```bash 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/react-com-vite.png) 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/Testando-HRM-do-Vite.png) 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](https://www.treinaweb.com.br/formacao/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: - [React - Fundamentos](https://www.treinaweb.com.br/curso/react-fundamentos) - [React - Dominando Componentes Funcionais](https://www.treinaweb.com.br/curso/react-dominando-componentes-funcionais) - [React - Despertando o Poder dos Hooks](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) - [React - Conhecendo o React Router](https://www.treinaweb.com.br/direto-ao-ponto/react-conhecendo-o-react-router) - [React - Estilização com Emotion (Styled Components)](https://www.treinaweb.com.br/direto-ao-ponto/react-estilizacao-com-emotion-styled-components) - [React - Boas práticas](https://www.treinaweb.com.br/curso/react-boas-praticas) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #TypeScript ](https://www.treinaweb.com.br/blog/tag/typescript) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #frontend ](https://www.treinaweb.com.br/blog/tag/frontend) - [ #vite ](https://www.treinaweb.com.br/blog/tag/vite) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## Wesley Gado Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/5-motivos-para-estudar-react-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ 5 motivos para estudar React ](https://www.treinaweb.com.br/blog/5-motivos-para-estudar-react) Confira neste artigo cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151422/ARQUITETURA-FLUX-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 8 anos atrás ## [ Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas ](https://www.treinaweb.com.br/blog/flux-descubra-o-motivo-do-sucesso-dessa-arquitetura-em-grandes-empresas) Conheça a Arquitetura Flux e entenda o motivo dela estar se tornando cada vez mais requisitada no mercado de trabalho ao se desenvolver sistemas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Micro-Front-End-Microserviços-no-seu-navegador-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ Micro Front-End - Microserviços no seu navegador ](https://www.treinaweb.com.br/blog/micro-front-end-microservicos-no-seu-navegador) Entenda o que são Micro Front-ends, como funcionam, suas vantagens e quando você deve escolher esta estratégia para a arquitetura de suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como realizar upload de arquivos locais no NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-de-arquivos-locais-no-nestjs) Neste artigo vamos aprender a utilizar o recurso de upload de arquivos locais com o NestJS utilizando a biblioteca Multer do Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com Sockets no ReactPHP ](https://www.treinaweb.com.br/blog/trabalhando-com-sockets-no-reactphp) Veremos neste artigo como usar o componente de socket do ReactPHP para criar um chat pelo terminal. Além disso, veremos as bases para a construção de servidores TCP/IP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/VUE-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ O que é o Vue.js? ](https://www.treinaweb.com.br/blog/o-que-e-o-vue-js) Atualmente, graças à popularização do JavaScript, existe uma grande variedade de frameworks front-end para diferentes propósitos. Neste artigo, será abordado o Vue.js, um dos frameworks JavaScript SPA da atualidade. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/30145954/capa-aplicativo-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 8 anos atrás ## [ Dicas para lançar um aplicativo de sucesso ](https://www.treinaweb.com.br/blog/dicas-para-lancar-um-aplicativo-de-sucesso) Veja neste artigo algumas dicas sobre o que você deve se atentar para criar um aplicativo de sucesso. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/05141731/JSX-1-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é JSX? ](https://www.treinaweb.com.br/blog/o-que-e-jsx) Veja neste artigo o que é o JSX. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27113042/react-native-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ O que é o React Native? ](https://www.treinaweb.com.br/blog/o-que-e-o-react-native) Veja neste artigo o que é o React Native. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/EXECUTAR-CODIGO-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react) Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando) Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/19173134/IONIC-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ O que é Ionic? ](https://www.treinaweb.com.br/blog/o-que-e-ionic) Veja neste artigo o que é o Ionic, principal Framework para desenvolvimento de aplicações móveis híbridas. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 23min 57s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58