npm start까지 마친 상태
+) 리액트6 정보는 2021년 이후 것으로!
깃이그노어 살펴보기
read.me 살펴보기
1. 부트스트랩 설치하기
1-1. 터미널에서 설치
npm install react-bootstrap bootstrap
1-2. App.js에 임포트!
import 'bootstrap/dist/css/bootstrap.css';
부트스트랩 폴더가 생성됨
1-3. 커스텀 CSS 테스트
2. 상단 네비 리액트 x 부트스트랩 제작
자소서 페이지 상단 네비 리액트 x 부트스트랩 제작
(CSS 커스터마이징 최대한 줄이고, 거진 부트스트랩으로)
2-1. export 이해하기 (대표만 내보낸다!)
2-1-1) 방법 1
export default WhiteApp
export default ActiveApp
2-1-2) 방법 2
export default WhiteApp ( 얘가 대표! )
ㄴindex.js 확인하면, App이라는 명함들고 돌아다님. 대표는 자유롭다!
export ActiveApp ( 근데 나도 나갈래!! )
{ ActiveApp } 대표 아닌 애는 이름표 정.확.히 차고 다녀야 함!
&
컴포넌트 연결해줌
2-2. 상단 네비 채우기
2-3. OnClick 함수 연결하기
onClick={ 화살표함수 } 너를 클릭하면 실행(function)되라!
매개인자
- (e) : 발생한 이벤트. 지금은 onClick
- { alert( '명령' ) } : 복잡한 일ㄴㄴ! 아주 작고 간단한 일을 적어
3. 오늘의 실습
- 리액트로 Header & Footer 컴퍼넌트 생성 ( index.js에 임포트 )
- Header 컴퍼넌트에 로고와 네비게이션 넣기
- 내 커스터마이징 스타일 연결하기 ( 폰트사이즈, 색상 등 공통클래스 제작 )
ㄴ>폰트CDN은 index.html head에 넣고 / SEO최적화 - 모든 소스는 src 폴더에 생성하고 연결하기 (초보니까)
- 깃허브 세팅하고 업로드하기
3-1. 리액트로 Header & Footer 컴퍼넌트 생성
컴포넌트들, index.js에 임포트하는 방법
＋
부트스트랩, css 등은 index.js에 넣는다!
3-2. Header 컴퍼넌트에 로고와 네비게이션 넣기
3-3. 내 커스터마이징 스타일 연결하기
