title: Render multiple components by ReactDOM
body: <p>Currently unable to work out why my code isn't rendering. Would love some advice from some of you brilliant react.js coders. Really don't understand what's wrong - I feel like it should work.</p>
  
  <p>Here is my App.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom'
  
  
  import HeaderNavigation from './HeaderNavigation';
  import Body from './Body';
  import Footer from './Footer';
  
  
  
  
  ReactDOM.render(
      &lt;HeaderNavigation/&gt;,
      &lt;Body/&gt;,
      &lt;Footer/&gt;,
       document.getElementById('app'));
  </code></pre>
  
  <p>This is the components.</p>
  
  <p>Body.js</p>
  
  <pre><code>import React from "react";
  
  /* Styles */
  import Button from 'react-bootstrap/lib/Button';
  import Grid from 'react-bootstrap/lib/Grid';
  import Jumbotron from 'react-bootstrap/lib/Jumbotron';
  import Row from 'react-bootstrap/lib/Row';
  import Col from 'react-bootstrap/lib/Col';
  
  export default class Body extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Jumbotron&gt;
                      &lt;Grid&gt;
                          &lt;h1&gt;Mr Mac&lt;/h1&gt;
                          &lt;p&gt;Poodle Box&lt;/p&gt;
                      &lt;/Grid&gt;
                  &lt;/Jumbotron&gt;
  
                  &lt;Grid&gt;
                      &lt;Row&gt;
                          &lt;Col md={4}&gt;
                              &lt;h2&gt;Luxurious Dog Clothes&lt;/h2&gt;
                              &lt;p&gt;So luxury much now&lt;/p&gt;
                              &lt;p&gt;&lt;Button&gt;View details »&lt;/Button&gt;&lt;/p&gt;
                          &lt;/Col&gt;
                          &lt;Col md={4}&gt;
                              &lt;h2&gt;Delectable Dog Délectants&lt;/h2&gt;
                              &lt;p&gt;Food&lt;/p&gt;
                              &lt;p&gt;&lt;Button&gt;View details »&lt;/Button&gt;&lt;/p&gt;
                          &lt;/Col&gt;
                          &lt;Col md={4}&gt;
                              &lt;h2&gt;Toys&lt;/h2&gt;
                              &lt;p&gt;MMmhmmmm&lt;/p&gt;
                              &lt;p&gt;&lt;Button&gt;View details&lt;/Button&gt;&lt;/p&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                  &lt;/Grid&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Footer.js</p>
  
  <pre><code>import React from 'react';
  import Grid from 'react-bootstrap/lib/Grid';
  
  export default class Footer extends React.Component {
      render() {
          return (
              &lt;Grid&gt;
                  &lt;hr /&gt;
                  &lt;footer&gt;
                      &lt;p&gt;© Company 2014&lt;/p&gt;
                  &lt;/footer&gt;
              &lt;/Grid&gt;
          );
      }
  }
  </code></pre>
  
  <p>HeaderNavigation.js</p>
  
  <pre><code>import React from 'react';
  import Navbar from 'react-bootstrap/lib/Navbar';
  import Nav from 'react-bootstrap/lib/Nav';
  
  export default class HeaderNavigation extends React.Component {
  
  render() {
          let brand = &lt;a href='#'&gt;Project Name&lt;/a&gt;;
          return (
              &lt;Navbar brand={brand} fixedTop inverse toggleNavKey={0}&gt;
                  &lt;Nav right eventKey={0}&gt;
                      &lt;InlineLogin className='navbar-form' /&gt;
                  &lt;/Nav&gt;
              &lt;/Navbar&gt;
          );
      }
  }
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
      &lt;title&gt;DOGBOXUNITED&lt;/title&gt;
      &lt;span id = 'Heading'&gt; &lt;/span&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id='app'&gt; &lt;/div&gt;
  &lt;script src="output/myCode.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Webpack Config </p>
  
  <pre><code>var webpack = require("webpack");
  var path = require("path");
  
  var DEV = path.resolve(__dirname, "dev");
  var OUTPUT = path.resolve(__dirname, "output");
  
  var config = {
      entry: DEV + "/App.js",
      output: {
          path: OUTPUT,
          filename: "myCode.js"
      },
  module: {
      loaders: [{
          include: DEV,
          loader: "babel",
      }]
    }
  };
  
  module.exports = config;
  </code></pre>
  
  <p>Really appreciate any help!</p>