app.js

import React, { Component } from 'react';
import { render } from 'react-dom';

// Pages
import Home from './pages/home';
import Product from './pages/product';

class HomeLayout extends Component {
  render() {
    return (
      <div>
        <Home />
      </div>
    );
  }
}

class ProductLayout extends Component {
  render() {
    let id = document.getElementById('Product').getAttribute('data-id');
    return (
      <div>
        <Product id={id} />
      </div>
    );
  }
}

if (document.getElementById('Home')) { // eslint-disable-line
  render(<HomeLayout />,
    document.getElementById('Home') // eslint-disable-line
  );
}

if (document.getElementById('Product')) { // eslint-disable-line
  render(<ProductLayout />,
    document.getElementById('Product') // eslint-disable-line
  );
}