Como instalar e utilizar o React pré-configurado para TypeScript (Create React APP)

Por: Angelo Luis Ferreira | 04/10/2022 Acessos: 4.450

Neste tutorial vamos mostrar como instalar e configurar um ambiente de desenvolvimento local no Windows para usar o React pré-configurado para TypeScript no seu computador. Vamos utilizar também a técnica CRA (Create React App) para criar o seu projeto em React, de acordo com a documentação oficial da biblioteca. 

Observações:

a) CRA ou Create React App é uma maneira moderna para criar aplicativos React sem a necessidade de configuração prévia. CRA é, portanto, uma ferramenta autônoma que pode ser executada tanto com npm quanto com Yarn. Neste tutorial vamos mostrar como criar um aplicativo Reat usando a ferramenta de construção CRA com NPM (Node Package Manager).

b) A vantagem de utilizar o TypeScript em relação ao JavaScript puro é adicionar recursos importantes e úteis para a construção de projetos, como tipagem estática, forte e automática, orientação a objetos e a possibilidade de descobrir e corrigir erros em tempo real durante o desenvolvimento.

b) Caso deseje criar o React sem a configuração para TypeScript no seu computador, veja o tutorial Como instalar e utilizar o React no Windows (Create React APP).

c) Se você deseja adicionar o React em apenas algumas partes de um site, leia o tutorial: Como adicionar elementos do React em um site.

O que é React?

O React é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces com o usuário. De código aberto, ele permite compor UI's complexas a partir de pequenos e isolados códigos chamados “componentes”.

UI (User Interface): A interface do utilizador ou interface de usuário, significa a interação homem-máquina, ou seja, é o espaço onde a interação entre humanos e máquinas acontece podendo ser através de um um botão, um menu ou até mesmo um som.

Por que usar React?

1. O React tem sido usado por grandes empresas de conteúdo ao redor do mundo como por exemplo: Facebook, Netflix, eBay entre outras.

2. O React basicamente dá aos desenvolvedores a habilidade de trabalhar com um navegador virtual (Virtual DOM) que é mais rápido e amigável que o navegador real.

3. React faz com que a criação de UIs interativas seja uma tarefa fácil. O React atualiza e renderiza de forma eficiente apenas os componentes necessários na medida em que os dados mudam.

4. React é apenas uma biblioteca JavaScript, há uma API bem pequena para aprender, apenas algumas funções e como usá-las. Depois disso, suas habilidades em JavaScript serão o que te farão um melhor desenvolvedor React.

5. As aplicações depois de desenvolvidas no computador (servidor local) poderão ser transferidas para um servidor de hospedagem Windows ou Apache Linux (servidor web).

O que é TypeScript?

TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem. Wikipédia

Em outras palavras, o TypeScript é um superset (superconjunto) que serve para potencializar a linguagem JavaScript. Com ele é possível construir projetos complexos, pois adiciona novos recursos na linguagem, como tipagem, por exemplo, que permite maior desempenho e produtividade na hora de executar uma aplicação.

Por que usar TypeScript?

1. O typeScript permite a aplicação de Tipagem Estática, muito comum em linguagens como Java e C, tornando o seu projeto muito mais escalável, conciso e com a possibilidade de identificar bugs ainda em tempo de compilação.

2. O typeScript possibilita utilizar a programação orientada a objetos no JavaScript utilizando classes e extensões. O JavaScript puro é uma linguagem estrutura a objetos.

3. O typeScript permite descobrir e corrigir erros em tempo real durante o desenvolvimento.

4. Sites e aplicativos criados com TypeScript podem ser executados tanto no lado do cliente (diretamente no navegador do usuário, por exemplo) quanto no lado do servidor (com Node.js). 

Como habilitar o Windows para a utilização do React

1. Para utilizarmos o React no Windows e criarmos aplicações no navegador será necessário a instalação do NPM (Node Package Manager) que é o responsável pelo gerenciamento dos pacotes de aplicativos, inclusive o próprio React. Para isso, precisaremos instalar o Node.js, que é uma plataforma de desenvolvimento web de alta performance usando JavaScript, e que possuí o NPM como parte do pacote.

