再利用可能なReactビデオ再生コンポーネントを構(gòu)築します

この記事では、Vimeo、YouTube、およびDailymotionのビデオのリストをループすることができるReactビデオコンポーネントを作成するために、段階的にガイドされます。このコンポーネントは、他のビデオプロバイダーをサポートするために簡単に拡張できます。

ホットリロードをサポートする開発環(huán)境としてreact-hot-boilerplateを使用して、各コードが変更された後にページを更新せずにコンポーネントビルド結(jié)果をブラウザですぐに表示できるようにします。

このビデオコンポーネントには獨自の狀態(tài)がなく、再利用可能で予測可能になります。つまり、同じ入力が常に同じ出力を生成します。この記事では、propTypesを使用した必要な小道具の定義、プロップの分解、拡張オペレーターを使用してコンポーネントをよりカスタマイズ可能で動的にするなど、Reactのコンポーネントを構(gòu)築するためのベストプラクティスについても説明します。 ソースコードとデモは、GitHubリポジトリ（リンク省略）にあります。

開発環(huán)境の準(zhǔn)備

最初に、gitがインストールされていると仮定すると、リポジトリをクローンします：

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

プロジェクトディレクトリに移動し、依存関係をインストールしてください：

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

すべてがうまくいかない場合、コンソールはListening at localhost:3000に表示されます。 Webpackはファイルの処理に時間がかかります。終了すると、ブラウザは「Hello、World」を表示します。

コンポーネントの作成

1. コンポーネントファイルの作成：srcディレクトリでsocial-video.jsを作成するには、初期コードを追加します：
>

import React, { Component } from 'react';

export default class SocialVideo extends Component {
  render() {
    return (<h1>Social Video</h1>);
  }
}

2. ビデオリストを作成してください：App.js：の配列を定義し、コンポーネントでコンポーネントをレンダリングします。コンポーネント：App SocialVideo

import React, { Component } from 'react';
import SocialVideo from './social-video';

const videos = [
  // ... (視頻數(shù)據(jù))
];

export default class App extends Component {
  // ... (狀態(tài)管理和視頻切換邏輯)
  render() {
    const { service, video } = videos[this.state.videoIndex];
    return (
      <div>
        <SocialVideo height="270" service={service} video={video} width="500" />
        {/* ... (按鈕等) */}
      </div>
    );
  }
}

コンポーネントの完了：
3. ライブラリを使用して、ビデオURLを解析し、：SocialVideoでビデオをレンダリングします。 query-string iframeさあ、実行中のビデオコンポーネントを
で見ることができるはずです。

import qs from 'query-string';
import React, { Component, PropTypes } from 'react';

export default class SocialVideo extends Component {
  // ... (propTypes定義)

  getIdFromVideoString(vString) {
    // ... (從視頻URL中提取ID)
  }

  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} />
    );
  }
}

概要http://localhost:3000/

この記事では、再利用可能で予測可能な、簡単にスケーラブルなReactビデオコンポーネントを作成する方法を示しています。 このコンポーネントを構(gòu)築するには、およびベストプラクティスを使用します。

（FAQSセクションをここに含める必要があります。コンテンツは元のテキストと一致していますが、質(zhì)問や回答をより明確な形式で提示するなど、必要に応じて少し書き直して磨くことができます）react-hot-boilerplate

以上がクイックヒント：Reactでビデオプレーヤーコンポーネントを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。