# 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
```powershell
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:
```jsx
//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: , //elemento a ser renderizado
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
},
{
path: "/home2",
element: ,
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
},
{
path: "/home3",
element: ,
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
}
]);
//exporta a const router
export default router;
```
subpastas:
**app.tsx:**
```jsx
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 (
);
}
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.
```jsx
//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() => (
//cabeçalho e link de navegação
Henrique Produções
//Onde as paginas devem ser renderizadas
);
//cria o router
const router = createBrowserRouter([
{
path: "/home", //passa o caminho da pagina
element: , //elemento a ser renderizado
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
},
{
path: "/home2",
element: ,
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
},
{
path: "/home3",
element: ,
errorElement:
Error 404
//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.
```jsx
//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() => (
//cabeçalho e link de navegação
Henrique Produções
//Onde as paginas devem ser renderizadas
);
//cria o router
const router = createBrowserRouter([
{
path: "/home", //passa o caminho da pagina
element: , //elemento a ser renderizado
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
},
{
path: "/home2",
element: ,
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
},
{
path: "/home3",
element: ,
errorElement:
Error 404
//aviso de erro de rota quando a pagina é inválida
}
]);
//exporta a const router
export default router;
```
{% hint style="info" %}
Com o activeClassName="active" vc pode utilizar uma classe CSS para estilizar esse link, segue então:
{% endhint %}
```jsx
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.
```jsx
//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
Página Principal
);
}
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://uclsanca.gitbook.io/learn/web-avancado/reactjs/bibliotecas-em-react.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.