Como Construir um Painel Administrativo com React

Painéis administrativos são essenciais para diversos tipos de aplicações, permitindo a administração e visualização de dados de forma intuitiva. Neste post, vamos aprender a construir um painel administrativo utilizando React, uma das bibliotecas JavaScript mais populares atualmente.

Configurando o Ambiente de Desenvolvimento

Primeiro, precisaremos configurar nosso ambiente de desenvolvimento para trabalhar com React. Para isso, utilizaremos o Create React App:

npx create-react-app admin-dashboard
cd admin-dashboard

Para um painel administrativo, usaremos algumas bibliotecas adicionais:

• react-router-dom para a navegação
• Material-UI para componentes UI
• axios para requisições HTTP

Instale as dependências:

npm install @mui/material @emotion/react @emotion/styled react-router-dom axios

Estrutura do Projeto

Vamos estruturar nosso projeto para manter o código organizado. Crie as seguintes pastas e arquivos:

src/
|-- components/
|   |-- Sidebar.js
|   |-- Header.js
|   |-- Dashboard.js
|-- pages/
|   |-- Home.js
|   |-- Reports.js
|   |-- Settings.js
|-- App.js
|-- index.js

Sidebar

A Sidebar será responsável pela navegação do painel. Vamos utilizar componentes do Material-UI:

// src/components/Sidebar.js

import React from 'react';
import { Drawer, List, ListItem, ListItemText } from '@mui/material';
import { Link } from 'react-router-dom';

const Sidebar = () => (
  <Drawer variant="permanent">
    <List>
      <ListItem button component={Link} to="/">
        <ListItemText primary="Home" />
      </ListItem>
      <ListItem button component={Link} to="/reports">
        <ListItemText primary="Reports" />
      </ListItem>
      <ListItem button component={Link} to="/settings">
        <ListItemText primary="Settings" />
      </ListItem>
    </List>
  </Drawer>
);

export default Sidebar;

Header

O Header será simples, contendo um título para o painel:

// src/components/Header.js

import React from 'react';
import { AppBar, Toolbar, Typography } from '@mui/material';

const Header = () => (
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6">Admin Dashboard</Typography>
    </Toolbar>
  </AppBar>
);

export default Header;

Páginas

Vamos criar três páginas simples: Home, Reports e Settings.

// src/pages/Home.js

import React from 'react';

const Home = () => <div>Home Page</div>;

export default Home;

// src/pages/Reports.js

import React from 'react';

const Reports = () => <div>Reports Page</div>;

export default Reports;

// src/pages/Settings.js

import React from 'react';

const Settings = () => <div>Settings Page</div>;

export default Settings;

App Component

No App.js, configuraremos nossas rotas e importaremos os componentes Sidebar e Header:

// src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Home from './pages/Home';
import Reports from './pages/Reports';
import Settings from './pages/Settings';
import { CssBaseline } from '@mui/material';

const App = () => (
  <Router>
    <CssBaseline />
    <Header />
    <Sidebar />
    <main style={{ marginLeft: 240, padding: '1rem' }}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/reports" element={<Reports />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </main>
  </Router>
);

export default App;

Conclusão

Com os passos acima, configuramos um painel administrativo básico utilizando React. O painel possui navegação entre páginas, uma barra lateral fixa e um cabeçalho. A partir desse ponto, você pode expandir a funcionalidade do painel, adicionando novos componentes e páginas conforme necessário.