No dia 15/10/2019 tivemos a release oficial do Ionic React, que é o suporte ao Framework React utilizando os componentes do Ionic.
Eu sou um grande fã do Ionic, porém sou Time Angular, mas neste artigo vou comentar um pouco sobre esta novidade e mostrar como fazemos um App para listar os cursos do balta com as tecnologias mencionadas.
Lançamento do Ionic React
Atualizando o Ionic
A primeira coisa que precisamos fazer para trabalhar com Ionic+React+TS é instalar ou atualizar o Ionic, e ambos são feitos pelo mesmo comando 'npm install -g ionic'. No meu caso a versão instalada foi a 5.4.4.
Você pode conferir a versão instalada do seu Ionic utilizando o comando 'ionic --version'.
Criando o App
Com o Ionic atualizado, basta executar o comando 'ionic start NOMEDOSEUAPP' para ser gerado um novo App.
Durante o processo de geração, ele irá te perguntar se deseja criar um projeto com Angular ou React, selecione React.
Estrutura do App
Ao abrir o App criado no Visual Studio Code, podemos notar uma estrutura simples de pastas, similar a criada pelo 'create-react-app', conhecido CLI do React.
Ele também já configura nosso App para usar TypeScript e arquivos TSX, que contém toda estrutura (Comportamento, Estilos e Marcacão) no mesmo arquivo.
Temos então no arquivo App.tsx a estrutura inicial da nossa aplicação, com a chamada para o carregamento da Home.tsx nas definições de rotas.
Suporte a TypeScript nativo
Como podemos notar, utilizamos o TSX ao invés do JSX, o que significa que estamos utilizando o Superset TypeScript, que particularmente eu gosto bastante.
Tudo relacionado ao TypeScript já vem configurado, mas pode ser facilmente modificado no arquivo tsconfig.json.
Lembre-se que além da tipagem o TS permite transpilarmos para versões anteriores do EcmaScript, ou seja, podemos utilizar features do futuro e transpilar para Browsers mais antigos. No caso, vem configurado sempre o ES5.
Instalando o Axios
Para este App vamos fazer uma requisição HTTP a API do balta.io para listar os cursos na tela, e para isto vamos utilizar o Axios, que vai gerenciar nossas requisições HTTP.
Sendo assim, vamos executar o comando 'npm install axios --save' para instalá-lo e armazenar sua referência no packages.json.
Com isto feito, vamos mover para Home.tsx e importar o Axios no cabeçalho.
Estados
Movendo adiante temos a estrutura do nosso componente, que nada mais é do que uma classe que implementa o React.FC (Function Components).
Nele vamos declarar uma constante contendo os cursos (courses) e a função que vamos utilizar para populá-los (setData).
Em seguida fazemos uso do useState (Não esqueça de importá-lo no topo) para gerenciar o estado deste componente.
React Hooks – useEffects
Com os estados definidos, vamos utilizar o useEffect, um Hook para fazer a requisição na API assim que o componente é gerado.
Não esqueça de importar o useEffect no topo da página.
Na função useEffect fazemos a chamada a API utilizando o Axios (axios.get), manipulando o resultado posteriormente com then ou catch.
No caso de erros, não estou tratando nada aqui, mas fica a seu critério melhorar isto ou não.
No then, após retornar os dados, fazemos uso do setData, que definimos previamente no estado para popular os cursos.
Tudo pronto, nossa lista de cursos obtidas da API já está pronta para ser utilizada no HTML.
Componentes do Ionic
Diferente do Angular, aqui cada componente deve ser importado, então à medida que formos utilizando os componentes, é só executar 'CTRL+.' sobre eles para fazer a importação.
Outra diferença está na chamada dos componentes, onde temos 'ion-page' no Angular e 'IonPage' no React, mas seguindo a convenção que o React utiliza, isto é correto.
A estrutura de uma página Ionic é composta por um IonPage e um IonContent, podendo conter um IonHeader e IonFooter também, mas neste caso, vamos focar no IonContent.
Dentro dele vamos utilizar a função Map do JS/TS para percorrer os cursos e exibi-los na tela.
Pronto, temos uma aplicação funcional, lendo dados de uma API, feita com Ionic, React e TypeScript.
Conclusão
Para mim é uma ótima novidade o suporte a React no Ionic, significa o Ionic ainda mais forte com apoio do pessoal de React.
Confesso que tenho que me dedicar mais a React, sempre foquei muito em Angular, que é meu público alvo, porém gostei muito do que vi com Ionic e TS! Estou empolgado!
Compartilhe este artigo
André Baltieri
7x Microsoft MVP
Olá eu sou o André Baltieri, desenvolvedor Web desde 2003, já trabalhei no Brasil e nos EUA, em projetos de diversos tamanhos.
Recebi por sete vezes consecutivas, o prêmio de Most Valuable Professional da Microsoft, um reconhecimento global dado para os maiores influentes em suas tecnologias.
Atuei também como Head of People, recrutando, selecionando e direcionando a carreira de mais de 70 desenvolvedores em uma das melhores empresas para se trabalhar do Brasil.
Sou palestrante em diversos eventos como ASP.NET Conference, DevXperience, TDC, GDG dentre outros e desde 2012 realizo treinamentos e consultorias em diversas empresas do Brasil, acumulando uma ótima experiência que também transformo em cursos InCompany e Online.
