TypeScript e React usando create-react-app: um guia passo-a-passo para configurar seu primeiro aplicativo - Agatetepê
Primeiros passos no seu primeiro aplicativo TypeScript e React com configuração zero
Este tutorial mostrará como iniciar rapidamente a criação de aplicativos React usando o TypeScript sem a necessidade de qualquer configuração usando o create-react-app react create-react-app (CRA). Vamos supor que você já tenha o Nó e o NPM instalados em sua máquina. Seu aplicativo TypeScript / React funcionará diretamente da caixa sem precisar ejetar o CRA. Além disso, você aprenderá como construir seus próprios componentes e gerenciar props e state usando o TypeScript.
Siga o feed JavaScript para todas as notícias do JS>
Instale o aplicativo create-react-app
create-react-app é uma ferramenta de linha de comando que permite aos desenvolvedores criar facilmente novos aplicativos React com padrões sensíveis e configuração zero.
Inicialize seu aplicativo React com o TypeScript
Invoque o comando create-react-app react create-react-app com uma opção TypeScript adicional para gerar um aplicativo React usando o TypeScript como a sintaxe JS padrão.
criar-reagir-aplicativo meu-aplicativo --scripts-versão = react-scripts-ts
Se você já usou create-react-app antes, isso deve parecer muito familiar. A informação adicional é adicionar o --scripts-version=react-scripts-ts . react-scripts-ts é o comando que informa ao CRA para usar o TypeScript em vez do JavaScript e adicionar as ferramentas para que ele funcione imediatamente. Isso gerará os seguintes arquivos e estrutura de pastas:
?? node_modules/
?? public/
| - - index.tsx
| - - registerServiceWorker.ts
| - - logo.svg
| - - App.tsx
| - - App.test.tsx
| - - App.css
| - - index.css
| - - ativos/
?? package.json
?? tsconfig.json
?? tsconfig.test.json
?? tslint.json
A seguir, uma explicação de cada parte:
tsconfig.json declara as opções do TypeScript. Ele fica na raiz de um projeto TypeScript e indica as configurações e arquivos do compilador a serem incluídos.
tslint.json são as configurações do linter a serem usadas pelo TSLint .
public é a pasta de ativos estáticos que será exibida, como o documento HTML e o arquivo de manifesto.
src mantém o código da interface do usuário do aplicativo. Isso inclui nossos componentes TypeScript e estilo CSS. O arquivo index.js tradicional foi substituído por index.tsx como o ponto de entrada.
Reagir tipos para TypeScript com arquivos de declaração
Além de configurar a compilação do TypeScript, também recebemos todos os arquivos de declaração necessários para usar o TypeScript com o React. Um arquivo de declaração é usado para descrever os tipos de arquivos gravados em JavaScript nativo – ele pode ser visto como uma interface entre JavaScript e TypeScript. Esses arquivos são prefixados com a declaração @types . A configuração do TypeScript create-react-app react create-react-app é fornecida com os seguintes arquivos de declaração.
Estes são instalados via NPM e podem ser encontrados na sua pasta package.json .
Reagir modificações para o TypeScript
Para usar o React com o TypeScript, você deve fazer algumas pequenas modificações em como criar um aplicativo padrão do React.
Use arquivos .tsx para JSX
Além de um novo arquivo .ts para o TypeScript, há também uma nova extensão de arquivo .tsx . Essa é a extensão que você deve usar sempre que incluir a sintaxe JSX em um arquivo do componente React. Você também precisa do jsx configurado como true, o que é feito por padrão. O TypeScript é capaz de compilar o JSX diretamente no JavaScript. Para obter mais informações, você pode revisar os documentos do TypeScript no JSX .
Importando Reagir e ReactDOM
Você pode notar que nos componentes padrão use a seguinte sintaxe:
import * como Reagir de 'reagir';
import * como ReactDOM de 'react-dom';
Você não pode mais import React from 'react'; . O React é exportado como um módulo CommonJS que não usa uma exportação padrão. Neste ponto, não é imperativo saber exatamente o motivo, mas apenas estar ciente de como você deve importar o React para fazê-lo funcionar. Isso também significa que você declara seus componentes como class App extends React.Component {...} .
Uma das melhores partes sobre como usar o TypeScript é que você não precisa mais usar o pacote prop-types . Existe uma pequena curva de aprendizado para usar o TypeScript para props e state, mas depois de entendê-lo, ele é muito mais poderoso do que a metodologia padrão do React.
Você definirá uma interface adereços para cada um de seus componentes aos quais você passa adereços. Isso declara a forma do objeto e os tipos associados às chaves. Além disso, você deve declarar uma interface para o state dos componentes de classe.
Componente funcional sem estado
Para demonstrar um componente funcional com props, substituiremos o cabeçalho <h1> no App.tsx por nosso próprio componente <Header/> . Comece criando Header.tsx . Ele recebe um name prop que vai dizer olá ao nome da pessoa. Dentro do nosso arquivo, vamos criar um componente funcional:
Começamos importando o React. Então nós declaramos a interface Props com uma única string prop de name? . Vamos tornar o nome opcional, então indicamos isso com um ? . Marcando uma chave como opcional significa que seu tipo pode ser string | undefined .
Quando criamos o componente Header , observe o React.SFC<Props> . O "SFC" significa componente funcional sem estado. Embora essa declaração não seja obrigatória, é o que nos permite usar o defaultProps . Finalmente, declaramos o tipo props como Props referenciando a interface que criamos.
Para mostrar os fundamentos de um componente de classe, substituiremos a descrição de <p> no App.tsx por um contador. Uma das principais diferenças entre uma classe e um componente funcional é que um componente de classe pode manter seu próprio estado. A outra diferença principal é a capacidade de acessar métodos de ciclo de vida que estão fora do escopo deste tutorial.
Crie um arquivo Description.tsx e adicione o seguinte código.
Começamos declarando uma interface para os Props e o State . Haverá uma countBy chamadas de suporte opcional, que determinará o valor de incremento. O componente em si manterá a count usando seu estado.
O componente é declarado com os tipos Props e State como
class Description extends React.Component<Props, State> { e os defaultProps são declarados como uma variável estática. O estado é inicializado com uma count de 0.
A função de increase é usada para incrementar o contador. O countBy é extraído como const countBy: number = this.props.countBy!; . O ponto de exclamação ! indica para o TypeScript que sabemos que o valor existirá e para não lançar um erro potencial undefined . Finalmente, criamos o HTML para conectar o componente.
Seu aplicativo final create-react-with componentes do TypeScript
Dentro do nosso App.tsx nós importamos os componentes que acabamos de criar e substituímos o HTML padrão do CRA. O name prop e countBy prop deve corresponder aos tipos declarados no componente filho. Como os objetos são ambos opcionais, eles também podem ser indefinidos, e defaultProps será usado.
E isso é tudo que você precisa para começar com o TypeScript e o React! Seu aplicativo agora deve ter os novos recursos e estar totalmente em execução com o TypeScript.
Se você estiver interessado em React e TypeScript, siga a publicação itconnected para mais dos nossos próximos tutoriais. Vamos mostrar como construir a qualidade da produção. Reagir aplicativo usando o TypeScript.