クイックヒント：Reactでビデオプレーヤーコンポーネントを構築します

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

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

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

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

開発環境の準備

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

<code class="language-bash">git clone https://github.com/gaearon/react-hot-boilerplate</code>

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

<code class="language-bash">cd react-hot-boilerplate
npm install
npm install --save query-string
npm start</code>

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

コンポーネントの作成

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

<code class="language-javascript">import React, { Component } from 'react';

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

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

<code class="language-javascript">import React, { Component } from 'react';
import SocialVideo from './social-video';

const videos = [
  // ... (视频数据)
];

export default class App extends Component {
  // ... (状态管理和视频切换逻辑)
  render() {
    const { service, video } = videos[this.state.videoIndex];
    return (
      <div>
        <socialvideo height="270" service="{service}" video="{video}" width="500"></socialvideo>
        {/* ... (按钮等) */}
      </div>
    );
  }
}</code>

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

<code class="language-javascript">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="%7Bsrc%7D" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    );
  }
}</code>

概要http://localhost:3000/

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

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

以上がクイックヒント：Reactでビデオプレーヤーコンポーネントを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。