Introdução ao React com Typescript

Introdução ao React com Typescript

Olá leitor, seja muito bem vindo a mais uma sub-lição da jornada principal de ReactJS do portal da Micilini 😁

Nesta sub-jornada, nós iremos aprender a integrar o superset Typescript, a um dos melhores frameworks do mercado de front-end, o React!

Sendo assim, nós iremos aprender a criar projetos com React usando toda a tipagem que o Typescript nos oferece, junto com todas as funcionalidades desse superset 😉

Bora lá?

O que você precisa saber antes de iniciar essa jornada?

Todo o início de jornada, começa com uma grande pergunta: "Será que eu vou conseguir acompanhar os conteúdos daqui em diante?".

E a resposta é... DEPENDE!

Começando desde o início, é necessário que você tenha passado pela jornada Javascript, pois sem essa linguagem, você não vai conseguir entender o mínimo necessário para adentrar no ReactJS.

Em seguida, como o conteúdo que iremos ver daqui em diante, está intimamente ligado a todo conteúdo que você aprendeu (ou vai aprender) na biblioteca do React, é mais do que recomendado que você também tenha passado pela jornada do ReactJS aqui no portal. 

Por fim, é bom você ter um conhecimento sólido em Typescript, mas pode ficar tranquilo que aqui no portal você também vai encontrar uma jornada completíssima que fala tudo o que você precisa saber para atuar com Typescript.

Então recapitulando tudo o que acabei de falar:

Possui todos esses requisitos acima? Então vamos continuar nossa jornada 🙃

Como o React se relaciona com o Typescript?

Como você já deve ter visto na jornada de Typescript aqui do portal da Micilini, você já sabe que essa linguagem está ganhando cada vez mais força no mundo do desenvolvimento de software perante ao Javascript.

Isso por inúmeros fatores como:

Isso faz com que o uso do Typescript na biblioteca do React, nos dê mais possibilidades de desenvolvimento.

Podemos citar como exemplo, o uso de props de um componente por meio de uma interface, o que garante um maior controle dos dados que estão sendo trafegados.

O que melhora (e muito) a confiabilidade do projeto, e até mesmo a escalabilidade do mesmo.

E sim, o React (não vamos mais chamá-lo de ReactJS, ok?) tem suporte padrão a linguagem Typescript, o que o faz assumir um novo nome: ReactTS!

Vite X NextJS X React

Quando se fala em usar Typescript em um projeto React, logo se pensa na utilização de outras soluções que também oferecem suporte nativo a essa linguagem.

Podemos citar algumas delas, tais como:

Vite) É uma ferramenta moderna de construção e desenvolvimento para projetos front-end, desenvolvida por Evan You (criador do Vue.js). Vite é projetada para ser extremamente rápida tanto no desenvolvimento quanto na construção de produção.

NextJS) É um framework para React que facilita a construção de aplicações web renderizadas no servidor (SSR) e aplicações de página única (SPA). Desenvolvido pela Vercel, Next.js oferece uma série de funcionalidades adicionais para otimizar o desenvolvimento de aplicações React.

Lembre-se de que React não é Vite, pois se tratam de bibliotecas completamente diferentes (apesar de fazerem o uso de uma estrutura parecida).

Já o NextJS usa as bases do React para deixá-lo um pouco mais robusto e funcional, principalmente com o uso do BFF (Backend for Frontend).

É importante ressaltar, que tanto o Vite quanto o NextJS, são bibliotecas diferentes e que envolvem tempo para que você possa aprendê-las 🧐

Criando seu primeiro projeto em ReactTS

Para criar um projeto em React com Typescript (ReactTS), é bem simples, basta apenas que você passe a flag --template com o valor typescript.

Então para começarmos com o pé direito, vamos criar uma nova pasta aonde iremos armazenar todos os códigos que iremos aprender nesta jornada.

No meu caso, eu criei uma pasta chamada de jornadaReactTS dentro da minha área de trabalho (desktop):

Em seguida, com o terminal (prompt de comando) aberto dentro da pasta que acabamos de criar (jornadaReactTS), eu executei o seguinte comando para criar o meu primeiro projeto:

npx create-react-app 1-teste-inicial --template typescript

Com isso, uma nova pasta chamada 1-teste-inicial será criada dentro da pasta jornadaReactTS, representando o nosso primeiro projeto feito com ReactTS 🤩

Analisando a estrutura de pastas

Após a criação de um novo projeto em React usando a flag --template typescript, você pode notar que nada de muito diferente mudou:

As únicas coisas que chegaram a mudar (e isso é obvio), foram as extenções dos arquivos, que agora estão declarados como .ts em vez de .js, o que representam arquivos do tipo Typescript.

Além disso, podemos notar que os arquivos App.tsx e index.tsx estão declarados com o X no final.

O que segue a ideia dos arquivos .JSX, se lembra que eles representavam componentes em Javascript?

Então... os arquivos .TSX também representam componentes, só que em Typescript 🙂

Fora isso, se você der uma olhada na lógica existente em cada um dos arquivos de typescript (.ts e .tsx), vai notar que alguns deles já fazem o uso da tipagem oferecida pelo Typescript, como é o caso do index.tsx:

Isso significa que o Typescript já está 100% configurado em nossa aplicação feita com ReactTS 😝

Para iniciar o projeto, o processo continua o mesmo, basta executar o comando npm start dentro da pasta raiz do seu projeto.

Arquivos da lição

Os arquivos desta lição podem ser encontrados no repositório do GitHub por meio deste link.

Conclusão

Nesta lição você aprendeu sobre o uso do Typescript em um projeto feito com React.

Na próxima lição, vamos nos aprofundar ainda mais na estruturação de pastas e no uso de alguns componentes do React usando o Typescript.

Até lá 🤓