Open psmuler opened 1 year ago
Shards Dashboard Lite Reactをプロジェクトに組み込んで使用する手順を説明します。
最初に、プロジェクトのルートディレクトリで、Shards Dashboard Lite ReactのZIPファイルをダウンロードして解凍します。ダウンロードはこちらから行えます。解凍後、src
ディレクトリ内にshards-dashboard
ディレクトリが作成されます。
次に、プロジェクトのルートディレクトリで以下のコマンドを実行し、必要なパッケージをインストールします。
npm install --save bootstrap@4.6.0
npm install --save shards-ui@2.0.2
src
ディレクトリにあるindex.js
ファイルを開き、以下の2行を追加して、Shards Dashboard Lite ReactのCSSをインポートします。import 'bootstrap/dist/css/bootstrap.min.css';
import 'shards-ui/dist/css/shards.min.css';
この時点で、Shards Dashboard Lite Reactのコンポーネントがプロジェクトで利用できるようになります。解凍したshards-dashboard
ディレクトリ内のコンポーネントを必要に応じてインポートし、既存のコンポーネントを置き換えるか、新しいコンポーネントを追加してカスタマイズします。
必要に応じて、プロジェクトのpublic
ディレクトリにあるfavicon.ico
ファイルやmanifest.json
ファイルを、shards-dashboard/public
ディレクトリ内の対応するファイルで置き換えます。これにより、Shards Dashboard Liteのアイコンやアプリケーション名が適用されます。
これで、Shards Dashboard Lite Reactがプロジェクトに組み込まれ、カスタマイズが可能になりました。必要に応じて、Shards Dashboard Lite Reactのコンポーネントやスタイルを使用して、アプリケーションの見た目を調整してください。
boot strapを使ったカードによる表現を再チャレンジする。 ------old message オッケーです。次のタスクである、「react bootstrapの繋ぎこみ」にいきましょう!react bootstrapとしてShards-Dashboard-Lite-React-1.0.0を用います。