React - 쇼핑몰만들기 (1)

구현하는 기능과 배우는 컨셉

✔ yarn & React Boostrap 라이브러리 설치 및 적용
✔ Navbar, Jumbotron, item card layout

👉 yarn & React Boostrap 라이브러리 설치 및 적용

◾ yarn은 npm이나 npx를 대체해서 보다 빠른 라이브러리 설치속도와 안정성이 있다.
◾ 이제 npm run start 대신 yarn start로 시작하자.
◾ 구글에 yarn을 검색해서 설치하면된다.
◾ yarn add react-boostrap boostrap으로 react boostrap 설치
◾ css cdn 방식으로 하므로 index.html파일에 링크를 복사 붙여놓는다.
◾ boostrap 준비끝. 잘되었는지 테스트한번 해보자. documentation 탭으로 이동해서 button이 잘나오는 지 확인해본다.

Navbar Jumbotron, item card layout

◾ react boostrap 공식사이트에서 Component 메뉴로 들어가서 navbar라고 검색하면 예제들이보인다.
◾ 나머지 jumbotron, item card도 이와같이 마음에드느 예제들을 보고 복사붙이면된다.
◾ jumbotron에서 background-image를 사용해서 배경이미지를 넣자
◾ 참고로 src파일안에 있는 image만 사용가능하다.
◾ css로 마무리해준다.

<div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="" width="100%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="" width="100%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="" width="100%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>

◾ 상품 레이아웃도 boostrap으로 만든다.