DEV Community

Cover image for Criando um projeto web com ReactJS e TypeScript
William Amorim
William Amorim

Posted on

Criando um projeto web com ReactJS e TypeScript

Antes de iniciarmos precisamos verificar se temos na nossa máquina instalado o Nodejs e o Yarn

recomendo a versão LTS do Node.js

Node.js

Yarn

para verificar se as instalações foram feitas corretamente basta digitar no seu terminal node -v e depois yarn -v separadamente.

Feito isso vamos ao que nos interessa que é a criação do nosso projeto.

Alt text of image

Utilizaremos o create-react-app pois ele já vem com toda a parte de configuração do webpack e do babel, otimizando o nosso trabalho sem termos que configurar tudo do zero.

Daremos um nome ao nosso projeto, no meu caso eu coloquei como first-project-reactjs mas pode colocar o nome que desejar.

E por fim utilizaremos uma flag -- template=typescript pois estaremos utilizando o TypeScript no nosso projeto, caso não queira utilizar TypeScript basta retirar ela que o projeto irá ser criado da mesma forma com o template básico do ReactJS.

Após a execução do comando no nosso terminal, levará um tempinho para que ele compile e monte toda a estrutura do nosso projeto mas ao final teremos uma resposta como na imagem abaixo.

Alt text of image

Se executarmos o comando yarn start no nosso terminal dentro da pasta do projeto que criamos, o projeto irá compilar sem problemas.

Alt text of image


Mas podemos melhorar a nossa estrutura no projeto apagando alguns arquivos que não iremos utilizar.

Abrindo o nosso projeto no VSCode ou qualquer outro editor que você esteja utilizando iremos apagar os seguintes arquivos:

Dentro da pasta src:

  • App.css
  • App.test.tsx
  • index.css
  • logo.svg
  • serviceWorker.ts

Dentro da pasta public:

  • favicon.ico
  • logo192.png
  • logo512.png
  • manifest.json

Agora iremos apagar as referências dos arquivos que deletamos para que rode tudo tranquilamente.

Iniciaremos pelo arquivo index.html que está dentro da nossa pasta public, iremos retirar os comentários e os trechos que fazem referências aos arquivos deletados anteriormente.

Alt text of image

Agora dentro da pasta src iremos fazer o mesmo com os arquivos index.tsx e App.tsx

index.tsx

Resultado final do nosso arquivo index.tsx

App.tsx

Resultado final do nosso arquivo App.tsx

Feito isso podemos rodar yarn start no nosso terminal e ver que está tudo rodando perfeitamente, mas apenas com os arquivos e conteúdo de código que realmente necessitamos para iniciar a nossa aplicação em ReactJS com TypeScript!

Resultado final


Chegamos ao fim do post com uma estrutura básica para que possamos construir uma aplicação incrível utilizando ReactJS e TypeScript, no próximo post irei falar sobre EditorConfig, Eslint e Prettier que são ferramentas que nos ajudam e muito no nosso dia a dia como desenvolvedor mantendo o nosso código organizado e irá incrementar ainda mais essa estrutura que criamos!

Gif bob

Top comments (0)