data.js

const data = {
  navbar: {
    icon: 'assets/icon.png',
    navs: ['Beranda','Tentang Kami', 'Pengumuman', 'Galeri', 'Videos', 'Kontak Kami']
  },
  video: [
    {
      url: "https://www.youtube.com/embed/wJAGy08EbJA"  
    },
    {
      url: "https://www.youtube.com/embed/wJAGy08EbJA"  
    },
    {
      url: "https://www.youtube.com/embed/wJAGy08EbJA"  
    },
    {
      url: "https://www.youtube.com/embed/wJAGy08EbJA"  
    },
  ]
}

home.js

const Home = React.createClass({
  render: function() {
    return (
      <div>
          {(()=>{
            if(data.app.addNavbar){
              return(
                <Navbar icon={data.navbar.icon} navs={data.navbar.navs} fixedTop={true}/>
              );
            }
          })()}
          {(()=>{
            if(data.app.addMainHeader){
              return(
                <MainHeader />
              );
            }
          })()}
          {(()=>{
            if(data.app.addSlideShow){
              return(
                <SlideShow slides={data.slideShow.slides} nav={data.navbar.navs[0]}/>
              );
            }
          })()}
          <div className="section">
            <About data={data.about} nav={data.navbar.navs[1]}/>
          </div>
          <div className="section">
            <Berita data={data.berita} nav={data.navbar.navs[2]}/>
          </div>
          <div className="section">
            <Galeri data={data.galeri} nav={data.navbar.navs[3]}/>
          </div>
          <div className="section">
            <Video data={data.video} nav={data.navbar.navs[4]}/>
          </div>
          <Modal data={data.berita}/>
          <Kontak data={data.kontak} nav={data.navbar.navs[5]}/>
          <Footer data={data.footer}/>
      </div>
    )
  }
});

video.js

const Video = React.createClass({
  render: function(){
    let data = this.props.data;
    let style = this;
    return (
      <div className="container section-galeri">
        <SectionHeader text={this.props.nav}/>
        <div className="galeri-content">
          <div className="row">
            <div className="col-md-12">
              <div className="carousel slide galeri-carousel multi-item-carousel" data-ride="carousel" data-type="multi-galeri" data-interval="3000" id="carousel-galeri">
                <div className="carousel-inner custom-carousel-inner">
                  {data.map(function(video, index){
                    return(
                      <div className={'item '+ (index==0? 'active' : '')} key={index}>
                          <div className="col-md-4 col-sm-6 col-xs-12">
                            <div className="galeri-panel">
                              <ul className="list-unstyled">
                                <li>
                                    <iframe src={video.url} allowFullScreen />
                                </li>
                              </ul>
                            </div>
                          </div>
                      </div>
                    );
                  })}
                </div>
                <a className="left carousel-control custom-control-left" href="#carousel-galeri" data-slide="prev"><i className="glyphicon glyphicon-chevron-left"></i></a>
                <a className="right carousel-control custom-control-right" href="#carousel-galeri" data-slide="next"><i className="glyphicon glyphicon-chevron-right"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
});