Совет: создайте компонент видеопроигрывателя в React

Эта статья была рецензирована Крейгом Билнером . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

В этом кратком совете мы собираемся создать компонент видео React. Это позволит вам определить список видео и позволить вашим посетителям переключаться между ними. Компонент будет поддерживать Vimeo, YouTube и Dailymotion, но вы можете легко расширить его для поддержки других поставщиков видео.

В качестве среды разработки мы будем использовать реактивную горячую котельную, которая включает горячую перезагрузку. Это означает, что мы можем построить наш компонент и сразу увидеть результаты в браузере, не обновляя страницу каждый раз, когда изменяется код.

Вы можете найти исходный код нашего репозитория GitHub , а также демонстрацию в нижней части статьи.

Начиная с Boilerplate

Мы начнем с настройки нашей рабочей среды, используя шаблон. Предполагая, что на вашей машине установлен git, давайте клонируем репозиторий, выполнив:

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

Это создаст в папке, в которой мы находимся, папку react-hot-boilerplate . Теперь перейдем к этой папке и установим зависимости, запустив:

 cd react-hot-boilerplate npm install 

Далее нам нужно установить строку запроса, которую мы будем использовать позже.

 npm install --save query-string 

Наконец, мы можем начать с:

 npm start 

Если все идет по плану, в приглашении появится сообщение Listening at localhost:3000 . Веб-пакет все равно должен будет обработать файлы, прежде чем сможет их обслуживать. После некоторой задержки в приглашении должна появиться последовательность операций, заканчивающаяся webpack: bundle is now VALID , что означает, что все готово к работе.

Перейдя по адресу http: // localhost: 3000 / в браузере, вы сможете увидеть «Привет, мир». отображается.

Создание компонента

Первое, что нужно сделать, это создать файл компонента в src/social-video.js . На данный момент будет достаточно минимального кода, необходимого для работы компонента, и некоторого фиктивного содержимого рендеринга.

 import React, {Component} from 'react'; export default class SocialVideo extends Component { render() { return ( <h1>Social Video</h1> ); } } 

Далее, в src/App.js , давайте создадим список видео, которые мы можем циклически переключать между кнопками Next и Previous .

 import React, { Component } from 'react'; import SocialVideo from './social-video'; var videos = [ { service: 'youtube', video: 'https://www.youtube.com/watch?v=XxVg_s8xAms' }, { service: 'vimeo', video: 'https://vimeo.com/151715092' }, { service: 'dailymotion', video: 'http://www.dailymotion.com/video/x3oc771_la-voiture-du-futur_tech' } ]; export default class App extends Component { constructor (props) { super(props); this.state = { videoIndex: 0 }; } goToVideo (index) { let videoIndex = index; if (videoIndex < 0) { videoIndex = videos.length - 1; } else if (videoIndex >= videos.length) { videoIndex = 0; } this.setState({ videoIndex }); } render() { const {service, video} = videos[this.state.videoIndex]; return ( <div> <SocialVideo service={service} video={video} width={500} height={270} /> <p> <span>{service}: </span> <span>{video}</span> </p> <button onClick={this.goToVideo.bind(this, this.state.videoIndex - 1)}> Previous </button> <button onClick={this.goToVideo.bind(this, this.state.videoIndex + 1)}> Next </button> </div> ); } } 

Здесь нет ничего необычного. Мы определяем массив с данными о видео, между которыми мы хотим переключиться. В состоянии App мы сохраняем позицию в массиве, которая указывает, какое видео выбрано. Мы также отображаем информацию о выбранном видео и отображаем наш компонент SocialVideo . На данный момент компонент не делает много, поэтому мы должны добраться до него.

Мы будем передавать видеоинформацию в качестве props компоненту SocialVideo и использовать эту информацию для рендеринга соответствующего контента. Компонент не будет иметь своего собственного состояния. Это сделает его многоразовым и предсказуемым, что означает, что один и тот же вход каждый раз равен одному и тому же результату. Вот законченный компонент. Если вы следуете дома, убедитесь, что ваш браузер открыт, когда вы сохраняете файл, и смотрите, как обновляется пользовательский интерфейс.

 import qs from 'query-string'; import React, {Component, PropTypes} from 'react'; export default class SocialVideo extends Component { static propTypes = { service: PropTypes.oneOf(['youtube', 'vimeo', 'dailymotion']).isRequired, video: PropTypes.string.isRequired }; static urlMap = new Map([ ['youtube', 'http://www.youtube.com/embed/'], ['vimeo', 'http://player.vimeo.com/video/'], ['dailymotion', 'http://www.dailymotion.com/embed/video/'] ]); getIdFromVideoString (vString) { const urlArr = vString.split('/'); const idString = urlArr[urlArr.length - 1]; const queryParams = qs.extract(vString); return (queryParams && qs.parse(queryParams).v) || idString || ''; } render() { const {service, video, ...htmlTags} = this.props; const src = `${SocialVideo.urlMap.get(service)}${this.getIdFromVideoString(video)}`; return ( <iframe src={src} frameBorder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen {...htmlTags} /> ); } } 

 const {service, video, ...htmlTags} = this.props; 

 const src = `${SocialVideo.urlMap.get(service)}${this.getIdFromVideoString(video)}`; 

 return ( <iframe src={src} frameBorder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen {...htmlTags} /> );