Criando um projeto web com ReactJS e TypeScript
Tags: react, typescript, javascript, html
Published: 2020-05-29 00:54:40

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](https://nodejs.org/en/)

[Yarn](https://classic.yarnpkg.com/en/docs/install#mac-stable)

######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](https://miro.medium.com/max/1400/1*5k1fi6lswS9a1nhGvRtZ6w.png)

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] (https://miro.medium.com/max/1400/1*bAdYMUsimOA_RJhAVRyWjw.png)

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] (https://miro.medium.com/max/1400/1*h0Z6m0enM8QTlDQiro2Mxw.png)

* * *

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]
(https://miro.medium.com/max/1000/1*a31p1Wk6g9Ip9zfdo--Tng.png)

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

![index.tsx](https://miro.medium.com/max/552/1*xwsbVJKNvXW_HqA-U4dLew.png)
<center><h6>Resultado final do nosso arquivo index.tsx</h6></center>

![App.tsx](https://miro.medium.com/max/552/1*bd4TH4IP46XYavVUAEJ_iQ.png)
<center><h6>Resultado final do nosso arquivo App.tsx</h6></center>


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](https://miro.medium.com/max/1400/1*sbMXFyHAa_UHJZtfrUHeUQ.png)

* * *

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](https://media.giphy.com/media/l1J3CbFgn5o7DGRuE/giphy.gif)