reactstrap
v9.2.3
ブートストラップのステートレス反応コンポーネント5。
Bootstrap 4を使用している場合は、ReactStrap V8を使用する必要があります
Create-React-App手順に従って開始してから、Bootstrapの追加のReactStrapバージョンに従います。
npx create-react-app my-app
cd my-app/
npm start
または、npx（node> = 6およびnpm> = 5.2）が利用できない場合
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
次に、http：// localhost：3000/を開き、アプリを表示します。アプリの初期構造はセットアップです。次に、ReactStrapとBootstrapを追加しましょう。
NPMからReactStrapとBootstrapをインストールします。 ReactStrapにはBootstrap CSSが含まれていないため、これもインストールする必要があります。
npm i bootstrap
npm i reactstrap react react-dom
src/index.jsファイルにブートストラップCSSをインポートします：
import 'bootstrap/dist/css/bootstrap.css' ; src/App.jsファイルまたはカスタムコンポーネントファイル内の必要なReactSTRAPコンポーネントをインポートします。
import { Button } from 'reactstrap' ;これで、レンダリング方法で定義されているコンポーネント階層内のインポートされたReactSTRAPコンポーネントを使用する準備ができました。以下は、ReactStrapを使用してApp.js例です。
これらのライブラリはReactStrapにバンドルされておらず、実行時に必要です。
このライブラリには、構成と制御を優先するReact Bootstrapコンポーネントが含まれています。ライブラリは、jQueryまたはBootstrap JavaScriptに依存しません。ただし、React-Popperを介したPoppers.jsは、ツールチップ、ポップオーバー、自動フリッピングドロップダウンなどのコンテンツの高度なポジショニングに依存しています。
このライブラリを最大限に活用するために、理解すべきコア概念がいくつかあります。
コンテンツは、コンポーネントを渡すために名前の小道具を使用するのではなく、Props.childrenを介して構成されることが期待されています。
// Content passed in via props
const Example = ( props ) => {
return (
< p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
) ;
}
// Content passed in as children (Preferred)
const PreferredExample = ( props ) => {
return (
< p >
This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
< Tooltip target = "TooltipExample" >
< TooltipContent />
</ Tooltip >
</ p >
) ;
}このライブラリの属性は、状態を通過したり、修飾子クラスを便利に適用したり、高度な機能を有効にしたり（テザーなど）、非コンテンツベースの要素を自動的に含めるために使用されます。
例：
isOpenドロップダウン、ポップオーバー、ツールチップなどのアイテムの現在の状態toggle - 制御コンポーネントにisOpenを切り替えるためのコールバックcolor - 色のクラスを適用します、例： <Button color="danger"/>size - サイズクラスを制御するため。例： <Button size="sm"/>tag - 要素名またはコンポーネントを渡すことにより、コンポーネントの出力をカスタマイズしますvisually-hiddenコンテンツで可能な場合https://reactstrap.github.io
ドキュメント検索は、AlgoliaのDocsearchを搭載しています。
実験できるCodesandboxのすぐに使用できる例を以下に示します。
https://github.com/reatstrap/code-sandbox-examples
依存関係をインストールします：
yarn installhttp：// localhost：8080で例を実行してください。
yarn startテストとカバレッジレポートを実行します：
yarn coverテストを見る：
yarn test リリースブランチ/バージョン/ノートは、リリースGitHubアクションによって自動的に作成および維持されます。リリースを公開する準備ができたら、リリースブランチをマージするだけです。リリースが作成され、新しいパッケージが公開され、更新されたドキュメントはhttps://reactstrap.github.io/に展開されます。
reactstrapを使用した組織とプロジェクト
reactstrapの上に構築されたステートレスデータグリッドです。reactstrapの上に構築されたチャート。Formikを使用してreactstrap入力コンポーネントをシームレスに統合させるこのリストに追加するためにPRを提出してください！
reactstrapの上に構築された再利用可能なコンポーネントの構築、文書化、公開をお探しですか？ https://github.com/reatstrap/component-templateをフォーキングして、プロジェクトをキックスタートしてください。
