react admin dashboard material ui

2022年11月17日

Admin Dashboardを反応させる|ライブリンク

使用される技術

1. 反応します
2. マテリアルUI
3. Formik
4. うん
5. ニボチャート
6. フルカレンダー
7. React-Pro-Sidebar

このアプリケーションは構成されています

• ライト＆ダークモード
• ダッシュボードの概要
• 3つの異なるデータテーブルページ
• ユーザー入力フォームページ
• カレンダー統合
• FAQページ
• 4つの異なるチャート

学習コンテキスト

• ...オペレーター +条件付きベースオブジェクトのプロパティのロードをテーマレベルで広める
• CSSツール==>農薬を紹介します
• オブジェクトの配列{テキスト、アイコン}、construct side-menu
• 列列材料レイアウトデータ表示...
• 材料のdata-gridレイアウトの使用material ui ...
• パス名は選択されたメニュー項目になり、更新後も...
• ユーザー入力フォーム検証yupチェック...
• 入力文字列からの電話番号regexパターン...
• cssを使用した[email protected]の使用...
• full-calendarライブラリの使用...
• nivo chartシステムの使用...
• ViteからReactにエクスペリエンスを移行し、
  • ViteにはフルカレンダーLibのあるIssusがあるからです...

糸ベースパッケージ/lib ...

いいえ	パッケージ名	説明
01	糸はreact-router-domを追加します	URLナビゲーション
02	Yarn Add [email protected]	React Proサイドバー
03	糸はformikを追加します	フォーム要素
04	糸はyupを追加します	フォーム検証
05	Yarn add @mui/material	マテリアルUI
06	Yarn add @emotion/react	マテリアルUI
07	Yarn Add @emotion/styled	マテリアルUI
08	Yarn Add @emotion/styled	マテリアルUI
09	Yarn add @mui/x-data-grid	マテリアルUI
10	Yarn add @mui/icons-material	マテリアルUI
11	YARN ADD @fullcalendar/core	フルカレンダー？
12	Yarn add @fullcalendar/daygrid	フルカレンダー？
13	Yarn add @fullcalendar/timegrid	フルカレンダー？
14	YARN ADD @fullcalendar/list	フルカレンダー？
15	YARN ADD @fullcalendar/interaction	フルカレンダー？
16	Yarn add @fullcalendar/react	フルカレンダー？
17	Yarn add @nivo/core	ニボチャート？
18	糸は@nivo/pieを追加します	ニボチャート？
19	Yarn add @nivo/bar	ニボチャート？
20	Yarn add @nivo/line	ニボチャート？
21	Yarn add @nivo/geo	ニボチャート？

ファイルとフォルダーの階層

 ?
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