React: conhecendo a biblioteca React Router

O que é SPA? - Apresentação

Olá, meu nome é Luiz Fernando e eu sou instrutor aqui na Alura! Boas vindas ao curso de React Typescript utilizando o React-Router-Dom.

Essa é uma continuação do curso de React Typescrito: lidando com arquivos estáticos. Naquele curso, havíamos feito uma tela de cardápio onde temos todos os pratos do nosso Alurone e alguns filtros que podemos utilizar para buscar "Massas", "Carnes" etc.

Nesse curso, vamos falar sobre React router dom então vamos criar outras rotas. Vamos criar a página de Início, a página de Sobre. No início ou no cardápio se clicamos em "Ver mais", somos redirecionados à tela de detalhes do prato. E se por algum motivo colocarmos alguma rota que não existe, como por exemplo "banana", seremos redirecionados para a tela "Not found".

Para que consigamos criar tudo isso, nós não só aprenderemos sobre react-router-dom, aprenderemos como conseguimos escalar um projeto, refatorando coisas que não vão mais fazer sentido.

Vamos utilizar o ESlint para conseguirmos um padrão de código para termos um código mais robusto. Também veremos como criar um arquivo de rotas, como usamos a pasta de componentes, porque muitas pessoas usam essa pasta para colocar qualquer componente e fica bagunçado. Além disso, criaremos uma pasta para os dados e uma pasta de types.

Assim, deixamos o código muito mais robusto, refatoramos aquele código para que ele faça sentido em um projeto com mais de uma rota e utilizaremos o react-rounter-dom, brownser router, routes, route e link, usenavigate, uselocation e useparams.

Te vejo no curso!

O que é SPA? - Criando o ESLint

O primeiro passo para deixarmos nosso código mais bonito e termos mais controle sobre ele é utilizarmos uma ferramenta que nos ajuda a fazer o nosso JavaScript com um pouco mais de cuidado que é uma ferramenta chamada ESLint.

Ela nos ajuda tanto a resolver os problemas mostrados no vídeo passado quanto também para nos avisar se estiver cometendo algum desses erros.

