Aplicativo React de página única

Aplicativos de página única, geralmente chamados de SPAs, estão se tornando cada vez mais populares entre os desenvolvedores web. React é uma biblioteca JavaScript que permite a criação de interfaces de usuário complexas e dinâmicas – tornando-a a escolha ideal para aplicativos de página única. Neste artigo, exploraremos como construir um aplicativo de página única (SPA) React. Discutiremos roteamento, busca de dados e integração de API para criar um SPA completo usando React.

O React fornece aos desenvolvedores as ferramentas necessárias para desenvolver SPAs rápidos e eficientes. Ao utilizar a estrutura baseada em componentes do React, os desenvolvedores podem facilmente dividir seu aplicativo em partes individuais que podem ser trabalhadas de forma independente, sem afetar outras partes da base de código. Isso garante que apenas o código relevante seja modificado quando alterações ou atualizações forem feitas – reduzindo significativamente o tempo de desenvolvimento em comparação com outras estruturas ou bibliotecas.

Os aplicativos de página única (SPAs) têm ganhado popularidade nos últimos anos, principalmente com o surgimento de estruturas de desenvolvimento web como React e Angular. De acordo com Pesquisa sobre o estado de JSque entrevistou mais de 27.000 desenvolvedores, 49,5% dos entrevistados relataram usar React, uma biblioteca JavaScript popular para construção de SPAs.

Quer você seja um desenvolvedor iniciante ou experiente, este artigo fornecerá uma compreensão abrangente dos aplicativos de página única. Escolher o React para criar seu próximo aplicativo de página única seria benéfico em termos de economia de custos e capacidade de manutenção em um período de longo prazo. Então, vamos nos aprofundar na construção de um aplicativo de página única usando React!

Aplicativo de página única versus aplicativo de várias páginas

O que é um aplicativo de página única (SPA)?

Em contraste com os aplicativos web tradicionais, os aplicativos de página única (SPAs) só precisam atualizar a página exibida no momento para responder ao usuário, eliminando a necessidade de carregar páginas repetidamente do servidor. Essa abordagem evita a interrupção da experiência do usuário entre páginas sucessivas, fazendo com que o aplicativo se comporte mais como um aplicativo de desktop.

Todo o código necessário, como HTML, JavaScript e CSS, é recuperado com o carregamento de uma única página em um SPA. Os recursos apropriados são carregados dinamicamente e adicionados à página conforme necessário, permitindo a navegação por meio de cliques em links ou outros elementos interativos sem a necessidade de recarregamentos completos de conteúdo.

Vantagens e desvantagens

Vejamos agora algumas vantagens e desvantagens dos aplicativos de página única para entender melhor como eles podem ser benéficos para nós ou não.

O que são aplicativos de várias páginas?

Um aplicativo de várias páginas (MPA) é um tipo de aplicativo da web tradicional que consiste em várias páginas com seu próprio URL e é carregado independentemente do servidor quando acessado. Eles são bons se você criar uma loja online, um site de catálogo ou um site comercial com vários recursos em várias páginas.

Os usuários podem solicitar uma página HTML renderizada em seu navegador clicando em um link ou digitando uma URL na barra de endereço, que o servidor processa. Como o servidor é responsável por criar e entregar a página HTML sempre que uma nova página é carregada, o servidor deve fazer uma nova solicitação ao cliente.

As interações do usuário em aplicativos típicos de várias páginas levam ao recarregamento de páginas, o que pode impedir o fluxo do usuário e causar atrasos. Isso ocorre porque a página inteira, incluindo todos os ativos estáticos como imagens, folhas de estilo e scripts, deve ser recarregada do servidor.

As AMPs são simples de criar e acompanhar. Eles podem ser mais lentos para carregar e responder lentamente em comparação com aplicativos de página única (SPAs), o que é uma desvantagem.

Os MPAs são confiáveis ​​na criação de sites complexos com inúmeras páginas e URLs exclusivos. No entanto, os SPAs são mais adequados para a criação de aplicativos interativos e responsivos que proporcionam uma experiência de usuário perfeita.

Criando um aplicativo de página única no React usando React Router

Neste tutorial, você criará um aplicativo React simples usando React Router.

Preparando-se para começar a construir seu aplicativo SPA

Para implementar o aplicativo React com sucesso, você deve ter o seguinte em sua máquina.

Pré-requisitos

