これらの2ライブラリとあなたの反応プロジェクトでブートストラップを統合する

著者によってNwose Lotanna
Webアプリを構築する方法の多くは、ほとんどの人は、簡単に足場にサポートの多くを持っている反応、Vue、および角度のような人気のJavaScriptフレームワークを使用して、ロジックに関連してベストプラクティスに従って、どのようにテンプレート、ファイル組織とコンポーネントの構築に関連付けられている.多くの開発者は、CSSとのハードの時間を持っているかはっきりと設計のための目を持っていない、CSSのフレームワークは、あなたのWebアプリで素晴らしいデザインを得ることを確認するために便利に来る.

ブートストラップとは

マークアップやテンプレートにロジックを追加するようにWebアプリケーションをスタイリングもすぐに時間をかけて進化しています.レイアウト、図形、相互作用、アニメーション、およびフレームワーク、前とポストのプロセッサ、方法論、およびcssでもタイポグラフィ.
Bootstrap 最も使用され、最も人気のある、そして間違いなく、現在最も先進的なCSSフレームワークです.これは、最も応答性、アクセス可能なモバイル最初、簡単に使用できるユーザーインターフェイスツールキットだけでなく、スタイルに応えるが、あなたのWebアプリのロジックにも.

なぜブートストラップを使うのか

ツールキットとしてブートストラップは、反応と互換性がありますので、これはブートストラップについてのすべての偉大なことを反応アプリにもたらされることを意味します.反応開発者のために、あなたの人生をより簡単にすることからあなたのプロジェクトAsidesでブートストラップを使う若干の理由が、あります:

ブートストラップのレイアウトは、私が見たことがある最も先進的であるが、敏感なもののうちの1つです、カスタマイズ可能なスクリーンのすべてのタイプにモバイルから始まって、デスクトップにタブレットに、スタイルは適応します.

ブートストラップは、最大のコミュニティの1つを持って、それはそれが最もユーザーを持って見て意味があります.これは、既存の他のCSSツールキットよりも多くのブートストラップリソースが存在することを意味します.また、非常に簡単に開始されます(詳細は後で).

最後に、ドキュメントは実用的な例やイラストを使用して簡単です.docsスタイルのブートストラップの使用は、現在、ドキュメント内のほとんどすべてのCSSフレームワークによって採用されました.
反応とブートストラップを使用して

あなたが確信している今、あなたは多くの方法であなたの反応プロジェクトにbootstrapをもたらすことができます:

NPMのようなパッケージマネージャを使ってCSSとJSファイルのコンパイルされたバージョンをインストールします.

あなたの反応プロジェクトのソースファイルにブートストラップをインストールしますthe npm package :

    npm install bootstrap@next

次に、以下の行を追加することができます

    import bootstrap from 'bootstrap' 

ブートストラップを使用するコンポーネントのインポート文で.

プラグアンドプレイCDNを使用してください
ダウンロードをスキップすることができますjsDelivr ブートストラップのコンパイルされたCSSとJSのキャッシュされたバージョンをプロジェクトに取得します.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

あなたが我々のJSの前にPopperを加えたいならば、CDNを通して、代わりにこれを使ってください.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

第三者図書館の利用
そこには、両方の最高を活用するような方法で、ブートストラップと反応を置く存在するライブラリがあります.我々がこのポストに集中する2つは、そうですReactstrap and React Bootstrap .

どのような再生ストラップですか？

Githubのプロジェクトで9000以上の星で.Reactstrap ブートストラップ4のステートレスでシンプルなコンポーネントのサポートを提供します.それは良いドキュメントを使用して簡単ですが、その方法は学習曲線です.これは、ブートストラップを持つjQueryやJavscriptだけではなく、React popper パッケージ.
始める
あなたが始めるためにする必要があるのは、このようにあなたの反応プロジェクトにReactTrackをインストールすることです.

    npm install --save reactstrap react react-dom

使用方法
今すぐあなたが作成した任意の新しいコンポーネントで、ReactStrapをインストールしているので、AcactStrapをインポートし、それは箱から右の作品!以下のボタン実装を参照ください.

    import React from 'react';
    import { Button } from 'reactstrap';

    const Example = (props) => {
      return (
        <div>
          <Button color="primary">primary</Button>{' '}
          <Button color="secondary">secondary</Button>{' '}
          <Button color="success">success</Button>{' '}
          <Button color="info">info</Button>{' '}
          <Button color="warning">warning</Button>{' '}
          <Button color="danger">danger</Button>{' '}
          <Button color="link">link</Button>
        </div>
      );
    }

    export default Example;

