Escolha uma Página
Como utilizar o ES6 no Node Js, de forma simples, com o Sucrase.

Como utilizar o ES6 no Node Js, de forma simples, com o Sucrase.

Desde que foi lançado, o ES6 trouxe uma série de vantagens no desenvolvimento Javascript.

Hoje, vamos aprender como utilizar, de forma simples, todas as funcionalidades oferecidas pelo ES6, no Node Js.


Instalação do Sucrase

O sucrase é um transpiler de código, assim como o babel, mas que traz a vantagem de ter um setup extremamente simples e fácil de usar.

Você pode instalar o sucrase através do seguinte comando:

yarn add sucrase -D

Agora, precisamos criar um script que start o nosso servidor através do sucrase.

Para isso, adicione ao seu package.json o seguinte código:

"scripts": {
  "dev": "sucrase-node src/server.js"
}

Lembre-se que src/index.js deve ser o caminho do arquivo de entrada da sua aplicação.

Ao rodar o comando yarn dev, já é possível utilizar toda a sintaxe do ES6 com o Node JS.


Nodemon

O nodemon é uma dependência muito utilizada em ambientes de desenvolvimento com Node JS.

Para utilizar o sucrase junto ao nodemon, crie um arquivo, na raiz do seu projeto, chamado nodemon.json

Esse arquivo precisa conter o seguinte código:

{
  "execMap": {
    "js": "sucrase-node"
  }
}

Esse arquivo informará ao nodemon que, na hora da execução, ele deve utilizar o sucrase em vez de node.

Nesse momento, você pode já pode utilizar o nodemon normalmente.


Debugger

Podemos também utilizar o sucrase em conjunto do debugger do Visual Studio Code.

Para isso, deixe o lauch.json do seu projeto da seguinte maneira:

"configurations": [
  {
    "type": "node",
    "request": "attach",
    "name": "Launch Program",
    "protocol": "inspector"
  }
]

É necessário também criar um script que deve ser executado antes de iniciar o debugger.

Para isso, adicione o seguinte código, logo abaixo do script dev que criamos anteriormente.

"debug": "node --inspect-brk -r sucrase/register src/server.js"

Você deve rodar yarn debug, e, em seguida iniciar o debug do Visual Studio Code.


Testes

Os scripts de testes podem ser integrados ao sucrase de forma bem simples.

Jest

Para utilizar o jest com o sucrase, é necessário instalar o plugin @sucrase/jest-plugin.

Você pode instala-lo através do comando abaixo:

yarn add @sucrase/jest-plugin -D

No seu package.json, adicione também a seguinte configuração:

"jest": {
  "transform": {
    ".(js|jsx|ts|tsx)": "@sucrase/jest-plugin"
  },
  ...
}

Com isso feito, você pode rodar seu script de testes com o Jest normalmente.

Mocha

Para utilizar o sucrase com o mocha é ainda mais simples, basta passar a flag –require sucrase/register junto ao seu script de testes.

Ficaria mais ou menos assim:

mocha --require sucrase/register ./test/**/*.js

Concluindo

Como podemos ver, o sucrase é uma ferramenta extramamente fácil de configurar e pode ser integrada com as principais ferramentas que você utiliza no seu desenvolvimento com Node JS.

Forte Abraço,

Carlos Levir

Como criar notificações personalizadas no React Js.

Como criar notificações personalizadas no React Js.

A exibição de notificações é algo muito importante para que os usuários possam ter um feedback de uso da sua aplicação.

Hoje, vamos aprender como exibir notificações personalizadas, através da biblioteca react-toastify.

Passo #1: Criação do projeto

Para começamos, criaremos um projeto através do Create React App.

Você pode criar seu projeto através do comando abaixo:

create-react-app app

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

yarn start

Após alguns segundos, uma nova janela no seu navegador se abrirá, semelhante a 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-toastify styled-components

O react-toastify é a biblioteca que utilizaremos para exibir as notificações personalizadas.

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


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 a essa:

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

Passo #4: Configuração das notificações

Agora, faremos a configuração para que o react-toastify funcione corretamente.

Por padrão, o react-toastify não vem com estilos configurados, mas ele nos oferece um arquivo de estilos para utilizarmos.

No arquivo index.js da pasta styles, adicione a seguinte linha de código, logo antes do import do styled-components:

import 'react-toastify/dist/ReactToastify.css';

Agora, no arquivo App.js, adicionaremos os estilos que criamos no passo #3, e, o ToastContainer do react-toastify.

Seu App.js deve ficar da seguinte forma:

import React from 'react';
import { ToastContainer } from 'react-toastify';

import GlobalStyle from "./styles";

function App() {
  return (
    <>
      <GlobalStyle />
      <ToastContainer />
    </>
  );
}

export default App;

Passo #5: Criação da página de exemplo

