Pesquisa de site

Codifique seu primeiro aplicativo React UI

Aprenda como fazer o desenvolvimento back-end e front-end funcionarem juntos com este tutorial JavaScript.

Quem quer criar seu primeiro aplicativo de UI? Sim, e se você está lendo este artigo, presumo que você também. No exemplo de hoje, usarei JavaScript e a API com Express que demonstrei em meu artigo anterior. Primeiro, deixe-me explicar algumas das tecnologias que você está prestes a usar.

O que é reagir?

React é uma biblioteca JavaScript para construir uma interface de usuário (UI). No entanto, você precisa de mais do que apenas a biblioteca de UI para uma UI funcional. Aqui estão os componentes importantes do aplicativo web JavaScript que você está prestes a criar:

  • npx: Este pacote é para executar pacotes npm.
  • axios: Um cliente HTTP baseado em promessa para o navegador e node.js. Uma promessa é um valor que um endpoint de API fornecerá.
  • http-proxy-middleware: Configura middleware proxy com facilidade. Um proxy é um middleware que ajuda a lidar com mensagens entre o endpoint do aplicativo e o solicitante.

Pré-configuração

Se ainda não o fez, dê uma olhada no meu artigo anterior. Você usará esse código como parte deste aplicativo React. Nesse caso, você adicionará um serviço para usar como parte do aplicativo. Como parte deste aplicativo, você deve usar o pacote npx para criar a nova estrutura de pastas e aplicativo:

$ npx create-react-app count-ui
npx: installed 67 in 7.295s

Creating a new React app in /Users/cherrybomb/count-ui.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
[...]
Installing template dependencies using npm...
+ @testing-library/jest-dom@5.16.4
+ @testing-library/user-event@13.5.0
+ web-vitals@2.1.4
+ @testing-library/react@13.3.0
added 52 packages from 109 contributors in 9.858s
[...]
Success! Created count-ui at /Users/cherrybomb/count-ui
[...]
We suggest that you begin by typing:

  cd count-ui
  npm start

Como você pode ver, o comando npx criou um novo modelo com uma estrutura de pastas, um arquivo README incrível e um repositório Git. Aqui está a estrutura:

$ cd count-ui/
/Users/cherrybomb/count-ui

$ ls -A -1
.git
.gitignore
README.md
node_modules
package-lock.json
package.json
public
src

Esse processo também inicializou o repositório Git e definiu o branch como master, o que é um truque muito legal. Em seguida, instale os pacotes npm:

$ npm install axios http-proxy-middleware
[...]
npm WARN @apideck/better-ajv-errors@0.3.4 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.
+ http-proxy-middleware@2.0.6
+ axios@0.27.2
added 2 packages from 2 contributors, updated 1 package and audited 1449 packages in 5.886s

Agora que eles estão configurados, adicione seu arquivo services e main.js:

$ mkdir src/services
src/services

$ touch src/services/main.js

A pré-configuração agora está concluída, então você pode trabalhar na codificação.

Codifique uma UI do início ao fim

Agora que você tem tudo pré-configurado, você pode montar o serviço para sua aplicação. Adicione o seguinte código ao arquivo main.js:

import axios from 'axios';
const baseURL = 'http://localhost:5001/api';
export const get = async () => await axios.get(`${baseURL}/`);
export const increment = async () => await axios.post(`${baseURL}/`);
export default {
    get,
    increment
}

Este processo cria um arquivo JavaScript que interage com a API que você criou no artigo anterior.

Configure o proxy

Em seguida, você deve configurar um middleware proxy criando um novo arquivo no diretório src.

$ touch src/setupProxy.js

Configure o proxy com este código em setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

Neste código, a função app.use especifica o serviço a ser usado como /api ao conectar-se ao projeto de API existente. No entanto, nada define api no código. É aqui que entra um proxy. Com um proxy, você pode definir a função api no nível do proxy para interagir com sua API Express. Este middleware registra solicitações entre os dois aplicativos porque a UI e a API usam o mesmo host com portas diferentes. Eles exigem um proxy para transferir o tráfego interno.

Importações de JavaScript

No diretório base src, você vê que o modelo original criou um App.js e você deve adicionar main.js (no App.js, e você deve adicionar main.js (no App.js).services) para suas importações no arquivo App.js. Você também precisa importar o React logo na primeira linha, pois ele é externo ao projeto:

import React from 'react'
import main from './services/main';

Adicione a função de renderização

Agora que você tem suas importações, você deve adicionar uma função de renderização. Na função App() de App.js, adicione a primeira seção de definições para react e count antes a seção retorno. Esta seção obtém a contagem da API e a coloca na tela. Na função return, um botão permite aumentar a contagem.

function App() {
const [count, setCount] = React.useState(0);
React.useEffect(()=>{
  async function fetchCount(){
    const newCount = (await main.get()).data.count;
    setCount(newCount);
  }
  fetchCount();
}, [setCount]);
return (  
    <div className="App">
      <header className="App-header">
        <h4>
          {count}
        </h4>
        <button onClick={async ()=>{
          setCount((await main.increment()).data.count);
        }}>
          Increment
        </button>
      </header>
    </div>
  );
}

Para iniciar e testar o aplicativo, execute npm run start. Você deve ver a saída abaixo. Antes de executar o aplicativo, confirme se sua API está sendo executada no aplicativo Express executando node ./src/index.js.

$ npm run start
> count-ui@0.1.0 start /Users/cherrybomb/count-ui
> react-scripts start

[HPM] Proxy created: /  -> http://localhost:5000
(node:71729) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:71729) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

Quando tudo estiver rodando, abra seu navegador em localhost:5000 para ver que o front end tem uma página bonita, reconhecidamente mínima, com um botão:

(Jessica Cherry, CC BY-SA 4.0)

O que acontece quando você pressiona o botão? (Ou, no meu caso, pressione o botão várias vezes.)

(Jessica Cherry, CC BY-SA 4.0)

O contador sobe!

Parabéns, agora você tem um aplicativo React que usa sua nova API.

Aplicativos da Web e APIs

Este exercício é uma ótima maneira de aprender como fazer um back-end e um front-end funcionarem juntos. Vale ressaltar que se você estiver usando dois hosts, não precisará da seção de proxy deste artigo. De qualquer forma, JavaScript e React são uma forma rápida e padronizada de colocar um front-end em funcionamento com etapas mínimas. Esperamos que você tenha gostado deste passo a passo. Conte-nos sua opinião sobre como aprender a codificar em JavaScript.

Artigos relacionados: