request for examples - how to embed React.Video in Javascriptxml?

Question

I am currently developing a data frontend/visualization project where I need to incorporate the Node.js module React.Video, in Javascript, XML, or JSX.

The project can be found at: https://github.com/tiagomoraismorgado/estatisticasincendiosportugal

The source code of my page is as follows:

var React = require("react");
var ReactDOM = require("react-dom");
var Cassette = require("react-cassette-player");
var ReactVideo = require("react.video");
var Header = require("../components/header.jsx");
var Footer = require("../components/footer.jsx");
var Jumbotron = require("../components/jumbotron.jsx");
var Router = require("react-router");
var Link = Router.Link;
var ImageTag = require("../components/imagetag.jsx");
var generateHelmet = require("../lib/helmet.jsx");
var SpeakersPromo = require("../components/speakers-promo.jsx");


var speakersInfo = require('../talks/2017');

var Home = React.createClass({
  pageMetaDescription: "Three days of building a truly global web together. Come with an idea, leave with a community.",
  render: function () {
    var self = this;
    return (
      <div className="home-page">
                    <Cassette src="http://localhost:9090/assets/audio/1.mp3"
                      preload="none"
                      cassetteColor="#FFFFF"
                      labelColor="#000"
                      tapeColor="#000"
                      controlsColor="#FFFF"
                      containerClass="quasi-wrap" />
                    );

        {generateHelmet(this.pageMetaDescription)}
        <Header logoImage="/assets/images/mozilla-festival_wordmark-interim_horizontal.jpg"/>
        <Jumbotron className="home-jumbotron" image="/assets/images/hero/home/banner-home_5.jpg"
                  image2x="/assets/images/hero/home/banner-home_5.jpg">
          <div className="content-wrapper">
            <h1>Plataforma de visualização de dados Incêndios Portugal 2017</h1>
            <p className="mb-0">Projecto de desenvolvimento frontend criado por Tiago Morais Morgado</p>
            <p className="mb-0">que tem em vista a criação de uma plataforma de visualização de dados com o propósito de fazer um ponto de situação em relação aos danos provocados por incêndios em Portugal em 2017</p>
          </div>
        </Jumbotron>
        <div className="news content wide">

        </div>
        <div className="white-background">
          <div className="centered content wide">
          <h1>Relatório de dados incêndios Portugal 2018</h1>
          <p>Abaixo poderá consultar os relatórios dos incêndios que assolaram o território nacional em 2017. Os relatórios contêm gráficos em formato 2d e 3d.</p>
          <a href="https://ti.to/mozilla/mozilla-festival-2018" className="btn btn-arrow"><span>Mais informação</span></a>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
});

module.exports = Home;

I have as an example the code of the site Node package manager, which can be found in:

https://www.npmjs.com/package/react.video

namely:

import React from 'react';
import ReactVideo from 'react.video';

class App extends React.Component {

  constructor (props) {
    super(props);
    this.onClickPlay = this.onClickPlay.bind(this);
    this.state = {
      muted: false,
      source: [
        {
          src: 'http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4',
          type: 'video/mp4'
        }
      ]
    };
  }

  // play() method is called via refs. 
  onClickPlay () {
    this.refs.VideoComp.play();
  }

  render () {
    // a basic style object 
    const VideoStyle = {
        backgroundColor: 'green'
    };

    return (
      <ReactVideo
        ref={'VideoComp'}
        cls={'custom-video'} 
        height={500} width={'100%'}
        style={VideoStyle}
        muted={this.state.muted}
        src={'http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4'}
        source={this.state.source}>
      </ReactVideo>

      <div>
        <div onClick={this.onClickPlay}>Play</div>
      </div>
    );
  }
};

export default App;

however the syntax is radically different and I am having some difficulty to integrate the code in my project of my site of data visualization of the damage caused by the fires that devastated Portugal in 2017, in my github repository. if anyone can help me to provide examples of how to do so would be muy grateful.