windmill dashboard react

100 スコアが 4 つあり、PWA に対応しています。データを接続するだけです。

ライブで見てください

これはテンプレートではありません。これは React 上に構築された完全なアプリケーションであり、細部まですべて処理されているため、フィードするデータを取り込むだけで済みます。

私のプロジェクトではアクセシビリティが最優先事項であり、あなたのプロジェクトでも同様であるべきだと思います。そのため、これは実際のスクリーン リーダー、フォーカス トラップ、キーボード ナビゲーションをどこでも利用できることを参考にして開発されました。

?特徴

• ?完全にアクセス可能 (スクリーン リーダーを使用して開発)
• ?ダークテーマが有効になっています (テーマに基づいて異なる画像もロードします)
• ?複数の (カスタム) コンポーネント
• ⚡ コード分割
• 追い風CSS
• Windmill React UI
• 反応ルーター
• ヒーローアイコン
• チャート.js
• オフラインファーストでアプリのようなエクスペリエンスを提供する PWA

ドキュメント

一般的なコンポーネント

Windmill Dashboard React は、Windmill React UI 上に構築されています。そこには、あらゆる小さなコンポーネントのドキュメントが見つかります。

ルーティング

Windmill ダッシュボードのルートは、サイドバー (routes/sidebar.js) と一般 (routes/index.js) の 2 つのカテゴリに分類されます。

サイドバーのルート

これらはサイドバーに表示されるルートです。彼らは 3 つのプロパティを期待しています。

• path : 宛先。
• name : 表示される名前。
• icon : アイテムを説明するアイコン

Pages オプションのように、ドロップダウンとして使用される項目にはpath必要ありませんが、 pathとnameを持つオブジェクトのroutes配列が必要です。

 // sidebar.js
{
  path : '/app/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/create-account' ,
      name : 'Create account' ,
    } , 

一般（ルーター）ルート

これらは内部(プライベート) ルートです。これらは、デフォルトのcontainers/Layout使用してアプリ内でレンダリングされます。

たとえば、ランディング ページにルートを追加したい場合は、それをAppのルーター (src/App.js) に追加する必要があります。 Login 、 CreateAccountおよび他のページがルーティングされるのとまったく同じです。

ルーターに新しいページを追加するにはどうすればよいですか?

1. src/pages内にページを作成します (例: MyPage.js )。
2. グローバルルーター( src/routes/index.js )に追加します。

 const MyPage = lazy ( ( ) => import ( '../pages/MyPage' ) )

次に、それをroutes配列に追加します。

 {
  path : '/my-page' , // the url that will be added to /app/
  component : MyPage , // the page component you jsut imported
}

3. このページにサイドバーからアクセスできるようにするには、次のオプションを行う必要があります。

• それをルートroutes配列に追加します

 {
  path : '/app/my-page' , // /app + the url you added in routes/index.js
  icon : 'HomeIcon' , // the component being exported from src/icons/index.js
  name : 'My Page' , // name that appear in Sidebar
} ,

• ドロップダウンの下にオプションとして追加します

 {
  icon : 'PagesIcon' ,
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/app/my-page' ,
      name : 'My Page' ,
    } ,

この/appどこから来たのかというと、アプリをレンダリングするsrc/App.js内の次の行から来ています。

 < Route path = "/app" component = { Layout } />

---

このプロジェクトは、Create React App を使用してブートストラップされました。

利用可能なスクリプト

プロジェクト ディレクトリでは、次を実行できます。

npm start

アプリを開発モードで実行します。
http://localhost:3000 を開いてブラウザで表示します。

編集を行うとページがリロードされます。
コンソールには lint エラーも表示されます。

npm test

インタラクティブウォッチモードでテストランナーを起動します。
詳細については、テストの実行に関するセクションを参照してください。

npm run build

実稼働用のアプリをbuildフォルダーにビルドします。
React を実稼働モードに正しくバンドルし、最高のパフォーマンスが得られるようにビルドを最適化します。

ビルドは縮小され、ファイル名にはハッシュが含まれます。
アプリをデプロイする準備ができました。

詳細については、展開に関するセクションを参照してください。

npm run eject

注: これは一方向の操作です。一度ejectと、元に戻すことはできません。

ビルド ツールと構成の選択に満足できない場合は、いつでもejectことができます。このコマンドは、プロジェクトから単一のビルド依存関係を削除します。

代わりに、すべての構成ファイルと推移的な依存関係 (webpack、Babel、ESLint など) がプロジェクトに直接コピーされるため、それらを完全に制御できます。 ejectを除くすべてのコマンドは引き続き機能しますが、コピーされたスクリプトを指すため、調整することができます。この時点では、あなたは一人です。

eject使用する必要はありません。厳選された機能セットは小規模および中規模の展開に適しており、この機能を使用する義務を感じる必要はありません。ただし、準備ができたときにカスタマイズできなければ、このツールは役に立たないことは理解しています。

もっと詳しく知る

詳細については、Create React App のドキュメントをご覧ください。

React について学習するには、React のドキュメントを参照してください。

コード分​​割

このセクションはここに移動しました: https://facebook.github.io/create-react-app/docs/code-splitting

バンドルサイズの分析

このセクションはここに移動しました: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

プログレッシブ Web アプリの作成

このセクションはここに移動しました: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

高度な構成

このセクションはここに移動しました: https://facebook.github.io/create-react-app/docs/advanced-configuration

導入

このセクションはここに移動しました: https://facebook.github.io/create-react-app/docs/deployment

npm run build縮小に失敗する

このセクションはここに移動しました: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify