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
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.
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.
Se executarmos o comando yarn start no nosso terminal dentro da pasta do projeto que criamos, o projeto irá compilar sem problemas.
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.
Agora dentro da pasta src iremos fazer o mesmo com os arquivos index.tsx e App.tsx
Resultado final do nosso arquivo index.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!
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!
Top comments (0)