• Node.js: A versão mais recente do Node.js em sua máquina.
• Biblioteca de reação: A última versão do Reagir em sua máquina.
• Um editor de código: Qualquer IDE que suporte React.

Começando

Execute o seguinte comando Create React App create em seu terminal para inicializar um React em seu diretório. create-react-app é uma ferramenta que inicializa um aplicativo react sem configuração de compilação.

npx create-react-app spa_react

Agora você pode ver uma pasta chamada spa_react em seu diretório. Esta é a pasta do seu projeto React. Navegue até esta pasta usando o seguinte comando:

cd spa_react

É assim que seu package.json deve ser.

{
  "name": "spa_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": (
      "react-app",
      "react-app/jest"
    )
  },
  "browserslist": {
    "production": (
      ">0.2%",
      "not dead",
      "not op_mini all"
    ),
    "development": (
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    )
  }
}

Antes de prosseguir com a construção de nosso aplicativo, o pacote do roteador React também precisa ser instalado. Execute o seguinte comando para instalar o pacote react router dom.

npm install react-router-dom

Construindo seu primeiro aplicativo de página única

A forma de desenvolver este aplicativo é a mesma usada para todos os aplicativos anteriores. Um componente pai central estará lá. As páginas do aplicativo serão subsistemas modulares trabalhando juntos para formar o todo. O React Router é útil ao selecionar quais componentes exibir e quais ocultar.

Já que o diretório do projeto tem código React padrão no momento. Navegue até as pastas src e public e remova o conteúdo, respectivamente.

Agora navegue até a pasta pública e crie um arquivo index.html com o seguinte código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React SPA Application</title>
  </head>
  <body>
    <div ></div>
  </body>
</html>

Agora adicione o seguinte código ao arquivo index.js na pasta src.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

No código acima você deve importar os módulos React e ReactDOM. ReactDOM é a biblioteca que fornece métodos para renderizar esses componentes no DOM (Document Object Model).

O método ReactDOM.createRoot é então chamado. Este método cria uma nova instância raiz do ReactDOM que será usada para renderizar o componente App. Então o método root.render é chamado com o componente App como argumento. Este método renderiza o componente App no ​​DOM, substituindo qualquer conteúdo existente no elemento raiz.

Agora crie um novo arquivo chamado App.js contendo o código do componente principal.

import React, { Component } from "react";

class App extends Component {
  render  {
    return (
        <div className="App">
          <h1>A Simple SPA made using React</h1>
          <ul className="header">
            <li><a href="
            <li><a href="
            <li><a href="
          </ul>
          <div className="pageContent">

          </div>
        </div>
    );
  }
}

export default App;

No código acima, há um componente chamado App que renderiza um layout estático de aplicativo de página única com um cabeçalho e uma seção de conteúdo vazia. O cabeçalho contém três links de navegação para rotas diferentes.

Ao executar o servidor de desenvolvimento usando o comando npm start em seu terminal, você poderá ver o código HTML adicionado no componente raiz do navegador.

Vamos agora criar páginas de conteúdo separadas para as rotas definidas anteriormente no arquivo App.js. Vamos começar com o conteúdo da página inicial. Crie um novo arquivo Home.js na pasta src. Agora adicione o seguinte código:

import React, { Component } from "react";

class Home extends Component {
  render  {
    return (
      <div>
        <h3>SPA App - Home</h3>
        <p>This is a paragraph on the HomePage of the SPA App.</p>
      </div>
    );
  }
}

export default Home;

Seguindo em frente, agora crie um novo arquivo chamado About.js na pasta src e adicione o código abaixo:

import React, { Component } from "react";

class About extends Component {
  render  {
    return (
      <div>
        <h3>SPA App - About</h3>
        <p>This is a paragraph on the About of the SPA App.</p>
        <p>The Team of SPA App.</p>
        <table>
        <thead>
            <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>(email protected)</td>
            </tr>
            <tr>
            <td>2</td>
            <td>Jane Doe</td>
            <td>(email protected)</td>
            </tr>
            <tr>
            <td>3</td>
            <td>Bob Smith</td>
            <td>(email protected)</td>
            </tr>
        </tbody>
        </table>
      </div>
    );
  }
}

export default About;

Agora crie outro arquivo no mesmo diretório chamado Contact.js e adicione o seguinte código:

import React, { Component } from "react";

