request examples - how to embed React.Video in JavascriptXML?

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

The project can be found at: link

The source code for 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 site code of the node package manager, which can be found at:

link

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'm having some difficulty integrating the code into my project from my site to view data on the damage caused by the fires that plagued Portugal in 2017 in my github repository. if anyone can help me to provide examples of how to do it would be very grateful.