Para que consigamos fazer isso, vamos apertar Ctrl mais aspas simples (Ctrl + ') no Visual Studio Code aberto no código. Em seguida damos um "Ctrl + C" para ele parar de rodar e um clear para ele limpar o terminal. Se você não conseguir abrir usando o atalho "Ctrl + aspas simples", vá até a barra superior do programa e clique na quarta opção que é "Ver", em seguida cliquei em "Terminal" que é a décima terceira opção da lista.

Agora, para criarmos um arquivo que é extremamente necessário para que o ESLint funcione, precisamos digitar npm init @eslint/config e damos um Enter. Ele já vai começar a fazer algumas perguntas sobre o que queremos.

$ npm init @eslint/config
? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problemns
  To check syntax, find problems, and eforce code style

A primeira opção é para ele só checar a sintaxe, o outro para que ele possa checar a sintaxe e encontrar problemas o terceiro é se queremos que ele cheque a sintaxe, encontre problemas e nos force a termos um estilo específico de código, que é exatamente o que queremos. Então, selecionamos a terceira opção.

How would you like to use ESlint? . style
What type of modules does your profect use? ... 
JavaScript modules (import/export)
CommonJS (require/esports)
None of these

Aqui ele diz como estamos utilizando, se utilizamos modelos do JavaScript que é import ou export, se usamos o CommumJS que é o require ou export que normalmente vemos em configurações de Webpacking, outras configurações menores. Mas no React utilizamos import, lembra que temos que exportar e importar nossos componentes? Então é a primeira opção.

Wich framework does your project use? . esm
React
Vue.js
None of these

Aqui, eles pergunta se estamos usando React, vue.js ou nenhum deses. Nós estamos usando o React.

? Does your project use TypeScript > No / Yes 

Estamos utilizando o TypeScript? Sim, então selecionamos Yes.

? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
Browser
Node

Como nós rodamos? No Back-End via Node ou no Brownser? No Browser.

? How would you like to define a style for your project? ...
  Use a popular style guide
  Answer questions about your style

Queremos utilizar um estilo popular ou que ele dê perguntas para nós personalizarmos? Vamos escollher essa segunda opção para vermos como é.

? What format do you want your config file to be in? ... 
  JavaScript
    YAML
    JSON

Qual a extensão queremos que ele coloque nesse arquivo .yaml, .json ou .js? Vamos escolher o .json, que eu acho um pouco mais legal para configuração.

? What style pf indentation do you use? ...
  Tabs
  Spaces

Qual o estilo de identação que vamos usar, se é via tab ou via espaço. Via tab geralmente são quatro espaço, então prefiro utilizar espaços.

? What quotes do you use for strings? ... 
  Doubles
  Single

Como queremos que sejam as nossas aspas, simples ou duplas? Vamos escolher simples.

? What line endings do you use? ...
  Unix
  Windowns 

Qual vai ser o final de lina que vamos utilizar, do Unix ou do Windows? Vamos utilizar do Unix.

? Do you require semicolons? >> No / Yes 

Vamos querer ponto e vírgula? (;)? Vamos colocar que sim. Em seguida ele mostra alguns plugins que precisamos instalar e perguta se queremos a instalação, responderemos que sim.

? Would you like to install now with npm? >> No / Yes

E agora ele instala automaticamente esses plugins. Vamos esperar um pouco, porque normalmente é bem rápido. Ao terminar damos outro clear para limpar. Agora, vamos abrir a pasta "src" olha só, nosso código está todo vermelho.

Vamos abrir o index.tsx e ele já nos monstra alguns erros.

import React from "react";
import ReactDOM from "react-dom";
import "normalize.css";
import "./index.css";
import Cardapio from "./pages/Cardapio";

~
ReactDOM.render(
    <React.StricMode>
        <Cardapio />
    </React.StricMode>,
    document.getElementById('root')
);

Aqui, ele já está nos apontando alguns erros. Vamos passar o mouse no primeiro. Ele diz que as string precisam utilizar aspas simples e o react está entre aspas duplas. Então, vamos entrar na pasta ".eslinrc.json".

"rules": {
    "ident": [
        "error",
            4
    ]
}

Na linha 23 do código, ele diz que podemos identar com 4 espaços, mas vamos modificar para 2. O linebreak-style tem que ser unix, as aspas tem que ser simples e tem sempre que ter o ponto e vírgula.

"rules": {
    "ident": [
        "error",
            2
    ],
    "linebreak-style": [
        "error",
        "unix"
    ],
    "quotes": [
        "error",
        "singles"
    ],
    'semi": [
        "error",
        "always"
    ]
}

Isso já vai nos forçar a ter um estilo de código um pouco mais legal. Aqui eslint está com quatro espaços, então vou colocar... Dá uma olhada na barra inferior, caso apareça "Espaço 4" clique nele e selecione "Recuar Usando Espaços > 2 Tamanho de Tabulação Configurado". E apertamos "Alt + Shift + F" para ele automaticamente mudar para dois espaços.

Mas isso ainda não resolveu o problema no resto do código, então, vamos utilizar o ESLint para nos ajudar. Para isso, vamos utilizar o comando npx que já vimos em outros cursos que é para executar um pacote e não para instalá-lo. Vamos executar um pacote que será o próprio eslint.

$ npx eslint

Em seguida ele pede para darmos uma pasta, ou algum lugar para ele começar. Queremos que ele comece no src, então usamos ponto e barra (./).

Também queremos que ele resolva os problemas por nós para que não precisemos passar de pasta em pasta e ir ajustando. Para isso, vamos colocar --fix. Esse comando faz com que o ESLint automaticamente já resolva esses problemas.

$ npx. eslint ./src --fix

Damos Enter e ele dá vários erros dizendo "React must be in scope", mas depois falamos sobre isso. Agora, porém, ele não está mais todo vermelho, só as partes que estão utilizando o React que não tem o React que estão vermelhos. Mas o restante já está conforme as configurações que escolhemos.

Agora, só precisamos resolver esse problema do React, o que faremos no próximo vídeo!

O que é SPA? - Criando o início

Regra utilizada no vídeo:

"react/react-in-jsx-scope": "off",

Dando continuidade ao útlimo vídeo, vamos entrar na pasta "src > pages > index.rsx". Aqui, ele está apontando um erro dizendo que 'React' must be in scope when using JSX. Isso significa que somos obrigados a importar o React quando estamos utilizando o JSX em um arquivo JS.

