여러 번 내 프로젝트에 사용할 좋은 예제 또는 회전식 상용구를 검색합니다. 오늘은 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에서 사용하지 않는 코드를 제거한 다음 스타일 구성 요소가 올바르게 설치되었는지 테스트 해 보겠습니다.

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

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

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

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

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

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

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

import { rgb } from 'polished' 

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

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

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

저장소에 연결

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

유용한 링크 :

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