Bibliotecas em React

Uma das principais vantagens do React é a vasta gama de bibliotecas disponíveis que ampliam as funcionalidades das aplicações. Neste curso, vamos explorar duas dessas bibliotecas, mas existem muitas outras que podem atender a diversas necessidades. Essas bibliotecas são criadas pela comunidade e podem ser instaladas usando o comando npm install pacote no terminal. As bibliotecas instaladas ficam na pasta node_modules e são referenciadas no arquivo package.json.

A biblioteca React Router é uma ferramenta que permite gerenciar a navegação em aplicações React, facilitando a criação de rotas e a renderização de componentes com base na URL. Com ela, você pode definir diferentes caminhos e associá-los a componentes específicos, permitindo uma experiência de navegação fluida e organizada dentro da sua aplicação.

• Instalando

npm install react-router-dom
npm install @types/react-router-dom

• Mãos a massa!

1. A lógica das rotas será criada em routes.tsx e faremos com que a aplicação app.tsx utilize-a.

2. Crie uma pasta pages dentro da sua src e lá coloque as suas páginas, elas serão .tsx.

3. Crie components para colocar nessas páginas, exporte-os e depois chame-os para dentro das suas páginas.

routes.tsx:

//importa o createBrowserRouter
import { createBrowserRouter } from "react-router-dom";

//importa os componentes
import Home from "./pages/home";
import Home2 from "./pages/home2";
import Home3 from "./pages/home3";

//cria o router
const router = createBrowserRouter([
    {
        path: "/home", //passa o caminho da pagina
        element: <Home />, //elemento a ser renderizado
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    },
    {
        path: "/home2",
        element: <Home2 />,
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    },
    {
        path: "/home3",
        element: <Home3 />,
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    }
]);

//exporta a const router
export default router;

subpastas:

app.tsx:

import React from 'react';
import './App.css';
import './components/boasvindas';
import BoasVindas from './components/boasvindas'; // tu ta dando import da função

import { RouterProvider } from 'react-router-dom'
import router from './routes';

function App() {  //exportando o router
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;This code represents the main App component of a React application using React Router for navigation.

Navegando entre as páginas

Outlet

Com o Outlet, podemos criar um cabeçalho e um rodapé, além de especificar onde os componentes filhos devem ser renderizados na página. Isso permite uma estrutura mais organizada e reutilizável para a nossa aplicação, garantindo que a navegação e a apresentação dos conteúdos sejam consistentes.

//importa o createBrowserRouter
import { createBrowserRouter, Outlet } from "react-router-dom";

//importa os componentes
import Home  from "./pages/home";
import Home2 from "./pages/home2";
import Home3 from "./pages/home3";

//Outlet
const Layoutprincipal() => (
<div>
	<header> //cabeçalho e link de navegação
		<nav>
	    <ul>
        <li><Link to="/Home">Home</li> //link para as paginas
        <li><Link to="/Home2">Home2</li> //link para as paginas
        <li><Link to="/Home3">Home3</li> //link para as paginas
	    </ul>
		</nav>
		<h1>Henrique Produções</h1>
	</header>
	
	<main> 
		<Outlet /> //Onde as paginas devem ser renderizadas
	</main>
	
	<footer> //rodapé
		<p>Seila company 2024</p>
	</footer> 
</div>	
);

//cria o router
const router = createBrowserRouter([
    {
        path: "/home", //passa o caminho da pagina
        element: <Home />, //elemento a ser renderizado
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    },
    {
        path: "/home2",
        element: <Home2 />,
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    },
    {
        path: "/home3",
        element: <Home3 />,
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    }
]);

//exporta a const router
export default router;

Navlink

Usar NavLink ao invés de Link no React Router é uma ótima escolha quando você deseja estilizar o link com base em sua navegação ativa. NavLink permite que você aplique estilos específicos ao link que está atualmente ativo, o que pode melhorar a experiência do usuário.

//importa o createBrowserRouter
import { createBrowserRouter, Outlet } from "react-router-dom";

//importa os componentes
import Home  from "./pages/home";
import Home2 from "./pages/home2";
import Home3 from "./pages/home3";

//Outlet
const Layoutprincipal() => (
<div>
	<header> //cabeçalho e link de navegação
		<nav>
	    <ul>
        <li><NavLink to="/Home" activeClassName="active">Home</li> //link para as paginas
        <li><NavLink to="/Home2" activeClassName="active">Home2</li> //link para as paginas
        <li><NavLink to="/Home3" activeClassName="active">Home3</li> //link para as paginas
	    </ul>
		</nav>
		<h1>Henrique Produções</h1>
	</header>
	
	<main> 
		<Outlet /> //Onde as paginas devem ser renderizadas
	</main>
	
	<footer> //rodapé
		<p>Seila company 2024</p>
	</footer> 
</div>	
);

//cria o router
const router = createBrowserRouter([
    {
        path: "/home", //passa o caminho da pagina
        element: <Home />, //elemento a ser renderizado
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    },
    {
        path: "/home2",
        element: <Home2 />,
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    },
    {
        path: "/home3",
        element: <Home3 />,
        errorElement: <div>Error 404</div> //aviso de erro de rota quando a pagina é inválida
    }
]);

//exporta a const router
export default router;

Com o activeClassName="active" vc pode utilizar uma classe CSS para estilizar esse link, segue então:

nav ul { //para todas as tags nav ul com o activeClassName="active"
  list-style-type: none;
  padding: 0;
}

nav ul li { //para todas as tags nav ul li com o activeClassName="active"
  display: inline;
  margin-right: 10px;
}

.active { //para as ativações de todos os navlink com o activeClassName="active"
  font-weight: bold;
  color: red;
}

UseNavigate

Utilização do UseNavigate, vc pode dentro do component deixar um botão com uma arrow func que utilize um navigate até uma determinada página.

//exemplo dentro do component home

import {useNavigate} from "react-router-dom"; // importa o hook useNavigate

function Home() { 
  const navigate = useNavigate(); //a const navigate recebe o hook

  return ( //retorna a div
    <div>
      <h1>Página Principal</h1>
      <button onClick={() => navigate("/home")}>home</button>
      <button onClick={() => navigate("/home2")}>home2</button>
    </div>
  );
}

export default Home;

Há muito mais para explorar!

O React oferece inúmeras bibliotecas e funcionalidades adicionais, e cada passo dado até aqui pode ser ampliado com o uso de ferramentas complementares, como o TypeScript. Portanto, este material termina por aqui, mas, sem dúvida, essa é apenas a ponta do iceberg quando se trata de React. No entanto, a base que construímos juntos é sólida e irá guiá-lo com segurança para os próximos passos em sua jornada de aprendizado.