- 프로젝트 설치가 오래걸린다면 이번엔 yarn 이라는걸 이용해봅시다
yarn이 뭐하는 애냐면 npm이나 npx를 대체해서 이용할 수 있게 도와주는 친구
일단 설치해놓으면 npx create-react-app 어쩌구 하실 때 자동으로 yarn이 구동되어 빨라집니다.
누군가가 npm install 어쩌구 하라고 하면 그거 대신 yarn add 어쩌구 라고 사용하시면 더 빠르게 설치할 수 있으며
npm run start 로 미리보기 띄울 때도 yarn start 이걸로 대체할 수 있습니다.
리액트 설치 명령어
npx create-react-app shop
: shop이라는 하위폴더 생덩됨
App.js에 header부분 다지우고 div만 남겨두고 코딩 시작
터미널에 yarn start눌러서 미리보기 띄워보자
CSS 쌩코딩 귀찮으니 Bootstrap 라이브러리 설치 후 이용.
Bootstrap 홈피의 예제코드만 복붙하면 예븐 UI들을 쉽게 생성가능
Bootstrap이 원조 라이브러리고, 리액트에 변형한 React Bootstrap을 설치
React-bootstrap 설치하기
터미널에 npm install react-bootstrap bootstrap
또는 yarn add react-bootstrap bootstrap
이제 package.json에서 bootstrap을 확인할 수 있음
Bootstrap 설치가 잘 되었는지 테스트해보려면
- bootstrap 홈피의 Documentation 탭으로 들어간다.
- button을 한번 검색해봅시다
- App.js에 복붙
- 미리보기에서 버튼이 예쁘게 뜸
이제 다른것들도 활용해보자
Front-Dev