react admin dashboard material ui

17 Nov 2022

React Admin Dashboard | Tautan langsung

Teknologi yang digunakan

1. Bereaksi
2. Material ui
3. Formik
4. Yup
5. Bagan Nivo
6. Kalendar penuh
7. React-Pro-Sideebar

Aplikasi ini terdiri dari

• Mode terang & gelap
• Ringkasan Dasbor
• 3 halaman tabel data yang berbeda
• Halaman Formulir Input Pengguna
• Integrasi Kalender
• Halaman FAQ
• 4 grafik yang berbeda

Konteks pembelajaran

• ... SPREAR Operator + Pembuatan Properti Objek Dasar Basis Bersyarat di Tingkat Tema
• Perkenalkan dengan alat CSS ==> pestisida
• dengan array objek {teks, ikon}, membangun menu samping
• Bahan-kolom material-ui tata letak tampilan data ...
• Penggunaan tata letak data-grid dari material ui ...
• Nama jalur menjadi item menu yang dipilih, setelah menyegarkan juga ...
• Validasi Formulir Input Pengguna yup ...
• Nomor Telepon Pola Regex dari String Input ...
• Penggunaan [email protected] dengan css ...
• Penggunaan Perpustakaan full-calendar ...
• Penggunaan sistem nivo chart ...
• Migrasi pengalaman dari vite untuk bereaksi,
  • Karena Vite memiliki beberapa issus dengan lib kalendar penuh ...

Paket dasar benang/lib ...

TIDAK	Nama Paket	Keterangan
01	Benang Tambahkan react-router-dom	Navigasi URL
02	Benang Tambahkan [email protected]	React Pro Sidebar
03	Benang menambahkan formik	Membentuk elemen
04	Benang Tambahkan yup	Validasi formulir
05	Benang Tambahkan @mui/material	Material ui
06	Benang Tambahkan @emotion/react	Material ui
07	Benang menambahkan @emotion/styled	Material ui
08	Benang menambahkan @emotion/styled	Material ui
09	Benang Tambahkan @mui/x-data-grid	Material ui
10	Benang tambahkan @mui/icons-material	Material ui
11	Benang Tambahkan @fullcalendar/core	Kalender penuh?
12	Benang Tambahkan @fullcalendar/daygrid	Kalender penuh?
13	Benang Tambahkan @fullcalendar/timegrid	Kalender penuh?
14	Benang Tambahkan @fullcalendar/list	Kalender penuh?
15	Benang Tambahkan @fullcalendar/interaction	Kalender penuh?
16	Benang Tambahkan @fullcalendar/react	Kalender penuh?
17	Benang Tambahkan @nivo/core	Bagan Nivo?
18	Benang Tambahkan @nivo/pie	Bagan Nivo?
19	Benang Tambahkan @nivo/bar	Bagan Nivo?
20	Benang Tambahkan @nivo/line	Bagan Nivo?
21	Benang Tambahkan @nivo/geo	Bagan Nivo?

File & Folder Hirarki

 ?
src
├── components
|   ├── BarChart.jsx
|   ├── GeographyChart.jsx
|   ├── Header.jsx
|   ├── index.js
|   ├── LineChart.jsx
|   ├── PieChart.jsx
|   ├── ProgressCircle.jsx
|   └── StatBox.jsx
|
├── constants
|   ├── contactsColumns.js
|   ├── faq.js
|   ├── inputFormFields.js
|   ├── inputFormValues.js
|   ├── invoicesColumns.js
|   ├── mockData.js
|   ├── mockGeoFeatures.js
|   ├── sidebarMenu.js
|   └── teamColumns.js
|
├── pages
|   |   Dashboard.jsx
|   |   index.js
|   |
|   ├── charts
|   |   ├── Bar.jsx
|   |   ├── Geography.jsx
|   |   ├── Line.jsx
|   |   └── Pie.jsx
|   |
|   ├── global
|   |   ├── SidebarMenu.jsx
|   |   ├── SidebarMenuItem.jsx
|   |   └── Topbar.jsx
|   |
|   ├── info
|   |   ├── Contacts.jsx
|   |   ├── Invoices.jsx
|   |   └── Team.jsx
|   |
|   └── inputs
|       ├── Calendars.jsx
|       ├── FAQ.jsx
|       └── InputForm.jsx
|
├── styles
|   ├── index.css
|   └── theme.js
|
├── App.jsx
└── index.js
?

 tree /f