Aprenda a trabalhar com React e construa junto comigo um site para portfólio (parte 2)

Fala pessoal, tudo bem? No último post, começamos a trabalhar nosso boilerplate e definimos as estrutura de branchs que usaremos em nosso projeto, hoje iremos finalizar nosso boilerplate e começar a definir alguns components para usarmos como base, então vamos nessa!

Definindo a navegação com React Router Dom

Se olharmos o que fizemos no primeiro passo, instalamos algumas libs importantes e uma delas é react-router-dom, essa lib irá nos possibilitar navegar em nossas views. Mas para que isso seja possível precisamos definir algumas coisas em nosso projeto, em primeiro momento vamos atualizar nosso código index.js com o seguinte trecho:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</React.StrictMode>
);

reportWebVitals();

O código acima, que utiliza o componente 'BrowserRouter', tem como objetivo capturar e armazenar a localização atual na barra de endereço do navegador por meio de URLs limpas, além de possibilitar a navegação através de pilhas de históricos integradas no navegador.

Agora, vamos direcionar nossa atenção para o arquivo App.js, onde introduziremos as rotas da nossa aplicação. Antes de apresentarmos a primeira rota, no entanto, vamos definir a nossa primeira página (componente), que chamaremos de "Home". Para isso, criamos um diretório chamado 'Views'. Dentro deste diretório, criamos outra pasta denominada 'Home' e, por fim, criamos um arquivo chamado index.jsx, contendo o seguinte código:

import React from 'react'
const Home = () => {
return (
  <div>
      <h1>Página home</h1>
  </div>
)
}

export default Home;

Na estrutura apresentada, não encontramos nada muito complexo; trata-se simplesmente de uma função do React responsável por gerar nossa View (componente). Para aqueles familiarizados com JavaScript, essa função é uma "arrow function". Caso você não esteja familiarizado, recomendo a leitura de alguns materiais básicos sobre JavaScript para não se sentir perdido ao longo desta série de publicações.

Agora que temos nossa primeira view, vamos verificar se nossa navegação está funcionando corretamente. Para isso, iremos definir a estrutura do nosso arquivo App.js. Abaixo, segue o trecho de código com a nossa view já sendo carregada.

import { Routes, Route } from "react-router-dom";
import Home from "./Views/Home";

export default function App() {
return (
  <div>
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
      </Route>
    </Routes>
  </div>
);
}

Vamos analisar o código fornecido. Após a implementação da view "Home", notamos algumas adições significativas. A primeira delas é o componente "Routes", encarregado de examinar as rotas filhas para encontrar a melhor correspondência e renderizar a respectiva ramificação da interface do usuário (UI).

Em seguida, encontramos o componente "Route", onde apontamos a nossa rota, reconhecida pelo elemento definido (componente passado como "element"). O caminho da rota é especificado em "path", e há tratativas adicionais que podem ser utilizadas para designar uma rota, como, por exemplo, o uso de "index", indicando que a rota principal é a "Home".

Poderíamos encerrar por aqui, mas observe que temos mais um componente a ser explorado: o nosso componente "Layout". Este componente é utilizado para agregar alguns elementos padrões a diversas páginas, como menu e rodapé. Vamos criar o componente "Layout" em uma pasta com o mesmo nome. Dentro dessa pasta, criamos um arquivo chamado index.jsx, onde podemos definir o código do componente, conforme apresentado abaixo.

import { Outlet } from "react-router-dom";
function Layout() {
return (
  <div>
    <Outlet />
  </div>
);
}

export default Layout;

No código acima observamos que foi adicionado o componente Outled, esse componente tem como finalidade renderizar os elementos da rota filha. Isso permite que uma interface aninhada apareça quando as rotas secundárias são renderizadas. Se a rota pai corresponder exatamente, ela renderizará uma rota de índice filha ou não irá mostrar resultados, caso não houver rota de índice. Agora vamos apenas adicionar mais um componente para que possamos ter uma situação de erro, dentro de Views criamos uma pasta chamada Erro, e também criamos um arquivo index.jsx. No arquivo inserimos o seguinte trecho:

import { Link } from "react-router-dom";
function Erro () {
  return (
    <div>
      <h2>Erro, conteúdo não encontrado</h2>
      <p>
        <Link to="/">Voltar a página inicial</Link>
      </p>
    </div>
  );
}

export default Erro;

No componente erro, adotamos o uso do Link, ele faz a função das ancoras nativas do html em nossa aplicação React, mas diferente da maneira tradicional, ao invés de usarmos 'href' para apontar o endereço, usamos o 'to', apontando as rotas dessa forma: <Link to="min-rota">Link aqui</Link>. Agora vamos atualizar o código de nosso App.js.

import { Routes, Route } from "react-router-dom";
import Home from "./Views/Home";
import Erro from "./Views/Erro";
import Layout from "./Layout";

const App = () => {
return (
  <div>
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="*" element={<Erro />} />
      </Route>
    </Routes>
  </div>
);
};

export default App;

Agora temos nosso Boilerplate definido, podemos partir para a terceira parte onde iremos criar nosso header. Mas por hoje vamos fechando por aqui, se quiser acessar o repo com os códigos, esse é link: projeto no GitHub. Agradeço pela sua leitura até aqui, espero que tenha gostado desse post, e até próximo.