class Contact extends Component {
  render  {
    return (
      <div>
        <h3>SPA App - Contact</h3>
        <p>Please feel free to contact us with any questions or inquiries you may have. We are always happy to help!</p>
        <h4>Contact Details:</h4>
        <ul>
        <li><strong>Email:</strong> (email protected)</li>
        <li><strong>Phone:</strong> 1-800-555-1234</li>
        <li><strong>Address:</strong> 123 Main St, Anytown USA</li>
        </ul>
      </div>
    );
  }
}

export default Contact;

As páginas de conteúdo agora estão prontas. Cada arquivo possui um componente simples com algum conteúdo. O próximo passo seria usar os componentes. Vejamos agora como usar isso.

Trabalhando com React Router Dom

Agora você terá que adicionar as páginas de conteúdo Home, About e Contact ao componente pai do aplicativo para poder usá-lo.

Agora navegue até o arquivo App.js.

Importe Route, NavLink, HashRouter do módulo React Router Dom adicionando o seguinte na seção de importações

import { Route, NavLink, HashRouter } from "react-router-dom";

Next, also import the content pages components created earlier.

import Home from "./Home";

import About from "./About";

import Contact from "./Contact";

Vamos agora fazer alterações no componente App e integrar o react router dom anexando as seguintes alterações no código

class App extends Component {
  render  {
    return (
      <HashRouter>
        <div className="App">
          <h1>A Simple SPA made using React</h1>
          <ul className="header">
            <li><NavLink to="
            <li><NavLink to="/about">About</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
          </ul>
          <div className="content">
            <Route exact path=" component={Home}/>
            <Route path="/stuff" component={Stuff}/>
            <Route path="/contact" component={Contact}/>
          </div>
        </div>
      </HashRouter>
    );
  }
}
export default App;

A função App agora usa o componente HashRouter da biblioteca react router dom para gerenciar o roteamento do lado do cliente.

O cabeçalho tem os mesmos links de navegação, mas agora usa o componente NavLink em vez da tag âncora básica.

A área de conteúdo agora exibe o conteúdo de cada rota, que é especificado usando o componente Route do react router dom.

O arquivo App.js completo deve ficar assim

import React, { Component } from "react";
import { Route, NavLink, Routes, HashRouter } from "react-router-dom";

import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

class App extends Component {
render  {
  return (
    <HashRouter>
      <div className="App">
        <h1>A Simple SPA made using React</h1>
        <ul className="header">
          <li><NavLink to="
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/contact">Contact</NavLink></li>
        </ul>
        <div className="content">
          <Routes>
            <Route exact path=" element={<Home />}></Route>
            <Route exact path="/about" element={<About />}></Route>
            <Route exact path="/contact" element={<Contact />}></Route>
          </Routes>
        </div>
      </div>
    </HashRouter>
  );
}
}
export default App;

Agora navegue até a janela do terminal e execute o comando npm start para executar o servidor de desenvolvimento para testar o código acima.

É assim que as páginas da web devem ser

Ciclo de Vida do SPA

Desde o momento em que um usuário inicia uma solicitação para a aplicação web até o momento em que sai da página, esse processo é conhecido como ciclo de vida da aplicação de página única. Um SPA passa pelas seguintes etapas:

• Inicialização: quando um usuário inicia um aplicativo Web, o navegador carrega os arquivos HTML, CSS e JavaScript do aplicativo. O roteador e o gerenciamento de estado do aplicativo são configurados pelo código JavaScript.
• Roteamento: Quando a aplicação é inicializada, o roteador determina o melhor caminho a seguir dependendo da URL. O DOM é modificado quando a visualização ou componente correto é carregado pelo roteador.
• Gestão Estadual: O estado do aplicativo é um instantâneo de suas informações atuais e deve ser gerenciado. Uma biblioteca, como o Redux, cuida do estado. A biblioteca aciona uma nova renderização dos componentes afetados sempre que o estado muda.
• Renderização: Durante a renderização, React.js usa um método de comparação para descobrir quantas alterações devem ser feitas no DOM para acomodar um componente atualizado. Em seguida, ele é atualizado com o componente revisado.
• Chamadas de API: Eles ocorrem quando um aplicativo responde à entrada do usuário solicitando informações de um servidor remoto. Ao receber uma resposta do servidor, o código JavaScript muda de estado.
• Manipulação de erros: O aplicativo deve responder adequadamente sempre que ocorrer um erro durante qualquer uma das etapas acima. O aplicativo retorna ao estado estacionário após exibir o aviso de erro ao usuário.
• Descarregando: Quando um usuário fecha um aplicativo web, a função JavaScript correspondente libera quaisquer dados alocados anteriormente. Isso corrige problemas de velocidade do navegador e evita vazamentos de memória.

