[React Bootstrap] Cards を表示してみる | 心を無にして始める React

2021-10-192022-09-02

今回は、Card コンポーネントを表示します。

準備

まだ components フォルダがなければ作ります。

src を右クリックして New Folder 。

components と入力してフォルダを作ります。

今回は、components フォルダに Card のコンポーネントを作って、表示してみます。

公式のドキュメントはここ。

https://react-bootstrap.github.io/components/cards/

Card コンポーネントをつくる

component フォルダに Card.js を作ります。

Card.js を心を無にして編集してみます。

import React from 'react';
import { Card as BootstrapCard } from 'react-bootstrap';

function Card(props) {
  const {
    imgSrc,
    title,
    text,
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapCard {...otherProps}>
      {
        imgSrc && (
          <BootstrapCard.Img variant="top" src={imgSrc} />
        )
      }
      <BootstrapCard.Body>
        {
          title && (
            <BootstrapCard.Title>
              {title}
            </BootstrapCard.Title>
          )
        }
        {
          text && (
            <BootstrapCard.Text>
              {text}
            </BootstrapCard.Text>
          )
        }
        {children}
      </BootstrapCard.Body>
    </BootstrapCard>
  )
}

export default Card;

プロジェクトでは、コンポーネントを統一したデザインで利用することが多いです。

そのため、（React Bootstrap のコンポーネントをその場その場でカスタマイズしながら使うよりも、）プロジェクトでコンポーネントにしたものを使うほうが、変更をお手軽に漏れなくできることが多いです。

Card コンポーネントを表示する

それでは、 App.js を編集して Card コンポーネントを表示します。

import './App.css';
import Card from './components/Card';
import {
  Container,
  Row,
  Col,
} from 'react-bootstrap';

function App() {
  return (
    <div className="m-5">
      <Container>
        <Row sm={4}>
          <Col>
            <Card
              imgSrc="https://placehold.jp/256x256.png"
              title="タイトル"
              text="テキストてきすとtextテキストてきすとtextテキストてきすとtext"
            />
          </Col>
          <Col>
            <Card
              imgSrc="https://placehold.jp/256x256.png"
              title="タイトル"
              text="テキストてきすとtextテキストてきすとtextテキストてきすとtext"
            />
          </Col>
        </Row>
      </Container>
    </div >
  );
}

export default App;

画面を確認してみます。

はい、できました。