React 사이드바 예 | React에서 사이드바 구성 요소를 만드는 방법

React Sidebar 구성 요소는 웹 페이지의 기본 콘텐츠 옆에 배치된 기본 및 보조 정보를 보관하는 반응형 확장 및 축소 가능한 컨테이너 영역입니다.

우리는 react-burger-menu라는 라이브러리를 사용하고 Material UI 라이브러리를 사용하여 사이드바 구성 요소도 만듭니다. 이 라이브러리는 React.js에서 사이드바 메뉴 구성 요소를 구축하는 데 도움이 됩니다. 우리는 일반 React.js로 빌드하기 위해 Redux를 사용하지 않습니다.

목차

• 1단계: React.js 설치
• 2단계: 사이드바 메뉴 만들기
• 3단계: App.js 파일 내에서 sidebar.js 파일을 가져옵니다.
• Material UI를 사용하여 React 사이드바 구성 요소 만들기
• Sidebar.js 구성 요소를 작성합니다.

1단계: React.js 설치

다음 명령을 입력하여 React.js를 설치합니다.

파이썬에서 파이는 무엇입니까

폴더 내부로 이동하여 VSCode 편집기에서 엽니다.

이제 설치 반응 버거 메뉴 다음 명령을 사용하여 라이브러리.

2단계: 사이드바 메뉴 만들기

이 사이드바 구성 요소에서 사이드바 안에 표시되는 항목 목록을 추가할 수 있습니다. 여기에서 우리는 반응 버거 메뉴 또한.

그래서 여기에서 우리는 미끄러지 다 react-burger 메뉴의 구성 요소 .

3단계: App.js 파일 내에서 sidebar.js 파일을 가져옵니다.

내부에 다음 코드를 작성하십시오. App.js 파일.

이제 마지막으로 CSS 코드를 App.css 파일.

파일을 저장한 후 터미널로 이동하여 React 개발 서버를 시작합니다.

따라서 이 URL에서: http://로컬호스트:3000/. 당신은 우리의 React.js 프로젝트가 시작되어 실행 중입니다.

다양한 애니메이션을 시도하려면 가져온 애니메이션을 변경하기만 하면 됩니다. 미끄러지 다 우리의 꼭대기에서 sidebar.js 다음과 같은 다른 애니메이션에 파일을 거품 . 다른 애니메이션을 사용하려면 슬라이드를 다음으로 대체할 수 있습니다.

• 미끄러지 다
• 스택
• 탄력있는
• 거품
• 푸시
• pushRotate
• scaleDown
• 스케일 회전
• 떨어지다
• 드러내다

속성

일부 애니메이션은 페이지에 다른 특정 요소가 있어야 합니다.

뷰 드래그 앤 드롭

페이지 래퍼

페이지의 나머지 콘텐츠를 감싸는 요소입니다.

외부 용기

메뉴 구성 요소를 포함하여 모든 것을 포함하는 요소입니다.

Material UI를 사용하여 React 사이드바 구성 요소 만들기

Material UI를 사용하여 React에서 간단한 사이드바 구성 요소를 만들어 봅시다.

먼저 Yarn 또는 NPM을 사용하여 다음 재료 패키지를 설치합니다.

일단 설치되면 사이드바가 구축될 사용자 인터페이스의 기본 구조로 생각해야 합니다.

해결 방법은 정렬되지 않은 목록(

) 목록 항목을 렌더링하는 요소(
• ).

  List 구성 요소는 기본적으로 ul 요소이고 ListItem 구성 요소는 기본적으로 li이므로 @material-ui/core 라이브러리에서 List 및 ListItem을 가져올 것입니다.

  반응 드래그 가능

  사이드바에 있는 몇 가지 항목을 하드코딩하여 자신감을 높이는 방법을 시각화해 보겠습니다. 때로는 약간의 추가 자신감이 생산성 향상에 도움이 될 수 있습니다.

  이제 내부에 폴더를 생성합니다. 소스 라는 폴더 구성 요소.

  다음 단계는 내부에 다음 코드를 작성하는 것입니다. src >> 구성 요소 >> Sidebar.js 파일.

  해당 파일 안에 다음 코드를 작성합니다.

  아이오스트 구매처

  |_+_|

  이제 내부에 구성 요소를 가져옵니다. src >> App.js 파일.

  |_+_|

  이제 사이드바에 표시할 항목을 추가합니다. 다섯 가지 요소를 살펴보겠습니다.

  내부에 다음 코드를 작성하십시오. App.js 파일.

  |_+_|

  사이드바가 너무 크다는 것을 눈치채셨을 것입니다! *사이드*바는 일반적으로 화면의 한쪽을 차지합니다. 그래서 우리가 할 일은 폭을 적당한 크기로 줄이는 것입니다. 계속해서 최대 너비를 200px로 설정합니다. 따라서 List 구성 요소를 감싸는 div 요소를 만들 것입니다.

  Azure 리소스 그룹 이름 바꾸기

  
  List 구성 요소에 스타일을 직접 적용하는 대신 다른 div 요소를 생성합니다. List가 너비 크기를 담당하게 하고 싶지 않기 때문입니다.

  이렇게 하면 나중에 목록을 재사용 가능한 사이드바 구성 요소로 추상화하여 상위 요소의 크기에 따라 모든 크기에 적용할 수 있습니다.

  따라서 내부에 하나의 CSS 클래스를 추가하십시오. App.css 파일.

  |_+_|

  Material-UI는 CSS-in-JS 접근 방식을 사용하는 CSS 스타일 지정 메커니즘을 사용합니다. 그러나 이 기사에서는 불필요한 복잡성을 유지하기 위해 일반 CSS를 고수할 것입니다.

  Sidebar.js 구성 요소를 작성합니다.

  자, 이제 마지막 단계는 다음 코드를 내부에 추가하는 것입니다. 사이드바.js 파일 .

  |_+_|

  파일을 저장하고 출력을 확인합니다.

  React 사이드바 구성 요소 완료

  행복한 코딩!!!