Criando um app React com Typescript: guia passo a passo
Se você está com uma ideia de um projeto que precisa ser dinâmico e moderno, talvez React seja uma boa escolha de tecnologia para você usar. E um ótimo jeito de manter os bugs longe do seu projeto é usando Typescript, que é um super set de tipos para o javascript. Para saber mais, leia esse artigo.
Primeiros passos
Primeiro, você precisará configurar o ambiente de desenvolvimento. Isso envolve a instalação do Node.js, que é uma plataforma de desenvolvimento JavaScript, e do npm, que é o gerenciador de pacotes do Node.js. Em seguida, você precisará instalar o create-react-app, que é uma ferramenta que ajuda a criar um novo aplicativo React com facilidade.
Depois de instalar essas ferramentas, você estará pronto para começar a criar seu aplicativo React com Typescript.
Configurando o Ambiente
Instalação do Node.js e NPM
Antes de começar a criar o primeiro app React com TypeScript, é necessário instalar o Node.js e o NPM. Essas ferramentas são essenciais para o desenvolvimento de aplicações web modernas.
Para instalar o Node.js e o NPM, basta acessar o site oficial e baixar o instalador correspondente ao seu sistema operacional. Após a instalação, verifique se tudo foi instalado corretamente executando os comandos node -v e npm -v no terminal.
Criação do Projeto React com TypeScript
Com o Node.js e o NPM instalados, é possível criar o projeto React com TypeScript. Para isso, basta executar o seguinte comando no terminal:
1npx create-react-app my-app --template typescript
Esse comando cria um novo projeto React com TypeScript, utilizando o template padrão do Create React App. Após a criação do projeto, é possível executá-lo com o comando npm start.
É importante ressaltar que o Create React App já configura automaticamente o ambiente de desenvolvimento com as ferramentas necessárias para o desenvolvimento de aplicações React com TypeScript, como o Webpack e o Babel. Dessa forma, o desenvolvedor pode focar apenas na criação do app, sem se preocupar com a configuração do ambiente.
Estrutura Básica do Projeto
Ao criar um aplicativo React com TypeScript, é importante ter uma estrutura básica bem definida. Isso ajuda a organizar os arquivos e torna mais fácil a manutenção do código. Nesta seção, serão apresentados os principais elementos da estrutura básica de um projeto React com TypeScript.
Organização dos Arquivos
A organização dos arquivos em um projeto React com TypeScript pode variar de acordo com as necessidades do desenvolvedor e do projeto em questão. No entanto, é comum que a estrutura básica do projeto contenha os seguintes diretórios:
- src: diretório que contém o código-fonte do aplicativo.
- public: diretório que contém os arquivos públicos do aplicativo, como o arquivo HTML principal e as imagens.
- node_modules: diretório que contém as dependências do projeto.
- build: diretório que contém os arquivos gerados pelo processo de build do aplicativo.
Dentro do diretório src, é comum que os arquivos sejam organizados em subdiretórios de acordo com a funcionalidade que eles implementam. Por exemplo, pode-se ter um subdiretório para os componentes, outro para as páginas e outro para os serviços.
Componentes React
Criando um Componente
Um componente React é uma parte reutilizável de uma interface de usuário. Ele pode ser definido como uma função ou uma classe. Para criar um componente React, é necessário importar o React e definir uma função que retorne um elemento React. A seguir, um exemplo de como criar um componente simples:
1import React from 'react'; 2 3function HelloWorld() { 4 return <h1>Hello, World!</h1>; 5} 6 7export default HelloWorld;
Este componente pode ser usado em outras partes da aplicação como qualquer outro elemento HTML.
Props e State com TypeScript
Os componentes React podem receber dados através de suas propriedades (props) e armazenar dados em seu estado interno (state). O TypeScript pode ser usado para definir o tipo desses dados e garantir que eles sejam usados corretamente.
1import React, { useState } from 'react'; 2 3interface Props { 4 name: string; 5} 6 7function Greeting(props: Props) { 8 const [count, setCount] = useState(0); 9 10 return ( 11 <div> 12 <h1>Hello, {props.name}!</h1> 13 <p>You clicked {count} times.</p> 14 <button onClick={() => setCount(count + 1)}> 15 Click me 16 </button> 17 </div> 18 ); 19} 20 21export default Greeting;
Neste exemplo, o componente Greeting recebe uma propriedade name do tipo string. Ele também armazena um estado interno count do tipo number que é atualizado quando o botão é clicado. O TypeScript garante que o name seja sempre uma string e que o count seja sempre um número.
Gerenciamento de Estado
O gerenciamento de estado é uma parte crucial de qualquer aplicativo React. Nesta seção, vamos explorar algumas das opções disponíveis para gerenciar o estado em um aplicativo React com TypeScript.
Utilizando o useState
O hook useState é uma das principais formas de gerenciar o estado de um componente em React. Ele permite que você adicione estado a um componente funcional sem precisar converter para uma classe.
Para utilizar o useState, basta importá-lo do React e chamar a função dentro do componente. O primeiro parâmetro é o valor inicial do estado e o segundo é uma função que permite atualizar o estado.
1import React, { useState } from 'react'; 2 3function Counter() { 4 const [count, setCount] = useState(0); 5 6 return ( 7 <div> 8 <p>Você clicou {count} vezes</p> 9 <button onClick={() => setCount(count + 1)}> 10 Clique aqui 11 </button> 12 </div> 13 ); 14}
Context API com TypeScript
O Context API é uma forma de compartilhar dados entre vários componentes em uma árvore de componentes, sem precisar passar explicitamente as props através de cada nível.
Para utilizar o Context API, primeiro é necessário criar um contexto com a função createContext. Em seguida, pode-se definir um provedor para o contexto, que é responsável por fornecer o valor do contexto para os componentes filhos.
1import React, { createContext, useContext } from 'react'; 2 3interface ThemeContextType { 4 theme: string; 5 setTheme: (theme: string) => void; 6} 7 8const ThemeContext = createContext<ThemeContextType>({ 9 theme: 'light', 10 setTheme: () => {}, 11}); 12 13function App() { 14 const [theme, setTheme] = useState('light'); 15 16 return ( 17 <ThemeContext.Provider value={{ theme, setTheme }}> 18 <div> 19 <Header /> 20 <Main /> 21 <Footer /> 22 </div> 23 </ThemeContext.Provider> 24 ); 25} 26 27function Header() { 28 const { theme, setTheme } = useContext(ThemeContext); 29 30 return ( 31 <header> 32 <h1>Meu aplicativo</h1> 33 <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> 34 Trocar tema 35 </button> 36 </header> 37 ); 38}
Estilização e CSS
A estilização de um aplicativo React com TypeScript é uma parte crucial do desenvolvimento de uma aplicação moderna. Existem várias opções para estilização em React, incluindo CSS-in-JS e pré-processadores de CSS como SASS e SCSS.
CSS-in-JS com TypeScript
CSS-in-JS é uma técnica que permite escrever estilos diretamente em arquivos JavaScript ou TypeScript. Isso pode ajudar a reduzir o tempo de carregamento da página e melhorar a modularidade do código.
Uma biblioteca popular para CSS-in-JS com TypeScript é o Styled Components. Ele permite que os desenvolvedores escrevam estilos como componentes React, tornando-os mais fáceis de gerenciar e reutilizar.
Exemplo com o styled-components:
1import React from 'react'; 2import styled from 'styled-components'; 3 4// Cria um componente de estilo 5const StyledButton = styled.button` 6 background-color: #007bff; 7 color: white; 8 padding: 10px 20px; 9 border-radius: 5px; 10 border: none; 11 cursor: pointer; 12 13 &:hover { 14 background-color: #0056b3; 15 } 16`; 17 18const App: React.FC = () => { 19 return ( 20 <div> 21 <StyledButton>Clique aqui</StyledButton> 22 </div> 23 ); 24} 25 26export default App;
SASS e SCSS
SASS e SCSS são pré-processadores de CSS que permitem escrever estilos mais avançados, como variáveis, funções e mixins. Eles também podem ajudar a tornar o código mais organizado e fácil de ler.
Para usar SASS ou SCSS em um aplicativo React com TypeScript, é necessário configurar um pré-processador de CSS. Uma opção popular é o node-sass, que pode ser instalado via npm.
Em resumo, a escolha da técnica de estilização em um aplicativo React com TypeScript depende das necessidades do projeto e das preferências do desenvolvedor. CSS-in-JS pode ser uma boa opção para projetos menores ou para aqueles que precisam de estilos mais dinâmicos, enquanto SASS e SCSS podem ser mais adequados para projetos maiores ou para aqueles que precisam de estilos mais complexos.