빠른 팁 : React에서 비디오 플레이어 구성 요소를 구축하십시오

재사용 가능한 반응 비디오 재생 구성 요소

를 빌드하십시오 이 기사에서는 Vimeo, YouTube 및 Dailymotion의 비디오 목록을 통해 반복 할 수있는 React 비디오 구성 요소를 단계별로 만들어줍니다. 이 구성 요소는 다른 비디오 제공 업체를 지원하기 위해 쉽게 확장 할 수 있습니다.

우리는 를 개발 환경으로 사용하여 핫 재 장전을 지원하므로 각 코드 변경 후 페이지를 새로 고치지 않고 브라우저에서 즉시 구성 요소 빌드 결과를 볼 수 있습니다. 이 비디오 구성 요소는 자체 상태가 없으므로 재사용 가능하고 예측할 수 있으므로 동일한 입력이 항상 동일한 출력을 생성합니다. 이 기사는 또한 를 사용하는 필수 소품 정의, 소품 해체, 확장 연산자를 사용하여 구성 요소를보다 사용자 정의 할 수 있고 역동적으로 만드는 것을 포함하여 React의 구성 요소를 구축하기위한 모범 사례를 논의 할 것입니다. 소스 코드 및 데모는 Github 저장소에서 찾을 수 있습니다 (Link Out).

개발 환경 준비

먼저, git을 설치했다고 가정하면 저장소 클론 :

프로젝트 디렉토리로 이동하여 종속성을 설치하십시오. react-hot-boilerplate 모든 것이 잘 진행되면 콘솔이

를 표시합니다. Webpack은 파일을 처리하는 데 시간이 걸립니다. 완료되면 브라우저에는 "Hello, World"가 표시됩니다.

propTypes 구성 요소 생성

구성 요소 파일 생성 : 만들기 디렉토리에서 초기 코드를 추가하십시오 : .

에서 비디오 목록을 만듭니다.

git clone https://github.com/gaearon/react-hot-boilerplate

complete 구성 요소 :

cd react-hot-boilerplate
npm install
npm install --save query-string
npm start

라이브러리를 사용하여 비디오 URL을 구문 분석하고 : 로 비디오를 렌더링합니다.

Listening at localhost:3000 이제 실행중인 비디오 구성 요소를 에서 볼 수 있어야합니다.

요약

이 기사에서는 재사용 가능하고 예측 가능하며 쉽게 확장 가능한 반응 비디오 구성 요소를 만드는 방법을 보여줍니다. 우리는이 구성 요소를 구축하기 위해 와 모범 사례를 사용합니다.

(FAQS 섹션은 여기에 포함되어야합니다. 내용은 원본 텍스트와 일치하지만 질문과 답변을 더 명확한 형식으로 제시하는 것과 같이 필요에 따라 약간 다시 작성하고 연마 할 수 있습니다)

.

위 내용은 빠른 팁 : React에서 비디오 플레이어 구성 요소를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!