reactstrapを使用しているときに知っておく必要があるいくつかの他のこと
1 )あなたのコンテンツはprops.children 名前付き小道具を使用するのではなく、コンポーネントを渡す.ここでは、両方のテクニックがToolTipコンポーネントのToolTipコンテンツを使用してどのように見えるかのサンプルです.

    // Content passed in via props
    const Example = (props) => {
      return (
        <p>This is a tooltip <TooltipTrigger `tooltip={props.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>
      );
    }

2)このライブラリの属性は、状態を通過する便利な修飾子クラスを適用するために使用され、高度な機能を有効にする(popperjsのような)、または自動的に非コンテンツベースの要素が含まれます.
以下に使用する属性の一覧を示します.

isOpen - current state for items like dropdown, popover, tooltip
toggle - callback for toggling isOpen in the controlling component
color - applies color classes, ex: <Button color="danger"/>
size for controlling size classes. ex: <Button size="sm"/>
tag - customize the component output by passing in an element name or Component

「isopen」と「toggle」属性がどのようにドロップダウンコンポーネントのチェックをするのに使用されるかを見てください.

    import React, { useState } from 'react';
    import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

    const Example = (props) => {
      const [dropdownOpen, setDropdownOpen] = useState(false);

      const toggle = () => setDropdownOpen(prevState => !prevState);

      return (
        <Dropdown isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem>Some Action</DropdownItem>
            <DropdownItem text>Dropdown Item Text</DropdownItem>
            <DropdownItem disabled>Action (disabled)</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Foo Action</DropdownItem>
            <DropdownItem>Bar Action</DropdownItem>
            <DropdownItem>Quo Action</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );
    }

反応ブートストラップとは何か

React bootstrap あなたが快適なブートストラップ環境で(状態で)反応することができるライブラリです.私の意見では、反応ブートストラップでは、ブートストラップ内の反応の力を伸ばすことができます.すべてのブートストラップのコンポーネントが再想像された、クラスは現在、カスタムのオプションを簡単にピックアップすることができます反応でテンプレートですwith the docs .
ドキュメントはブートストラップのような方法で設計され、これは親しみの感覚に役立ちます.また、ブートストラップ自体を使用するよりもはるかに少ないコードです.
始める
reactstrapと同じように、以下のコマンドでパッケージマネージャにライブラリをインストールします.

    npm install react-bootstrap bootstrap

インストール中にブートストラップパッケージが必要です.
使用方法
コンポーネントを使用するには、特定のコンポーネントを新しい反応コンポーネントファイル内にインポートします.これはreactstrapと同じようにボタンの実装です.

    import React from 'react';
    import Button from 'react-bootstrap/Button';

    const Example = (props) => {
      return (
        <>
      <div className="mb-2">
        <Button variant="primary" size="lg">
          Large button
        </Button>{' '}
        <Button variant="secondary" size="lg">
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small button
        </Button>{' '}
        <Button variant="secondary" size="sm">
          Small button
        </Button>
      </div>
    </>
      );
    }

    export default Example;

すぐにこれは反応コンポーネントのテンプレートのセクションに入ると、サポートもシームレスですが、最新の反応版がサポートされていることを伝えることができます.このボタンの例は、フラグメントとして見ることができます.

どちらを使いましょうか。

つのライブラリを使用するように最適ですし、それらのいずれかを選択することができますが、私の提案は次のとおりです

あなたが初心者レベルから来ていて、すでにbootstrap(またはどんなCSSフレームワーク)を使用しているあなたの道を知っているならば、ReactStrapを使ってください.

あなたがファイルとバンドルサイズについて心配しているならば、ReactTrackを使用してください、あなたは、ReactTractstrapがサイズでより小さくなるように、反応ブートストラップでブートストラップを輸入します.

あなたが重い反応背景から来ていて、ブートストラップを前に使っていないならば、反応ブートストラップを使ってください、それはこの人口統計の人々のためにより快適に感じます.

あなたが反応しているテンプレートで使用して、状態を操っているならば、反応ブートストラップを使ってください.

生産反応アプリの可観測性

あなたが反動者と一緒に行ったり、ブートストラップを反応するかどうか、真実は、生産におけるデバッグ反応アプリは挑戦的であり、時間がかかることがあります.Alayayerは、フロントエンド監視ツールは、すべてのユーザーが行う再生し、どのようにあなたのアプリが動作し、すべての問題のレンダリングを示しています.それはあなたのユーザーの肩を見ながら、ブラウザの検査官を開いているようなものだ.

asayerはすぐに問題を再現することによって根本的な原因を得るために役立ちます.また、ページの負荷時間、メモリの消費量と遅いネットワーク要求などのキーメトリックをキャプチャすることにより、フロントエンドのパフォーマンスを監視します.
ASayerでは、最新のフロントエンドのアプリをデバッグ楽しむことができますStart monitoring your web app for free .

結論

今、我々は我々の反応プロジェクトのブートストラップを使用するために行ってきた、我々はなぜこれがあなたに興味を持っている可能性がありますし、それについてのすべての可能な方法を見てきました.我々はまた、2つの反応とブートストラップライブラリを見て、いずれかの背景とスキルレベルに最適な1つの時間に取った.その2人のうちどちらが試みたのですか.