title: How to reuse react components in different html pages
body: <p>im having problems with re-using react components in two different html pages</p>
  
  <p>heres the structure of my app</p>
  
  <pre><code>react app
      |-- webpack.config
      |-- package
      `-- src
          |-- index.js
          |-- index.html
          |-- home.html
          `-- components
              |-- Main.js
              |-- Sector.js
              |-- Homepage.js
  </code></pre>
  
  <p>okay in webpack.config i have
          this   </p>
  
  <pre><code>module.exports = {
    entry: './index.js',
  
  
  entry: [
      'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
      'webpack/hot/only-dev-server',
      './src/index'
  
    ],
  
      output: {
      path: path.join(__dirname, '/../dist/assets'),
      filename: 'app.js',
    },
  
  
    module: {
      loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&amp;presets[]=react' }
      ]
    }
  }
  </code></pre>
  
  <p>in index.js</p>
  
  <pre><code>import 'core-js/fn/object/assign';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Appd from './components/Main';
  import Sector from './components/sector';
  import Homepagesector from './components/Homepagesector';
  
  ReactDOM.render(&lt;Appd /&gt;, document.getElementById('app'));
  ReactDOM.render(&lt;Sector /&gt;, document.getElementById('sector'));  
  ReactDOM.render(&lt;Homepagesector /&gt;, document.getElementById('homepage'));
  </code></pre>
  
  <p>in index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html &gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;zilla&lt;/title&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;meta name="description" content=""&gt;
  &lt;/head&gt;
  
    &lt;!-- REQUIRED 3/3 - the image crop directive --&gt;
  
  
     &lt;body &gt;
        &lt;header&gt;
           &lt;div id="app"&gt;&lt;/div&gt;
        &lt;/header&gt;
  
        &lt;script src="appcontroller.js"&gt;&lt;/script&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__&lt;/script&gt;
  
        &lt;script type="text/javascript" src="/assets/app.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="resample.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="avatar.js"&gt;&lt;/script&gt;
  &lt;/body&gt;      
  &lt;/html&gt;
  </code></pre>
  
  <p>in home.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;   
  &lt;body &gt;
  &lt;header&gt;
    &lt;div id="homepage"&gt;&lt;/div&gt;
  &lt;/header&gt;
     &lt;script src="appcontroller.js"&gt;&lt;/script&gt;
     &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script&gt;__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__&lt;/script&gt;
     &lt;script type="text/javascript" src="/assets/app.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="resample.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="avatar.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="avatar.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In components folder 
  Main.js</p>
  
  <pre><code>require('styles/App.css');
  
  import React from 'react';
  
  let yeomanImage = require('../images/zilla.png');
  
  class AppComponent extends React.Component {
    render() {
      return (
         &lt;div&gt;
            &lt;img src={yeomanImage} alt="Yeoman Generator" /&gt; 
            &lt;h1 className="title"&gt;&lt;/h1&gt;  
            &lt;li&gt;
               &lt;a href="index2.html"  className="a7" &gt;Signin&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
               &lt;a href="index.html" className="a7" &gt;Register&lt;/a&gt;
            &lt;/li&gt;         
         &lt;/div&gt;
  
  In components folder 
  </code></pre>
  
  <p>Sector.js</p>
  
  <pre><code>require('styles/sector.css');
  
  import React from 'react';
  
  let yeomanImage = require('../images/dealzilla.png');
  
  let yeomanImaged = require('../images/256.jpg');
  
  class AppComponent extends React.Component {
    constructor(props) {
        super(props);
  
        this.state = {
           data: 'Initial data...'
        }
  
        this.updateState = this.updateState.bind(this);
  
     };
  
     updateState(e) {
        this.setState({data: e.target.value});
     }
    render() {
  
  
      return (
         &lt;div className="page-wrap"&gt;
            &lt;h1&gt;not registered?register for free&lt;/h1&gt;
            &lt;div className="profile"&gt;
               &lt;div className="profile-avatar-wrap"&gt;
                 &lt;img src={yeomanImaged} alt="Yeoman Generator" id="profile-avatar" alt="Image for Profile"/&gt;
               &lt;/div&gt;
               &lt;div className="location"&gt;upload avatar&lt;/div&gt;              
            &lt;/div&gt;
            &lt;h3&gt;You could do this with a file input too...&lt;/h3&gt;
         &lt;div&gt;
            &lt;input type = "text" value = {this.state.data} 
                 onChange = {this.updateState} /&gt;
            &lt;h4&gt;{this.state.data}&lt;/h4&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In components folder</p>
  
  <p>homepage.js</p>
  
  <pre><code>import React from 'react';
  
  let yeomanImage = require('../images/dealzilla.png');
  
  class AppedComponent extends React.Component {
    render() {
      return (
         &lt;div&gt;
            &lt;img src={yeomanImage} alt="Yeoman Generator" /&gt; 
            &lt;h1 className="title"&gt;dealzilla&lt;/h1&gt; 
            &lt;li&gt;
               &lt;a href="index2.html"  className="a7" &gt;Search&lt;/a&gt;
               &lt;a href="index2.html"  className="a7" &gt;Search&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
               &lt;a href="index.html" className="a7" &gt;Register&lt;/a&gt;
            &lt;/li&gt;    
         &lt;/div&gt;
     );
    }
  }
  
  AppedComponent.defaultProps = {
  };
  
  export default AppedComponent;
  </code></pre>
  
  <p>The problem is that I am not able to use homepage.js component
  in my home.html page
  it doesnt appear at all
  however my Main.js component is able to appear</p>
  
  <p>Im still a beginner in react, I've looked around for answers and didnt find any on this regard
  any help would be appreciated 
  thank you in advance
  best regards</p>