React Admin - 3. Home page

티스토리 뷰

REACT/Admin Dashboard - project #1

브라이언77 2021. 11. 3. 17:51

topbar 와 sidebar 가 준비되었으니 컨텐츠가 들어가는 페이지를 만들 예정이다.

페이지를 저장할 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 의 내용을 채워볼 예정이다.

끝.

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