2. Acesse o site: https://nodejs.org

3. Para instalar o Node.js no Windows, clique no botão com a versão LTS (atualizada), conforme mostra a figura abaixo:

 4. Após o download, abra o arquivo executável (.msi) para fazer a instalação.

5. Com o Node.js instalado, podemos verificar se o NPM foi instado corretamente:

5.1. Abra o terminal (prompt de comando do Windows) e digite os comandos:

5.1.1. Verificar a versão do Node: node --version + [ENTER]

5.1.1. Verificar a versão do NPM: npm --version + [ENTER]

Obs.: Caso ocorra algum erro reinicie o computador. Se mesmo assim, o problema não foi corrigido, reinstale o node.js.

6. Confirmadas as versões do node e npm podemos dizer que o seu computador Windows está agora habilitado e pronto para a utilização do React.

Como criar um aplicativo React no Windows

1. Defina o diretório onde você irá colocar os seus aplicativos React. No nosso exemplo criaremos uma pasta denominada "exemplos' : C:\exemplos

2. Abra o "prompt de comando do Windows".

3. Volte para a raiz principal do seu computador, utilizando o comando cd\ + [Enter].

4. Acesse o diretório onde você vai armazenar seus aplicativos. No nosso exemplo C:\exemplos.

4.1. Utilize o comando cd caminho_diretório + [ENTER]

cd caminho_diretório

Veja o nosso exemplo a seguir:

 5. Para criar o seu aplicativo React, utilize o comando NPM abaixo. Obs: No nosso exemplo vamos chamar nosso aplicativo de react-ts:

npx create-react-app nome-aplicativo --template typescript

Obs.: O nome do aplicativo (nome-aplicativo) definirá o nome da pasta do projeto. Preferencialmente, deverá ser utilizado letras minúsculas, no máximo 2 palavras separadas com vírgula.

Veja o nosso exemplo abaixo:

5.1. Pode ser que seja solicitado alguma instalação antes. Caso seja solicitado, digite y + [ENTER] para continuar.

6. Aguarde alguns instantes para concluir a instalação. Isso pode demorar alguns minutos.

7. Finalmente, o seu aplicativo React foi criado com sucesso.

Como rodar o seu aplicativo React no navegador

1. Mostraremos agora como rodar o nosso aplicativo em um navegador de internet.

Obs1: Ao criar o aplicativo, automaticamente é gerada um pasta com o mesmo nome do aplicativo, contendo todos os arquivos do React.

Obs2: Quando você cria um aplicativo novo, ele apenas exibirá o logo e o link do React. Para alterá-lo, você precisará de um Editor, como mostraremos mais a diante neste tutorial.

2. No "prompt de comando" ainda, acesse o diretório com o nome do aplicativo que você criou. No nosso exemplo acessaremos a pasta C:\exemplos\react-ts utilizando o comando cd nome-pasta + [ENTER]

3. Agora será preciso utilizar um comando NPM abaixo:

npm start

Veja o nosso exemplo a seguir:

4. Aguarde alguns instantes para a compilação completa do aplicativo.

5. Após realizada a compilação o seu aplicativo será aberto automaticamente no navegador padrão definido no seu sistema operacional. O projeto será carregado localmente na porta 3000, no seguinte endereço: http://localhost:3000/

Como editar e tornar o seu aplicativo React útil

Para tornar o seu aplicativo útil e funcional é necessário editar o código padrão do React que foi gerado. Neste tutorial, mostraremos o primeiro passo para você começar a desenvolver aplicações web com o React. A partir daqui, você estará pronto para aprender mais sobre esta biblioteca e criar seus componentes cada vez mais complexos.

Editando o aplicativo para criar a frase "Hello World"

Vamos, no exemplo abaixo, editar o código padrão para imprimir a frase "Hello World" centralizada na tela do navegador. Desta forma, veremos como fazer alterações no código fonte do aplicativo, onde iremos apenas substituir o logo do React pela frase Hello Word. A seguir, veja como isso acontece:

1. Para alterarmos nosso código, será necessário a utilização de um editor ou um IDE. Neste exemplo, utilizaremos o Visual Studio Code, mas você poderá utilizar outros editores ou IDE's também, desde que apropriados para o React. Para instalar o Visual Studio Code, acesse o link: https://code.visualstudio.com/

Obs.: Fiz testes no Visual Studio Code e no NetBeans e ambos funcionaram muito bem para edição de códigos utilizando o React.

2. Após instalado o editor, abra a pasta onde estarão os seus aplicativos React. No nosso exemplo, vamos abrir a pasta "exemplos".

3. Selecione a pasta do aplicativo que criamos. No nosso exemplo, vamos selecionar a pasta do aplicativo "react-ts". Clique no botão [Selecione] para abrir a pasta.

4. Com a pasta aberta, observe que o React é constituído basicamente da seguinte estrutura.

• node_modules - pasta responsável por guardar todas as dependências do projeto. Essa pasta é criada pelo NPM no momento em que uma biblioteca, como o próprio React, é adicionada ao projeto.
• public - pasta pública da aplicação web. Nela ficam guardados os arquivos iniciais da aplicação, como o index.html que é interpretado pelo navegador, imagens e um arquivo JSON com os parâmetros de configuração do site.
• src - pasta responsável pelo código fonte da aplicação: Aqui ficarão todos os arquivos JavaScript e CSS que irão compor a nossa aplicação.

5. Abra a pasta src que contém o código fonte da nossa aplicação e clique no arquivo App.tsx onde fica o nosso programa responsável pela visualização do aplicativo. Para isso, você poderá utilizar JavaScript puro e/ou JSX (JavaScript and XML) para fazer as alterações.

5.1. O arquivo possui extensão .tsx em função da sintaxe JavaScript + TypeScript + JSX.

5.2. JSX (JavaScript and XML) é uma extensão da sintaxe do JavaScript, parecida com o XML, que  permite interagir com o HTML diretamente, sem precisar aprender uma nova linguagem. Em outras palavras, o JSX parece HTML mas é uma mistura de JavaScript e HTML, entretanto é mais rápido e mais fácil que o JavaScript puro.

6. Agora iremos editar o código padrão do arquivo APP.tsx conforme o nosso exemplo abaixo:

6.1. Substitua o código padrão ...

 6.2. pelo código:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello World!</h1>
        <p>
          Edite <code>src/App.tsx</code> e salve para recarregar automaticamente.
        </p>
        <a
          className="App-link"
          href="https://visualdicas.com.br"
          target="_blank"
          rel="noopener noreferrer"
        >
          Visual Dicas
        </a>
      </header>
    </div>
  );
}

export default App;

 7. Salve as alterações:

8. Se o React estiver rodando no navegador de internet, quando você salvar as alterações no editor, automaticamente elas serão alteradas também na tela do navegador.

9. Caso não esteja com o aplicativo rodando no navegador, abra-o novamente utilizando o comando: npm start

9.1. Para isso utilize o terminal do editor ou o prompt de comando do Windows

9.1.1. Usando o terminal do editor Visual Studio Code

9.1.2. Usando o prompt de comando do Windows

10. Para sair do ambiente de desenvolvimento e finalizar o React, digite [CTRL] + c

10.1. Depois digite S + [Enter] para finalizar:

Obs.: Finalizando o ambiente de desenvolvimento, as alterações realizadas no arquivo App.tsx somente serão visualizadas após iniciar novamente o aplicativo.

Documentação Oficial

1. [ https://create-react-app.dev] » Sobre CRA - Create React App.

2. [https://nodejs.org/en/ ] » Sobre instalar a plataforma de desenvolvimento node.js.

3. [https://pt-br.reactjs.org/tutorial/tutorial.html ] » Tutorial sobre a instalação e uso do React em aplicações web

4. [https://www.typescriptlang.org/] » Página oficial TypeScript