React: desenvolvendo em React Router com JavaScript

Criando o ''Olá Mundo'' - Apresentação

Olá, seja muito bem-vindo, seja muito bem-vinda a esse curso de React, meu nome é Antônio Evaldo, eu sou seu instrutor, e nesse curso vamos desenvolver a aplicação “Olá, Mundo”, e eu já estou com ela aberta no meu navegador, e você pode vê-la como se fosse um blog pessoal.

Eu estou até sendo usado como exemplo, porque está a minha foto e tem um monte de cards e posts que podemos aplicar, vou clicar em um deles, que é um card escrito “Python: Origem do nome”, e você vai ver que tem um artigo, eu até coloquei a fonte, que ele vem de um artigo da Alura. E o intuito desse projeto é que você que está me assistindo possa desenvolver seus próprios posts e compartilhar com o mundo.

Então, se voltarmos para a página de início, tem vários posts que você mesmo vai poder colocar seus textos, as fotos de cada post e até sua foto também. E veja bem, também tem uma outra página chamada “Sobre mim”, que eu coloquei um pouco sobre mim, mas você vai colocar sobre você também, então é uma coisa bem legal desse projeto.

Mas como vamos desenvolver esse projeto? Esse design maravilhoso foi feito a partir do Figma, feito pela equipe de design da Alura, bem chique, então está bem legal, tem até a parte responsiva, então explora essa parte, você pode até ver como uma oportunidade de praticar CSS por conta própria, mas voltando ao projeto, como vamos fazê-lo tecnicamente? Veja que ele tem diversas páginas, tem a página de início, a página sobre mim, a página de um post.

Isso é o que chamamos de SPA, uma sigla para single page application, que traduzindo, significa aplicação de página única. Como fazemos uma SPA no React? Você vai descobrir como fazer isso, por que fazer isso, mas principalmente vamos utilizar a biblioteca chamada React Router Dom, que é o tema desse curso. É uma biblioteca que vai nos ajudar bastante, em várias coisas que você vai fazer nesse projeto, então tem muitos recursos, como criar um roteador, alternando várias rotas, tem rotas aninhadas, tem rotas dinâmicas.

Nós também vamos ver sobre os hooks do React Router Dom, que tem o use location, tem o use params, vamos ver várias coisas. Também deixei muitos desafios para você, e é necessário que você já tenha alguns conhecimento fundamentais do React, como reatividade, os hooks nativos do React, e também como lidar com arquivos estáticos, que estamos utilizando bastante nesse curso também.

Então é isso, eu estou muito ansioso para te ensinar tudo isso, vai ser uma verdadeira jornada, e eu espero que você aprenda bastante.

Criando o ''Olá Mundo'' - Criando e preparando a aplicação

Então, vamos criar a nossa aplicação React para o “Olá, Mundo”. Eu vou abrir o PowerShell do Windows, e se você estiver em outro sistema operacional, pode abrir o terminal do seu computador também, e eu vou digitar npx create-react-app ola-mundo.

Isso você já sabe o que faz, o npx vai executar o pacote create-react-app para realmente instalar todas as nossas dependências que são necessárias para o projeto. Dou um “Enter”, e essa pasta pode demorar um pouco para criar o projeto, então eu já volto.

Já criou o projeto, demorou dois minutos, isso nunca tinha acontecido comigo, mas vamos seguir os passos que o terminal me deu, eu vou digitar cd ola-mundo, e eu vou aproveitar para abrir logo no Visual Studio Code, digitando code., dou o “enter”, o projeto já abriu a estrutura dele no Visual Studio Code, e temos a estrutura de pastas.

Eu vou abrir a pasta “src”, e eu vou excluir alguns arquivos que não vamos precisar, eu vou excluir o “app.test.js”, estou segurando o “Ctrl” do teclado para selecionar múltiplos arquivos, e vou selecionar também o “logo.svg”, “reportWebVitals.js”, “setupTests.js” também. Dou um “delete”, e excluí os arquivos.

Também não vou utilizar esse “app.css”, vou remover. Agora vou para o “index.js”, também vou remover as últimas linhas, que são alguns comentários, e a chamada da função reportWebVitals(). Vou tirar também os imports que eu não preciso mais, o do próprio Web Vitals, salvo o “index.js”, e agora eu vou em “index.css”, e tem um código CSS padrão, que eu vou excluir, e no lugar eu vou pegar um código CSS da minha cola, que já está disponível para você na transcrição.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --azul-escuro: #041833;
  --azul-medio: #1875E8;
  --cor-fonte-principal: #041833;
  --cor-fonte-post: #444444;
  --branco: #FFF;
  --fonte-principal: 'Raleway', sans-serif;
  --fonte-secundaria: 'Playfair Display', sans-serif;

  font-family: var(--fonte-principal);
}

