Schneller Tipp: Erstellen Sie eine Video -Player -Komponente in React

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 id="Social-Video">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 = [
  // ... (视频数据)
];

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" />
        {/* ... (按钮等) */}
      </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!