분류 Reactjs

React 및 스타일이 지정된 구성 요소로 완벽한 회전식 탐색 메뉴를 만드는 방법

컨텐츠 정보

  • 조회 269 (작성일 )

본문

여러 번 내 프로젝트에 사용할 좋은 예제 또는 회전식 상용구를 검색합니다. 오늘은 React와 스타일이 적용된 컴포넌트로 완벽한 것을 만드는 방법을 보여 드리고자 합니다.


React에 대해 모르는 사람들을 위해. React는 웹 사이트와 관련된 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.


styled-components는 React 및 React Native 용 라이브러리로, CSS-in-JS라는 기술을 사용하여 JavaScript와 CSS의 혼합으로 작성된 애플리케이션에서 컴포넌트 수준 스타일을 사용할 수 있습니다. 간단한 버전으로 자바 스크립트 파일에 CSS를 작성할 수 있습니다.


CRA (create-react-app)로 깨끗한 프로젝트를 구축합시다.


npx create-react-app carousel-toturial 


NPX에 대한 정보는 여기에서 확인할 수 있습니다.


오늘 사용할 모든 라이브러리를 설치할 때입니다.


yarn add styled-components pure-react-carousel polished 


이제 스타일 구성 요소를 구성해야 합니다.


package.json 파일 끝에 아래 코드를 추가하십시오.


"resolutions": {
"styled-components": "^5"
} 


이제 코딩 할 준비가 되었습니다. 프로젝트를 정리하고 app.js에서 사용하지 않는 코드를 제거한 다음 스타일 구성 요소가 올바르게 설치되었는지 테스트 해 보겠습니다.


Image for post 


이제 pure-react-carousel에서 필요한 모든 것을 가져 오겠습니다.


Image for post 


이제 캐 러셀을 래핑하고 SliderWrapper라고 하는 div가 필요합니다.


Image for post 


회전식 이미지를 찾아야 합니다. 인터넷에서 모든 이미지를 선택할 수 있지만 이미지의 해상도가 동일한 지 확인합니다. 예를 들어 이 해상도를 1000 * 500으로 사용하겠습니다.


Image for post 


이미지를 배경으로 렌더링 하려면 이미지 스타일 구성 요소가 필요합니다. 파일에 아래 코드를 추가하십시오.


Image for post 


맨 위에서 pure-react-carousel에서 일부 구성 요소를 가져와야 한다는 것을 기억하십니까?


Image for post 


지금까지 이런 호 레이가 있어야 해


Image for post 


먼저 이와 같이 세련된 라이브러리에서 RGB를 가져옵니다.


import { rgb } from 'polished' 


Image for post 


래퍼 또는 div가 필요하도록 버튼을 캐 러셀 중앙에 배치해야 하며 이를 Nav라고 부릅니다.


StyledComponent의 장점 중 하나는 공유 스타일을 작성할 수 있는 기능을 제공하는 것입니다. 여기서는 sharedStyle이라고 부르고 다음과 뒤로 버튼을 만들고 공유 스타일을 전달합니다.


마지막 터치는 아래 이미지와 같이 해당 코드를 앱에 추가하는 것입니다.


Image for post 


Image for post 


저장소에 연결


https://github.com/prince1456/Medium-slideshow


유용한 링크 :

  1. create-react-app
  2. styled-components
  3. pure-react-carousel