O melhor lugar para você aprender Javascript.

Descubra como é simples dominar o desenvolvimento Full Stack.

Como criar uma Single Page Application (SPA) com React Js.

Como criar uma Single Page Application (SPA) com React Js.

As Single Page Applications (SPA) vem se popularizando bastante nos últimos tempos.

Isso se dá devido seu grande foco em experiência do usuário.

Hoje, vamos aprender como construir uma SPA completa do zero, com o React Js.

Passo #1: Criação do projeto

Para esse projeto, utilizaremos o Create React App (CRA), que é a ferramenta de linha de comando oferecido pela própria equipe do React.

Caso você ainda não a tenha, você pode instala-la globalmente através do npm, com o seguinte comando:

npm i -g create-react-app

Com o CRA instalado, escolha uma pasta para salvar o seu projeto e dentro dessa pasta, rode o comando abaixo:

create-react-app spa

O CRA dará início a criação do seu projeto, esse processo pode demorar um pouco (é o tempo de ir pegar um café e voltar).

Com o processo finalizado, você pode entrar na pasta spa que você criou e rodar o comando:

yarn start

Após alguns segundos, uma nova janela no seu navegador se abrirá, semelhante à essa:

Tela padrão de projetos criados através do CRA.

Passo #2: Instalação das bibliotecas

Agora, instalaremos as bibliotecas que usaremos no nosso projeto.

Para isso, dentro da pasta do seu projeto, rode o comando abaixo:

yarn add react-router-dom styled-components

O react-router-dom é a biblioteca responsável por toda a parte de navegação da nossa SPA.

O styled-components é a biblioteca que vai nos ajudar a estilizar nossa aplicação.

Eu, particularmente, utilizo essas duas bibliotecas em praticamente todos os meus projetos.


Passo #3: Configurações gerais

Em todos os projetos que eu crio utilizando Create React App, eu sempre gosto de fazer algumas configurações para deixar o projeto mais organizado.

Começaremos apagando alguns arquivos na pasta src, são eles:

  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • serviceWorker.js

Apague também o arquivo manifest.json, que está na pasta public.

Precisamos também remover a importação desses arquivos.

O seu index.js deve ficar da seguinte forma:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

E o seu arquivo App.js, deve ficar da seguinte forma:

import React from 'react';

function App() {
  return <div />;
}

export default App;

Para finalizar a parte de configuração, criaremos um arquivo de estilos globais para nossa aplicação.

Para isso, crie uma pasta chamada styles, dentro da pasta src, e nela, crie um arquivo index.js.

Adicione a esse arquivo o seguinte código.

import styled, { createGlobalStyle } from 'styled-components';

export const Container = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
`;

export default createGlobalStyle`
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: 0;
    }
    html,
    body,
    #root {
      height: 100%;
    }
    body {
      text-rendering: optimizeLegibility !important;
      font-family: sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #eee;
    }
`;

Essas configurações nos ajudarão a trabalhar melhor com tamanhos nos nossos componentes.

Nesse momento, sua estrutura deve estar semelhante à essa:

Estrutura de pastas após as configurações iniciais do projeto.

Passo #4: Criação das páginas

Nesse momento, podemos dar início à construção das páginas da nossa aplicação.

Começaremos criando uma pasta chamada pages, dentro da pasta src.

Dentro da pasta pages, crie uma pasta chamada Main.

Na pasta Main, crie dois arquivos, o index.js e o styles.js. Essa será nossa primeira página.

Adicione ao arquivo index.js o seguinte conteúdo:

import React from 'react';

import { Container, Title } from './styles';

function Main() {
  return (
    <Container>
      <Title>Main</Title>
    </Container>
  );
}

export default Main;

Nessa página, nós utilizamos os estilos do nosso arquivo styles.js, que criaremos agora.

Para isso, adicione ao seu arquivo styles.js o seguinte código:

import styled from 'styled-components';

export const Container = styled.div`
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
`;

export const Title = styled.h1`
  color: #009cde;
