Rotas e Ganchos js

Rotas em React com React Router

As rotas em React são essenciais para determinar como os usuários navegam pelo seu aplicativo. Imagine um aplicativo de compras online: você precisa de rotas para a página inicial, categorias, produtos e carrinho de compras. Felizmente, o React Router facilita a criação de uma estrutura de rotas organizada.

Lembrando que ele não vem instalado em seu projeto quando você inicia um template em

react. Então, você deve instalar ele na pasta do seu projeto react, você vai usar o seguinte comando no terminal:

 npm install react-router-dom

👍

Componentes Básicos do React Router

O componente <BrowserRouter />: Gerencia as mudanças de URL e rotas na página. Detecta quando o usuário clica em um link ou digita uma URL.

Componente ,Routes />: Gerencia as rotas da aplicação, renderizando o componente correto para a URL atual.

<Route />: Cria rotas, determinando quais componentes serão renderizados para cada URL específica.

Exemplo de Uso

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
return (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/categorias" element={<Categories />} />
      <Route path="/produtos" element={<Products />} />
      <Route path="/carrinho" element={<Cart />} />
    </Routes>
  </BrowserRouter>
);
}

React Hooks: Simplificando o Desenvolvimento

Os React Hooks são funções JavaScript que permitem que você acesse recursos de estado e ciclo de vida do React a partir de componentes funcionais. Eles simplificam o desenvolvimento e ajudam a organizar a lógica dentro dos componentes.

1. useState: Gerenciando Estado

O useState permite que você adicione estado a componentes funcionais. Por exemplo:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
  <div>
    <p>Contagem: {count}</p>
    <button onClick={() => setCount(count + 1)}>Incrementar</button>
  </div>
);
}

2. useEffect: Lidando com Efeitos Colaterais

O useEffect é usado para executar código após a renderização do componente. Por exemplo:

import React, { useEffect } from 'react';

function FetchData() {
useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
}, []);

return <p>Carregando dados...</p>;
}

3. useContext: Compartilhando Dados

O useContext permite que você compartilhe dados entre componentes sem passá-los manualmente. Por exemplo:

import React, { useContext } from 'react';

const ThemeContext = React.createContext();

function App() {
const theme = useContext(ThemeContext);

return <div>Usando o tema {theme}</div>;
}

Isso é só o conceito básico. Para mais averiguações consulte documentação oficial.

Me siga nas redes

linkedin

Hashtags

#React #ReactRouter #ReactHooks