티스토리 뷰
목차
2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 0. 프로젝트 준비
2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 1. navbar topbar
2021.11.02 - [REACT/Admin Dashboard - project #1] - React Admin - 2. side bar
React Admin - 3. Home page
topbar 와 sidebar 가 준비되었으니 컨텐츠가 들어가는 페이지를 만들 예정이다.
1. home page 만들기
페이지를 저장할 pages 폴더와 Home.jsx / home.css 를 생성한다.
src > pages > home 폴더 생성 그리고 home 폴더에 Home.jsx, home.css 를 생성한다.
그리고 Home.jsx 에 함수형 컨포넌트를 생성한다.
다음으로 App.js 에서 지금 생성한 Home.jsx 가 잘 동작하는지 확인한다.
이제 화면을 확인해보면, home 페이지가 보인다. 하지만 전체적인 배치가 처음 원했던 것과는 좀 다른 모습을 하고 있다. 이를 수정하기 위해서 Home 컨포넌트에도 스타일을 적용해 주어야 한다.
이전 코드에서 others 에 flex: 4 를 적용했었는데, 이 부분을 home 에 적용해 주어야 한다.
여기까지 컨텐츠가 들어가는 페이지를 생성하였다. 다음은 새로운 컨포넌트를 만들어어 home page 의 내용을 채워볼 예정이다.
끝.
목차
2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 0. 프로젝트 준비
2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 1. navbar topbar
2021.11.02 - [REACT/Admin Dashboard - project #1] - React Admin - 2. side bar
'REACT > Admin Dashboard - project #1' 카테고리의 다른 글
React Admin - 5. Chart 컴포넌트 만들기 (0) | 2021.11.11 |
---|---|
React Admin - 4. featured info 컨포넌트 만들기 (0) | 2021.11.11 |
React Admin - 2. side bar (0) | 2021.11.02 |
React Admin - 1. navbar topbar (0) | 2021.10.24 |
React Admin - 0. 프로젝트 준비 (1) | 2021.10.24 |
- Total
- Today
- Yesterday
- python slack
- django
- channel oauth
- df 명령어
- python message
- Python
- slack api
- 프로젝트 생성
- angular
- 팀 소통
- 미밴드4
- 미밴드
- webhook
- HOME key
- cmd창
- http 요청
- 디스크 사용량
- 장고
- END key
- du 명령어
- win10
- venv
- 메시지 전송
- vscode
- HOME/END
- win7
- Karabiner-Elements
- amaztools
- 파이썬
- cmd실행
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |