[react]第5週-react-strap


react-strapは?


ブートストラップ(bootstrap)は、オープンソースフロントエンドフレームワークです.Webサイトの作成を容易にするために、CSSやJavascriptでさまざまなレイアウト、ボタン、入力ウィンドウなどのデザインが提供されています.
反応器におけるガイドバーの使用経路はreact−strapとreactstrapの2種類あり,本研究ではreact−strapを用いた.
react-strap その利点は,ガイドバーを応答スタイルの素子に圧縮し,コードを簡単にすることである.

スタート


react-strapパッケージのインストール

npm install react-bootstrap bootstrap

cssスタイルシートの追加


最上位レベルのルートファイルsrc/index.jsまたはApp.jsファイルにコードを追加すると、ガイドバーのスタイルが適用されます.
import "bootstrap/dist/css/bootstrap.min.css";

複数の構成部品の使用


正式な書類には、ボタン、alert、badge、navbarなどの様々なコンポーネントの使用例が見られる.たとえば、Buttonを追加する場合は、下の手順に従います.

必要な構成部品の読み込み


ボタンを配置する構成部品ファイルの上部にコードを追加します.
import Button from "react-bootstrap/Button";
// 또는
import { Button } from "react-bootstrap";

構成部品の操作