ReactJS import/require file/page from another loaction
<p>I have been looking for some examples but no luck or I just don't know how it looks like. What I am trying to do is to do what I would do in Rails or PHP - so Render or Include. I want to store content for different pages in different files. I know I can store it in one file but it wouldn't be recommended to have hundreds lines of code... I want to keep it short in many files. (unless its not how ReactJS should be build)</p>

<p>Here is my page structure:</p>

<p><a href="https://i.stack.imgur.com/7xJU0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7xJU0.png" alt="enter image description here"></a></p>

<p>How would I link projects.js to app.js - and call it to display content from projects.js</p>

<p><strong>app.js</strong></p>

<pre><code>var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;

var ReactDOM = require('react-dom');
var React = require('react');

var Projects = require('./pages/projects');

var Header = React.createClass({
  render : function() {
    return (
            &lt;div className="navmenu"&gt;
              &lt;ul id="menu"&gt;
                &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;&lt;Link to="about"&gt;About&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;&lt;Link to="projects"&gt;Projects&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;News&lt;/li&gt;
                &lt;li&gt;Contact&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
        );
  }
});

var Logo = React.createClass({
  render : function() {
    return (
      &lt;div className="logo col-md-4"&gt;
        &lt;div&gt;
          &lt;img src="images/logo.png" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
});

var slide_one = React.createClass({
  render : function() {
    return (
      images/slides/blank.gif
    );
  }
});


var Slides = React.createClass({
  render : function() {
    return (
            &lt;div className="container"&gt;
              &lt;div className="row wrap"&gt;
                &lt;div className="col-md-12 gallery"&gt; 
                  &lt;div className="camera_wrap camera_white_skin" id="camera_wrap_1"&gt;
                    &lt;div data-thumb="" data-src="images/slides/blank.gif"&gt;
                      &lt;div className="img-responsive camera_caption fadeFromBottom"&gt;
                        &lt;h2&gt;Great cars&lt;/h2&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div data-thumb="" data-src="images/slides/blank.gif"&gt;
                      &lt;div className="img-responsive camera_caption fadeFromBottom"&gt;
                        &lt;h2&gt;Fast cars&lt;/h2&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div data-thumb="" data-src="images/slides/blank.gif"&gt;
                      &lt;div className="img-responsive camera_caption fadeFromBottom"&gt;
                        &lt;h2&gt;Super cars&lt;/h2&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div data-thumb="" data-src="images/slides/blank.gif"&gt;
                      &lt;div className="img-responsive camera_caption fadeFromBottom"&gt;
                        &lt;h2&gt;We have it all!&lt;/h2&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    );
  }
});

var Footer = React.createClass({
  render : function() {
    return (
    &lt;div&gt;
      &lt;div className="line7"&gt;
        &lt;div className="container"&gt;
          &lt;div className="row footer"&gt;
            &lt;div className="col-md-12"&gt;

                &lt;br /&gt;&lt;br /&gt;

              &lt;h3&gt;Subscribe for Our Newsletter!&lt;/h3&gt;
              &lt;p&gt;Subscribe to our newsletter email to get notification about fresh news, latest promos, giveaways and free stuff from Skew. Stay always up-to-date!&lt;/p&gt;
              &lt;div className="fr"&gt;
                &lt;div className="boxCenter"&gt;
                  &lt;input className="col-md-6 fEmail" name='Email' placeholder='Enter Your Email'/&gt;
                  &lt;a href="#" className="subS"&gt;Subscribe!&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="lineBlack"&gt;
        &lt;div className="container"&gt;
          &lt;div className="row downLine"&gt;
            &lt;div className="col-md-12 text-right"&gt;

            &lt;/div&gt;
            &lt;div className="col-md-6 text-left copy"&gt;
              &lt;p&gt;Copyright; 2016 Cruisin. All Rights Reserved.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className="col-md-6 text-right dm"&gt;

            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    );
  }
});

var Home = React.createClass({
  render : function() {
    return (
            &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-md-12 cBusiness"&gt;
                  &lt;p&gt;Home Page&lt;/p&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    );
  }
});

var About = React.createClass({
  render : function() {
    return (
            &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-md-12 cBusiness"&gt;
                  &lt;p&gt;About Page&lt;/p&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    );
  }
});

var App = React.createClass({
  render : function() {
    return (
      &lt;div&gt;
        &lt;div id="home"&gt;
          &lt;div className="headerLine"&gt;
            &lt;div id="menuF" className="default"&gt;
              &lt;div className="container"&gt;
                &lt;div className="row"&gt;

                  &lt;Logo /&gt;

                  &lt;Header /&gt;
                  &lt;Slides /&gt;

                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

                  {this.props.children}

        &lt;/div&gt;

        &lt;Footer /&gt;

      &lt;/div&gt;

    )
  }
});

ReactDOM.render((
  &lt;Router &gt;
    &lt;Route path="/" component={App}&gt;
      &lt;IndexRoute component={Home} /&gt;
      &lt;Route path="about" component={About} /&gt;
      &lt;Route path="projects" component={Projects} /&gt;
    &lt;/Route&gt;
  &lt;/Router&gt;
), document.getElementById('mount-point')) ;
</code></pre>

<p><strong>projects.js</strong></p>

<pre><code>var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;

var ReactDOM = require('react-dom');
var React = require('react');

var Projects = React.createClass({
  render : function() {
    return (

            &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-md-12 cBusiness"&gt;

                  &lt;p&gt;Projects Page&lt;/p&gt;

                  &lt;br /&gt;
                  &lt;br /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    );
  }
});
</code></pre>

<p>I have made few attempts to call it. I am new in JS and still making mistakes.</p>

<p>How to make it work, or is there another way to do this in ReactJS?</p>

<p>Apologies if there is another topic like this - I don't really know technical name for what I want to do here. </p>