`;

Criaremos agora a segunda página da nossa aplicação.

Nós podemos duplicar a pasta Main que criamos e alterar seu nome para Contact.

O arquivo index.js da pasta Contact deve ficar da seguinte forma:

import React from 'react';

import { Container, Title } from './styles';

function Contact() {
  return (
    <Container>
      <Title>Contato</Title>
    </Container>
  );
}

export default Contact;

Podemos manter o arquivo de estilos como está.


Passo #5: Criação da Sidebar

A navegação com um Sidebar é o tipo mais comum em SPAs, pois elas facilitam muito a navegação do usuário.

Começaremos criando uma pasta components, dentro da pasta src.

Na pasta components, crie uma pasta Sidebar, e nela, crie dois arquivos, novamente o index.js e o styles.js.

Ao arquivo styles.js, adicione o seguinte conteúdo:

import styled from 'styled-components';
import { NavLink } from 'react-router-dom';

export const Container = styled.aside`
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(to bottom right, #009cde, #0073cc);
  flex-direction: column;

  transition: all 0.2s ease 0s;

  &:hover {
    width: 240px;
  }
`;

export const SidebarLink = styled(NavLink)`
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding-top: 10px;
  color: #eee;

  &:hover {
    color: #fff;
  }
`;

Nesse arquivo de estilos, nós importamos o NavLink que o react-router-dom nos oferece, e, adicionamos alguns estilos à ele, em vez de simplesmente importar ele no nosso index.js.

O arquivo index.js deve ficar com o seguinte conteúdo:

import React from 'react';

import { Container, SidebarLink } from './styles';

function Sidebar() {
  return (
    <Container>
      <SidebarLink to="/">Início</SidebarLink>
      <SidebarLink to="/contact">Contato</SidebarLink>
    </Container>
  );
}

export default Sidebar;

Nesse arquivo, nós importamos os 2 componentes que criamos no nosso arquivo de estilos, o Container e o SidebarLink, que é o NavLink importado do react-router-dom.

O NavLink recebe um atributo to que deve ser a rota que o usuário será redirecionado quando clicar naquele link.


Passo #6: Criação das rotas

As rotas são definitivamente uma das partes mais importantes de uma Single Page Application.

Para configurar as rotas, começaremos criando uma pasta chamada routes.

Dentro da pasta routes, criaremos um novo arquivo index.js.

É uma boa prática separarmos nossas rotas em arquivos diferentes, pois isso facilita a organização conforme nossa aplicação vai crescendo e aumentando o número de rotas.

Agora, adicionaremos o seguinte código ao arquivo index.js das nossas rotas:

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Main from '../pages/Main';
import Contact from '../pages/Contact';

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Main} />
      <Route path="/contact" exact component={Contact} />
    </Switch>
  );
}

Nesse código, nós importamos o Switch e o Route do react-router-dom.

O Switch atuará de forma semelhante ao switch/case presente no Javascript, ele verifica qual rota atende os parâmetros necessário e renderiza a primeira rota compatível.

O Route pode receber, o primeiro deles é o path, que será o caminho acessado pelo usuário no navegador.

Caso o usuário acesse www.carloslevir.com/contato, o path que ele estará acessando será contato.

Caso o usuário acesse a rota raiz de www.carloslevir.com, por exemplo, ele estará acessando o path /.

A opção exact é muito importante, ela serve para informar ao Switch que a rota acessada pelo usuário deve ser exatamente igual a rota que informamos.

Caso não informemos a opção exact, quando o usuário acessar uma rota que simples comece com a /, como o /app por exemplo, o Switch traria a rota raiz, já que a rota /app satisfaz a condição da rota raiz (/).


Passo #7: Finalizando a aplicação

Agora, precisamos importar todas as modificações que fizemos até agora.

Para isso, deixe seu App.js da seguinte maneira:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

import Sidebar from './components/Sidebar';
import Routes from './routes';

import GlobalStyle, { Container } from './styles';

function App() {
  return (
    <BrowserRouter>
      <GlobalStyle />
      <Container>
        <Sidebar />
        <Routes />
      </Container>
    </BrowserRouter>
  );
}

export default App;

Ao utilizar o react-router-dom, é necessário que todas as nossas rotas fiquem dentro de um Router.

O Router mais utilizado para esse tipo de aplicação é o BrowserRouter.

Nós utilizamos o BrowserRouter no App.js em vez de usa-lo no próprio arquivo de rotas, pra que os componentes fora das rotas possam utiliza-los, como o Sidebar.

O Container e o GlobalStyle são os estilos que criamos no começo do projeto.

Ao finalizar sua aplicação, sua estrutura deve estar semelhante à essa:

Estrutura de pastas após a finalização do projeto.

Demonstração

Abaixo você pode conferir uma demonstração do projeto:

Ver código no github ↗

Forte Abraço,

Carlos Levir

Tags:

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

Sobre o Autor

Carlos Levir
Carlos Levir

Desenvolvedor fascinado por aprendizado e pelo ecossistema Javascript. Sempre em busca do próximo nível. Atualmente atua como Engenheiro de Software na Rocketseat.

4 Comentários

  1. Muito bom cara, continue assim, desenvolvendo exemplos práticos para que outros desenvolvedores possam triscar o olho e perceber as diferenças que está fazendo ou da maneira errada, ajudou muito o post!


Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *