title: Code-Splitting in ReactJS Components with Webpack in Ruby On Rails App
body: <p>I am using ReactJS components inside Rails application using Webpack gem. But React components are loaded only for the relevant places inside Rails application layout. If I have 3 different React components, it gives <code>Target container is not a DOM element.</code> error in each pages. <br><br>
  The reason is I have following render calls in each React files.<br>
  <code>ReactDOM.render(&lt;One /&gt;, document.getElementById('firstSection'));</code><br>
  <code>ReactDOM.render(&lt;Two /&gt;, document.getElementById('secondSection'));</code><br>
  <code>ReactDOM.render(&lt;Three /&gt;, document.getElementById('thirdSection'));</code><br>
  <br>
  Furthermore, I import these components to <code>javascript/packs/application.js</code> as bellow. <br></p>
  
  <pre><code>import One from './Components/One'
  import Two from './Components/Two'
  import Three from './Components/Three'
  </code></pre>
  
  <p>In order to fix my issue, I want to split these files using routes. Does anyone know how to do this? Or any other solution would be appreciated. <br> All the tutorials are only for complete react application and, My case is different.</p>