[react]平和なショッピングモールレイアウト設計時間

今からBootstrapを本格的に利用します.

以前のように、コードをそのまま持ってきて、間違ったところへ...
コンポーネントとも呼ばれ、react-strapモジュールからインポートする必要があります
すべてインポートできますが、メモリを節約し、きれいなcssをクリーンアップするために

=>でもこれじゃclassだけは取れないのか…?
Jumbotronというコンポーネントを初めて聞きました.
重要じゃないけど.彼はそう呼んだ
=>Bootstrap 5.0以上はありません.だから自分で形を作った.

reactイメージの読み込み

1で割る.src 2を入れます.共通

1.srcを入れる

srcに保存されているファイルの名前を変更して圧縮
そして、次のようにclassに入れるように気軽に使えます
画像をclassに入れる方法があります.
現在進行中のプロジェクト

2.公開

reactに限定された特殊な構文が必要です
publicのファイルは絶対パス/ファイル名です.jpgのようにフルパスを使用する必要があります
でも公共の場所にいると自動的に掴んで置いた方が便利です
=>パスを変数として保存できます

ブートストラップの書き込み方法

React-bootstrap
React-Sbootstrapをインストールし、要素を貼り付け、必要なコンポーネントをインポートすればいいです.

元のBootstrap
ポスターで言いました.

linkがどうしても入れたら
元のブート(クラス名を使用)
可能性もある!
=>これがないため、プロジェクトにクラス名が追加されているため、使用できません

3つの反応型

    <div className="container">
      <div className="row">
        <div className="col-md-4">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/>
          <h4>상품명</h4>
          <p>상품설명 & 가격</p>
        </div>
        <div className="col-md-4">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/>
          <h4>상품명</h4>
          <p>상품설명 & 가격</p>
        </div>
        <div className="col-md-4">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/>
          <h4>상품명</h4>
          <p>상품설명 & 가격</p>
        </div>
      </div>
    </div>

=>この公式を暗記しましょう!!
=>具体的な原因は不明ですがaltがないとエラーが発生します.
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
=>今は時間がないので、まず...ここで終わります