#root {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

a, button, input, textarea {
  font: inherit;
  color: inherit;
}

button {
  background-color: transparent;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 5rem;
}

Eu acabei de colá-lo no “index.css”, eu estou colando justamente porque esse curso não foca no CSS, o foco dele é o React, então para não perdermos muito tempo escrevendo todos esse código, eu já vou deixar pronto para você. E eu estou basicamente colocando o React CSS, estou colocando as variáveis do projeto, você pode dar uma olhada.

E inclusive, nesse código tem algumas fontes externas que eu estou pegando, que é “Raleway” e “Playfair Display”. Para conseguirmos utilizar essas fontes, também temos que importá-las das fontes do Google. E para isso, eu vou abrir a pasta “public”, e o arquivo “index.html”, porque lá tem um código pronto que eu já gerei do HTML no fontes do Google, você pode gerar esse código também, mas já vou deixar pronto para você também.

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Raleway&display=swap" rel="stylesheet">

E vou apagar os comentários desse “index.html” para não poluir muito o código, e logo antes da tag <title>, eu vou dar um “Ctrl + V” no código, são três tags <links>, e falando em <title>, eu vou também excluir <title>React App</title>, e escrever <title>Olá Mundo!</title>, e salvo esse arquivo.

Já fizemos as alterações, vamos ver se o projeto já está rodando corretamente no navegador, dou um “Ctrl + J” para abrir o terminal integrado do VSCode, e escrevo npm start para executar nossa aplicação pela primeira vez. A primeira vez que executamos uma aplicação React também pode demorar um pouco, então já volto com você.

Deu alguns erros no terminal dizendo que faltou um import, e que não está conseguindo achar o caminho. Realmente tem um import que eu esqueci de remover, então eu vou em App.js, não estamos mais importando esse logo.svg, e nem esse app.css, então excluímos, salvamos o arquivo e vamos voltar para o navegador.

E tem outra coisa que também esquecemos de excluir em “app.js”. Também estamos utilizando a logo, então eu vou apagar e colocar uma <h1>Olá Mundo!</h1>, e vamos ver se aparece no navegador. Salvo esse arquivo, e olha que legal, agora está aparecendo “Olá Mundo!”, então já tiramos aquela estrutura por padrão do React, e já colocamos os estilos, umas fotos externas, que vão ser necessárias para o nosso projeto. Então é isso, no próximo vídeo já vamos ver umas coisas bem legais em relação a rotas da nossa aplicação, e eu te espero lá.

Criando o ''Olá Mundo'' - Alternando entre rotas com JS

Olhando o design do Figma do nosso projeto, percebemos que temos um monte de páginas. Temos o início, “sobre mim”, a página de post e uma 404 também. Só que sabemos que uma aplicação React, se eu colocar no VSCode, dentro da pasta “public”, estamos sempre trabalhando com o mesmo “index.html”. Então, como fazemos para trabalhar com várias páginas, sendo que só tem um HTML?

Vamos no navegador, a parte que o projeto está rodando no navegador, e uma coisa que seria interessante, seria eu colocar no final da URL “/sobremim”, e aparecer a página. Eu até digitei “localhost:3000/sobremim”, e dei um “enter”, e ainda continua aparecendo “Olá Mundo!”, então não estamos conseguindo ter esse comportamento de mostrar diferentes coisas na tela.

Mas o legal é que o JavaScript fornece recursos nativos bem interessantes para nós lermos informações da URL e conseguirmos manipulá-la também. Vamos ver como fazer isso?

Vamos no VSCode, eu vou abrir o arquivo “App.js”, antes de function App() {, eu vou escrever console.log(window.location);, window é um objeto global do JavaScript, e vamos ver o que tem essa propriedade location. Vou salvar esse arquivo, volto ao navegador, eu vou dar um “F12” para abrir o DevTool do Chrome, e foi impresso um objeto location.

Tem um monte de propriedade, um monte de informações, mas eu quero que você preste atenção na propriedade pathname, que é uma string “/sobremim”, e isso é justamente o que eu digitei depois de “localhost:3000”. Olha o que acontece se eu deixar a URL apenas como “localhost:3000” e der um “Enter”.

Foi impresso um objeto location, eu vou abrir no DevTools, e o pathname agora é /, então, de acordo com a URL do navegador, eu consigo obter essa informação pelo pathname. Então, eu tive uma ideia agora, vamos voltar para o “App.js”, e logo depois de console.log, eu vou escrever const pagina, e essa página vai ser justamente um JSX que eu quero imprimir, dependendo do window.location.

Então, para essa página eu vou atribuir window.location.pathname === ‘/’ ? <div>Olá Mundo!</div>, se for igual a ‘/’, que é como se fosse o “index.html” mesmo da nossa aplicação, eu vou retornar o JX6, que é uma div “Olá Mundo!”. E se não for esse caminho, eu vou retornar uma <div>Sobre mim</div>, então const pagina = window.location.pathname === ‘/’ ? <div> Olá Mundo!</div> : <div>Sobre mim...</div>.

E agora, no JSX que está sendo retornado para o componente App, eu vou apagar o <h1>, e retornar diretamente a página. Eu salvo esse arquivo, volto ao navegador, e no “localhost:3000” está aparecendo “Olá Mundo!”, se eu for no final da URL e digitar “/sobremim” apareceu o texto “sobre mim”. Então, de alguma forma já estamos conseguindo mostrar diferentes coisas na tela, de acordo com a URL do navegador, isso é bem legal.

Eu vou aproveitar, e ao invés de retornar o JSX no “app.js” de forma pura, eu vou criar os componentes do React, para já ter uma organização melhor no meu projeto. Então, dentro da pasta “src”, eu vou criar uma pasta chamada “paginas”, e dentro dela eu vou criar mais uma pasta chamada “inicio”. Dentro dela eu vou criar um “index.js”, e eu vou escrever export default function Inicio() {, e retornar um <h1>Olá Mundo!</h1>.

Salvo esse arquivo, e eu vou criar também mais uma pasta dentro da pasta “paginas”, que vai se chamar “sobreMim”. E dentro dela vai ter um “index.js”. Tem só uma coisa que eu errei, o “index.js” do início eu coloquei no lugar errado, eu vou arrastá-lo para dentro da pasta “início”. Então, de alguma forma já estamos conseguindo mostrar diferentes coisas na tela de acordo com a URL do navegador.

Então, eu vou até colocar no projeto, e para ter uma organização melhor no nosso projeto, dentro da pasta “src” eu vou criar uma pasta chamada “paginas”, e dentro eu vou colocar os componentes, que vão ser justamente as páginas da nossa aplicação.

Então, dentro de “paginas” eu vou criar mais uma pasta chamada “inicio”, e dentro dela eu vou criar um arquivo chamado “index.js”. O código desse arquivo vai ser export default function Inicio() {, e vou retornar o JSX <h1>Olá mundo!</h1>. Salvo esse arquivo.

E dentro da pasta “paginas”, eu vou criar mais uma chamada “sobreMim”, e dentro dela vai ter também um “index.js”, e eu vou escrever export default function SobreMim() {, e retornar <h1>Sobre mim...</h1>. Salvo esse arquivo, vou voltar para “App.js”, e no lugar da primeira div com “Olá mundo”, que eu tinha escrito na parte da atribuição da página, eu vou apagar e escrever <Inicio>, e importar automaticamente o início do arquivo que acabamos de criar.

E no lugar da div com o texto “Sobre mim...”, eu apago, e eu vou importar o componente “SobreMim”. Eu estou utilizando o VSCode para me ajudar a fazer o autoimport. Se não foi feito automaticamente para você, pode escrever “import Inicio from ./paginas/inicio”, e a mesma coisa com o “Sobre mim”. E agora, vou salvar esse arquivo, volto ao navegador e continua funcionando, na rota “localhost:3000/sobremim”, aparece a <h1> “sobre mim”, e se eu apagar o “/sobremim”, aparece o “Olá mundo!”, então continua funcionando perfeitamente.

Eu já criei esses componentes para já ficar organizado, mas o intuito que eu queria te mostrar, é que dá para fazer justamente essa troca de elementos, dependendo da rota que estamos no nosso navegador com o JavaScript puro. Só que conforme vamos evoluindo a nossa aplicação, vamos deparando vários outros problemas em relação as rotas, as páginas da nossa aplicação.

Se fôssemos utilizar o JavaScript puro o tempo todo para fazer isso, não seria muito legal, ia ficar difícil fazer a manutenção no código, e também não seria muito legível. É justamente nesse ponto que vai entrar a biblioteca React Router Dom. Vamos explorá-la melhor no próximo vídeo, e implementá-la no nosso projeto. Então, te espero lá.

Sobre o curso React: desenvolvendo em React Router com JavaScript

O curso React: desenvolvendo em React Router com JavaScript possui 128 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:

• Criando o ''Olá Mundo''
• SPA com react-router-dom
• Rotas aninhadas
• Rotas dinâmicas
• Finalizando o projeto