Para esse tutorial, criaremos uma página de exemplo para testarmos a exibição das notificações.

Para isso, crie uma pasta pages na pasta src.

Dentro da pasta pages, crie uma pasta Main e nela, crie um arquivo index.js.

Adicione ao arquivo index.js da pasta Main, o seguinte conteúdo:

import React from 'react';
import { toast } from 'react-toastify';

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

function Main() {
  function handleDefault() {
    toast('Mensagem default');
  }
  function handleError() {
    toast.error('Mensagem error');
  }
  function handleSuccess() {
    toast.success('Mensagem success');
  }
  function handleInfo() {
    toast.info('Mensagem info');
  }
  function handleWarn() {
    toast.warn('Mensagem warn');
  }
  function handleCustom() {
    toast('Mensagem customizada', {
      position: toast.POSITION.TOP_LEFT,
      className: 'sua-classe',
    });
  }

  return (
    <Container>
      <Buttons>
        <button type="button" onClick={handleDefault}>
          Default
        </button>
        <button type="button" onClick={handleError}>
          Error
        </button>
        <button type="button" onClick={handleSuccess}>
          Success
        </button>
        <button type="button" onClick={handleWarn}>
          Warn
        </button>
        <button type="button" onClick={handleInfo}>
          Info
        </button>
        <button type="button" onClick={handleCustom}>
          Custom
        </button>
      </Buttons>
    </Container>
  );
}

export default Main;

Nesse arquivo, nós criamos alguns botões e funções para exibição das notificações.
O react-toastify nos oferece alguns tipos de notificações que podemos utilizar, são eles:

  • Default, container branco com um time colorido.
  • Error, container vermelho.
  • Success, container verde.
  • Warn, container amarelo.
  • Info, container azul.

Você também pode criar seu próprio estilo de notificações, alterando a posição do objeto ou passando uma classe diferente para editar o estilo das notificações, como foi mostrado na função handleCustom.

Agora, criaremos alguns estilos para nossa página, para isso, ainda na pasta Main, crie um arquivo styles.js, com o seguinte código:

import styled from 'styled-components';

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

export const Buttons = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 20%;

  & button {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    border: 0;
    color: #fff;
    background: #009cde;
    margin-top: 5px;
    cursor: pointer;
  }
