【PrimeFlex/PrimeReact/React】環境構築

PrimeFlexとは？

PrimeFlexは、レスポンシブなUIデザインを作成するための柔軟なグリッドシステムを提供するCSSフレームワークです。

PrimeFlexを使用することで、簡単かつ迅速に、美しいUIサイトを作成することができます。

環境構築

Node.js と npmのインストール

これはもう過去記事みてやってみてください👾省略

npx create-react-app my-app

このコマンドは、新しいReactアプリケーションを作成するために必要なファイルとディレクトリを自動的に生成します。

PrimeFlexのインストール

npm install primeflex

PrimeReactのインストール

npm install primereact primeicons

PrimeReactとPrimeFlexの設定

PrimeFlexとPrimeReactを使用するには、アプリケーションでそれらを設定する必要があります。以下の手順に従って、src/index.jsファイルにPrimeFlexとPrimeReactを設定します。

PrimeFlexのCSSファイルを読み込むために、src/index.jsファイルの先頭に以下のインポート文を追加します。

import 'primeflex/primeflex.css';

PrimeReactのCSSファイルとアイコンフォントを読み込むために、src/index.jsファイルの先頭に以下のインポート文を追加します。

import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

これで、ReactとPrimeFlexを使用したWebアプリケーションの環境がセットアップされました。
必要に応じて、これらを組み合わせてアプリケーションを開発することができます。