psmuler
commented
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を用います。