Créez un composant de lecture vidéo réagiable réutilisable

Cet article vous guidera étape par étape pour créer un composant vidéo React qui peut parcourir la liste des vidéos de Vimeo, YouTube et Dailymotion. Ce composant est facile à développer pour prendre en charge d'autres fournisseurs de vidéos.

Nous utiliserons react-hot-boilerplate comme environnement de développement, qui prend en charge le rechargement chaud, vous permettant de visualiser les résultats de création de composants immédiatement dans votre navigateur sans rafra?chir la page après chaque modification de code.

Ce composant vidéo n'a aucun état de lui-même, ce qui le rend réutilisable et prévisible, ce qui signifie que la même entrée produira toujours la même sortie. Cet article discutera également des meilleures pratiques pour la construction de composants dans React, y compris la définition des accessoires requis en utilisant propTypes, la déconstruire des accessoires et l'utilisation des opérateurs d'extension pour rendre les composants plus personnalisables et dynamiques. Le code source et les démos peuvent être trouvés dans notre référentiel GitHub (lien omis).

Préparation de l'environnement de développement

Tout d'abord, en supposant que vous avez installé Git, clon le référentiel:

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

Accédez au répertoire du projet et installez les dépendances:

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

Si tout se passe bien, la console affiche Listening at localhost:3000. WebPack prend un certain temps pour traiter les fichiers. Une fois terminé, le navigateur affiche "Hello, World".

Créer des composants

1. Créer un fichier de composant: Créer src Dans le répertoire social-video.js, ajoutez le code initial:

import React, { Component } from 'react';

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

2. Créer une liste de vidéos dans App.js: Définissez un tableau de vidéos et de rendu App composants dans SocialVideo composants:

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. Compléter SocialVideo Composant: Utilisez la bibliothèque query-string pour analyser l'URL de la vidéo et rendre la vidéo avec 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} />
    );
  }
}

Maintenant, vous devriez pouvoir voir le composant vidéo en cours d'exécution dans http://localhost:3000/.

Résumé

Cet article montre comment créer un composant vidéo de réaction réutilisable, prévisible et facilement évolutif. Nous utilisons react-hot-boilerplate et les meilleures pratiques pour construire ce composant.

(La section FAQ doit être incluse ici, le contenu est cohérent avec le texte d'origine, mais il peut être légèrement réécrit et poli si nécessaire, comme présenter les questions et réponses dans un format plus clair)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!