react-bootstrapで簡単なスライドを表示させよう

需要があるかわかりませんが記事を書く練習がてらに書きます。

#スライドの表示
react-bootstrapでのスライドの表示は<Carousel></Carousel>内に書くことによって作れます。

まずはreturn内に以下のコードを書きました

<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
        src="holder.js/800x400?text=React&bg=373940"
        alt="First slide"
    />
    <Carousel.Caption>
      <h3>Reactを使用しました</h3>
      <p>ReactとはJavaScriptのライブラリです</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

まず上から順に説明していくと、<Carousel.Item>で一枚のスライドを表示することができ、３枚スライドを用意したいなら３つ用意すれば良いわけです。

<img>で画像も使用できますが、このholder.jsというライブラリを使用することによって簡単に文字を入れたスライドを作ることが可能になります。

holder.jsは以下のコードで読み込みましょう。

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.js"></script>

<Carousel.Caption>の中は説明文を書くことができます。この中に説明したいことを記述しましょう。

以上です、練習がてらに書いたので説明不足と下手さは見逃してください。