Gerenciamento de estado no React SPA

Um dos aspectos mais importantes da construção de um aplicativo de página única (SPA) é gerenciar seu estado. Em uma aplicação tradicional de múltiplas páginas, cada página possui seu próprio estado, que é redefinido sempre que o usuário navega para uma nova página. Entretanto, em um SPA, o estado deve persistir em múltiplas visualizações e interações do usuário.

O React fornece vários recursos integrados para gerenciar o estado, incluindo os ganchos useState e useContext e a biblioteca Redux. O gancho useState permite definir e atualizar o estado dentro de um componente, enquanto useContext permite compartilhar o estado entre componentes sem perfuração de suporte.

Considerações de segurança no React SPA

Ao desenvolver um SPA é fundamental pensar na segurança, pois ele pode estar exposto a diversos ataques. Cross-site scripting (XSS) e cross-site request forgery (CSRF) são os mais populares. O React inclui vários recursos integrados para ajudar a evitar tais ataques. O React escapa automaticamente dos dados fornecidos aos componentes e possui proteção CSRF integrada para consultas AJAX.

Otimização de desempenho no React SPA

O tempo de carregamento inicial da aplicação em SPAs é crucial, pois os usuários esperam aplicativos rápidos e responsivos. O React oferece uma variedade de técnicas de otimização de velocidade para ajudar a diminuir a duração do tempo de carregamento inicial. As estratégias são divisão de código, carregamento lento e renderização do lado do servidor (SSR). Você pode separar o código do seu aplicativo em partes menores usando a divisão de código, que só carrega quando necessário, minimizando o tempo de carregamento inicial. O carregamento lento permite adiar o carregamento dos componentes até que eles sejam necessários, o que otimiza ainda mais o tempo de carregamento inicial. SSR inclui o servidor que renderiza o primeiro HTML, permitindo aos usuários ver as informações com mais rapidez e melhorando a otimização do mecanismo de busca (SEO).

Testando aplicativos de página única com React

Para criar um SPA confiável, são necessários testes. A estrutura de testes Jest e a Biblioteca de testes React são apenas duas das muitas ferramentas de teste que você pode usar com React. Recursos como relatórios de cobertura de teste e testes instantâneos tornaram o Jest popular entre os testadores. A React Testing Library é um pacote pequeno e eficiente que fornece uma interface simples para testar módulos React.

Implantação de aplicativos de página única com React

A implantação inclui configuração de servidor e otimização de aplicativos de produção, que devem ser cuidadosamente consideradas ao implantar um SPA. O utilitário create-react-app é apenas um exemplo de ferramenta React que simplifica os processos de desenvolvimento e implantação. Os recursos prontos para produção do React incluem minificação de código e técnicas de cache, entre outros.

Conclusão

Abordamos a maioria dos recursos úteis do React Router para construir um SPA. No entanto, isso não significa que não existam possibilidades mais intrigantes para explorar. Os recursos de roteamento necessários para nossa aplicação eram bastante modestos. Se você estiver criando um aplicativo de página única mais complicado do que os do nosso tutorial, reserve um tempo para dar uma olhada no Documentação do roteador React e exemplos.

Resumindo, React é uma biblioteca JavaScript robusta e amplamente utilizada para o desenvolvimento de aplicativos de página única (SPAs) simplificados e interativos. Usando o DOM virtual rápido e o design baseado em componentes do React, os desenvolvedores podem criar facilmente aplicativos da web sofisticados e responsivos. Ao optar por adotar React SPAs para seu próximo projeto, é necessário considerar cuidadosamente os prós e os contras, tendo em mente os possíveis pontos negativos dos SPAs, como tempos de carregamento inicial mais longos e problemas de SEO.

Se você gostou disso, não deixe de conferir nossos outros artigos sobre React.

• Principais perguntas e respostas da entrevista React que você precisa saber
• Teste de unidade em React: guia detalhado
• Em quais projetos sua empresa pode usar o React?
• O que você precisa saber sobre o React antes de usá-lo em seu negócio
• 6 razões pelas quais o React é tão popular