Erstellen Sie eine wiederverwendbare React -Video -Wiedergabekomponente

Dieser Artikel leitet Sie Schritt für Schritt zum Erstellen einer React -Videokomponente, die die Liste der Videos von Vimeo, YouTube und Dailymotion durchlaufen kann. Diese Komponente ist leicht zu erweitern, um andere Videotr?fte zu unterstützen.

Wir werden react-hot-boilerplate als Entwicklungsumgebung verwenden, die das hei?e Nachladen unterstützt und es Ihnen erm?glicht, die Komponentenergebnisse sofort in Ihrem Browser zu erstellen, ohne die Seite nach jeder Code?nderung zu aktualisieren.

Diese Videokomponente hat keinen eigenen Zustand, was sie wiederverwendbar und vorhersehbar macht, was bedeutet, dass der gleiche Eingang immer denselben Ausgang erzeugt. In diesem Artikel werden auch Best Practices für Baukomponenten in React er?rtert, einschlie?lich der Definition der erforderlichen Requisiten mit propTypes, der Dekonstruktion von Requisiten und der Verwendung von Erweiterungsoperatoren, um Komponenten anpassbarer und dynamischer zu gestalten. Quellcode und Demos finden Sie in unserem GitHub -Repository (Link weggelassen).

Entwicklungsumgebung Vorbereitung

Angenommen, Sie haben Git installiert, klonen Sie das Repository:

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

Navigieren Sie zum Projektverzeichnis und installieren Sie die Abh?ngigkeiten:

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

Wenn alles gut l?uft, wird die Konsole Listening at localhost:3000 angezeigt. WebPack braucht einige Zeit, um Dateien zu verarbeiten. Wenn der Browser fertig ist, zeigt er "Hallo, Welt" an.

Komponente erstellen

1. Komponentendatei erstellen: Erstellen src im Verzeichnis social-video.js, fügen Sie den anf?nglichen Code hinzu:

import React, { Component } from 'react';

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

2. Erstellen Sie eine Videoliste in App.js: ein Array von Videos und Render App Komponenten in SocialVideo Komponenten:

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. Komplett SocialVideo Komponente: Verwenden Sie die Bibliothek query-string, um die Video -URL zu analysieren und das Video mit iframe:
zu rendern

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

Jetzt sollten Sie in der Lage sein, die laufende Videokomponente in http://localhost:3000/ zu sehen.

Zusammenfassung

Dieser Artikel zeigt, wie eine wiederverwendbare, vorhersehbare und leicht skalierbare React -Videokomponente erstellt wird. Wir verwenden react-hot-boilerplate und Best Practices, um diese Komponente zu erstellen.

(Der FAQS -Abschnitt sollte hier enthalten sein, der Inhalt stimmt mit dem Originaltext überein, kann jedoch bei Bedarf leicht umschreiben und poliert werden, z. B. die Darstellung der Fragen und Antworten in einem klareren Format)

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Erstellen Sie eine Video -Player -Komponente in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!