Porém, as verões mais novas do React como a 17, que é a que estamos utilizando nós não precisamos utilizar o import dele quando estamos usando o JSX. Então, deixa eu pegar uma regra aqui que precisamos pegar. A regra é "react/react-in-jsc-scope": "off". Isso significa que ele não vai obrigar mais que a gente coloque o react quando formos utilizar o JSX em uma arquieco js.

"rules": {
    "react/react-in-jsx-scope": "off",
    "ident": [
        "error",
        2
    ]
}

Se você reparar... Eu vou até comentar, na verdade eu vou excluir, vou dar um CTRL +S e ele tá vemelhinho, se eu der um CTRL + V E UM CTRL + S ele não vai mais ficar vermelho. Então já resolver o nosso problema.

Então, abrimos o terminal e escrevemos npx eslint ./src --fix. Damos um Enter e ele não vai dar mais erro, ele só deu warning ali mas com isso não precisamos nos preocupar. Então, já resolveu nosso problema. Vou dar npm start e vou tirar o nosso terminal que não vamos mais precisar e agora o nosso Alurone continua rodando tranquilamente e temos o nosso ESLint rodando. Então se tivermos um problema o ESLint já vai nos avisar na hora que estamos fazendo alguma coisa errada.

Agora que já temos todo o nosso código configurado eu voltei pro VSCode e vamos começar uma nova rota, um novo componente para representar uma nova página. Agora que já temos a nossa pasta "pages" que é nossa pasta para novas páginas vamos criar uma nova pasta chamada início que vai ser a nossa primeira rota fora o "Cardapio" que vamos startar no início e se formos para uma outra rota, vamos para Caradápio.

Dentro da pasta "Inicio" que criei na pasta "pages", um "index.tsx". Aqui dentro vou dar um export default function Inicio() e um return em alguma coisa.

export default function Inicio() {
    return (
     )
}

Aqui, vou colocar uma section dentro desse return.

export default function Inicio() {
    return (
        <section>

        </section>
     )
}

Ele acusa alguns erros que é o seguinte, ele tá dizendo que ele espera que as quebras de linha sejam LF mas foi encontrado CRLF. CRLF é a quebra de linha do Windows e LF é a do Linux.

Se fose tiver uitlizando o Linux, você pode trocar aqui embaixo no VSCode está dizendo qual a quebra de linha que ele está utilizando que CRLF e é só mudar para LF.

E também acusa que não usamos o ponto e vígula, então vamos adicionar.

export default function Inicio() {
    return (
        <section>

        </section>
     );
}

Agora, dentro de <section> vamos criar um <h3> e dentro dele vamos colocar recomendações Recomendações da cozinha.

export default function Inicio() {
    return (
        <section>
            <h3>
                Recomendações da cozinha
            </h3>
        </section>
     );
}

Em seguida criamos um <div> que terá algumas recomendações de alguns itens do cardápio.

export default function Inicio() {
    return (
        <section>
            <h3>
                Recomendações da cozinha
            </h3>
            <div>

            </div>
        </section>
     );
}

Agora em cima vamos importar nosso cardápio para que a gente consiga fazer essas recomendações da cozinha.

import cardapio from 'pages/Cardapio/Itens/itens.json';

Você reparou que a gente tá pegando o cardápio de outras página, que estamos pegando de pages/Cardapio que é a página cardápio que é outra página e estamos tendo que pegar lá na frente esse cardápio e o cardápio era referente a itens só que agora tbm é referente a inicio então agora está uma confusão porque fizemos para uma coisa e agora estamos utilizando em outra. E esse é o passo da refatoração que falei com vocês no começo do curso. Nós vamos andar de mãos dadas tanto pra falar sobre rotas quanto pra falar sobre refatoração. Então, no próximo vídeo, vamos começar a refatorar esses dados do cardápio, vamos colocar em outro lugar e vamos começar a fazer essa página tanto a estrutura HTML quanto a estrutura CSS para fazer isso de forma mais concisa.

Sobre o curso React: conhecendo a biblioteca React Router

O curso React: conhecendo a biblioteca React Router possui 176 minutos de vídeos, em um total de 53 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• O que é SPA?
• Estrutura básica do Router DOM
• Criando as rotas
• Router DOM Hooks
• Finalizando o projeto
• Ajustes NotFound e Header