Como instalar e utilizar o React no Windows (Create React APP)

Por: Angelo Luis Ferreira | 08/07/2020 Acessos: 13.963

Neste tutorial vamos mostrar como criar e configurar um ambiente de desenvolvimento local no Windows para você começar usar o React no seu computador. Para isso, vamos utilizar a técnica CRA (Create React App) para você criar o seu projeto em React, de acordo com a documentação oficial da biblioteca. Existem também  outras ferramentas de criação, como a Vite, por exemplo.

Observações:

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

b) 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).

c) Vite é uma ferramenta de construção que foi inicialmente desenvolvida para Vue.js. O Vite oferece atualmente suporte à maioria das estruturas da web, inclusive para o React. Para saber mais, leia https://vitejs.dev/

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).

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, 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 instalado e configurado 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-first:

npx create-react-app nome_aplicativo

Veja o nosso exemplo abaixo:

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-first 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. Agora, abra a pasta do aplicativo que criamos. No nosso exemplo vamos abrir a pasta do aplicativo "react-first".

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.js onde fica o nosso programa. Para isso, você poderá utilizar JavaScript puro e/ou JSX (JavaScript and XML) para fazer as alterações.

5.1. 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.js 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.js</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.js 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