`;

Nesse arquivo, nós apenas criamos alguns estilos para os botões da nossa página de exemplo.

Passo #6: Finalizando a aplicação

Para finalizarmos a aplicação, precisamos importar a página de exemplo que criamos.

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

import React from 'react';
import { ToastContainer } from 'react-toastify';

import Main from './pages/Main';

import GlobalStyle from './styles';

function App() {
  return (
    <>
      <GlobalStyle />
      <ToastContainer />
      <Main />
    </>
  );
}

export default App;

O GlobalStyle contém os estilos que criamos no passo #3.

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

Demonstração

Confira como ficou o resultado final:

Ver código no Github ↗

Forte Abraço,

Carlos Levir

Como criar rotas autenticadas no React Js.

Como criar rotas autenticadas no React Js.

A criação de rotas autenticadas é muito importante quando falamos de rotas de uma aplicação.

Hoje, vamos aprender, de maneira simples, como criar rotas que precisem de autenticação na sua aplicação em React Js.

Passo #1: Criação do projeto

Para começamos, criaremos um projeto através do Create React App.

Você pode criar seu projeto através do comando abaixo:

create-react-app app

Com o processo finalizado, você pode entrar na pasta app 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 prop-types

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

O prop-types é uma biblioteca oferecido pela própria equipe do React para trabalharmos com os tipos de props dos nossos componentes.


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;

Nesse momento, sua estrutura deve estar semelhante à essa:


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

Para essa aplicação, usaremos duas páginas para representar as rotas autenticadas e as não autenticadas.

Para começar, crie uma pasta pages dentro da pasta src.

Dentro da pasta pages, crie uma pasta Login.

Na pasta Login, crie um arquivo index.js

Adicione ao arquivo index.js da pasta Login, o seguinte conteúdo:

import React from 'react';

function Login({ history }) {
  function handleLogin() {
    localStorage.setItem('@SuaAplicacao:JWT_TOKEN', 'seutokenjwt');

    history.push('Main');
  }

  return (
    <form onSubmit={handleLogin}>
      <input type="text" name="email" placeholder="Seu email" required />
      <input type="password" name="password" placeholder="Sua senha" required />
      <button type="submit">Login</button>
    </form>
  );
}

export default Login;

Esse página representará a nossa tela de login.

Nela, a função handleLogin salva um token no localStorage. Esse token seria o token JWT que receberíamos da nossa API.

Em seguida, a função handleLogin faz o redirecionamento para a rota Main, que será uma rota autenticada.

Agora, criaremos a página Main.

Para isso, podemos repetir o processo de criação da pasta Login.

Crie uma pasta Main, e nela, crie um arquivo index.js

No index.js da pasta Main, adicionaremos o seguinte conteúdo:

import React from 'react';

function Main({ history }) {
  function handleLogout() {
    localStorage.removeItem('@SuaAplicacao:JWT_TOKEN');

    history.push('/');
  }

  return (
    <div>
      <h3>Bem vindo</h3>
      <button type="button" onClick={handleLogout}>
        Sair
      </button>
    </div>
  );
}

export default Main;

Nessa página, temos uma mensagem de boas vindas e um botão para sair.

O botão para sair chama a função handleLogout.

A função handleLogout remove o token que salvamos no login e, em seguida, nos redireciona novamente para a tela de Login.


Passo #5 Criação das rotas

As rotas serão definitivamente a parte mais importantes da nossa aplicação.

Para começarmos, crie uma pasta routes dentro da pasta src.

Dentro da pasta routes, crie um arquivo Route.js e adicione à ele o seguinte conteúdo:

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';

function RouteWrapper({
  redirectTo, isPrivate, component: Component, ...rest
}) {
  const authenticated = localStorage.getItem('@SuaAplicacao:JWT_TOKEN');

  if (!authenticated && isPrivate) return <Redirect to={redirectTo} />;

  return <Route {...rest} render={props => <Component {...props} />} />;
}

RouteWrapper.propTypes = {
  redirectTo: PropTypes.string,
  isPrivate: PropTypes.bool,
  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
    .isRequired,
};

RouteWrapper.defaultProps = {
  redirectTo: '/',
  isPrivate: false,
};

export default RouteWrapper;

Esse arquivo será um wrapper das nossas rotas.

Nesse wrapper, nós fazemos uma verificação se o usuário não está autenticado (através do token que definimos no login), e se a rota que ele está tentando acessar é um rota privada (através da prop isPrivate).

Caso duas condições sejam verdadeiras, nós o redirecionamos para a rota que recebemos através da prop redirectTo, que tem como valor padrão a rota raiz.

Caso a rota não seja privada ou o usuário esteja autenticado, nós o redirecionamos para a rota que ele está tentando acessar.

Utilizamos o oneOfType para que o tipo de componente possa ser tanto um Stateful, como um Stateless Component.

A partir de agora, utilizaremos ele como o nosso Route em vez do Route do react-router-dom.

Agora, criaremos um arquivo index.js na pasta routes, com o seguinte conteúdo:

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

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

import Route from './Route';

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

Perceba que não importamos o Route do react-router-dom, mas sim do wrapper que criamos.

Para definirmos que uma rota é privada, basta que passemos a propriedade isPrivate, como fazemos com a rota /main.

Passo #7: Finalizando a aplicação

Para finalizar, 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 Routes from './routes';

function App() {
  return (
    <BrowserRouter>
      <Routes />
    </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.

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


Demonstração

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

Ver código no github ↗

Forte Abraço,

Carlos Levir

Como otimizar a performance de apps React Native no android, utilizando o Hermes.

Como otimizar a performance de apps React Native no android, utilizando o Hermes.

Recentemente, a equipe do Facebook liberou uma ferramenta open-source chamada Hermes.

Essa ferramenta tem como principais objetivos:

  • Diminuir o tempo que o app leva para iniciar.
  • Diminuir o uso da memória.
  • Diminuir o tamanho dos aplicativos.

Vamos descobrir como utilizar essa poderosa ferramenta.


Requisitos

O primeiro passo para utilizar o Hermes é verificar se a verão do React Native do seu app é a 0.60.2 ou maior.

Você pode verificar a versão do React Native no arquivo package.json do seu projeto.

É importante lembrar que, caso você esteja fazendo o upgrade de uma versão mais antiga para a 0.60.2, você deve certificar-se que seu app está funcionando antes de habilitar o Hermes.


Habilitando o Hermes

Para habilitar o Hermes, vá até a pasta android/app e encontre o arquivo build.gradle.

No arquivo build.gradle, procure por “project.ext.react“.

Para habilitar o Hermes, basta alterar a propriedade enableHermes para true.

Sua configuração deve ficar semelhante à essa:

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
]

Caso você já tenha feito o build seu projeto no android alguma vez, você vai precisar limpar o cache do seu app.

Para limpar o cache do seu projeto, vá até a pasta android e rode o comando abaixo:

./gradlew clean

Caso você esteja utilizando o CMD ou o Powershell do windows, talvez o comando acima não funcione, se esse for seu caso, rode o comando abaixo em vez do comando anterior:

gradlew clean

Nesse momento, você já pode rodar o comando run-android e utilizar seu app normalmente 😉

Forte abraço,

Carlos Levir

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