title: Document displays nothing when component is exported
body: <p>I began learning React a few days ago and attempted to display some simple text. The goal is to have component <code>button</code> use its data from <code>Hello</code> to spit out the text <code>hello world</code>. However, nothing at all is displayed. </p>
  
  <p>This React project was created using <code>create-react-app</code></p>
  
  <p>App.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class text extends Component {
    render(){
      return(
        &lt;div&gt;
          &lt;Hello /&gt;
        &lt;/div&gt;
        );
    }
  }
  
  class Hello extends Component {
    render(){
      const but = &lt;h1&gt;hello world&lt;/h1&gt;;
  
      return(
          &lt;h1&gt;{this.props.but}&lt;/h1&gt;
        );
    }
  }
  
  export default text;
  </code></pre>
  
  <p>index.js file:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  serviceWorker.unregister();
  </code></pre>
  
  <p>I expect that the <code>&lt;Hello /&gt;</code> tag in the <code>text</code> component would transfer the data of component <code>Hello</code> via <code>this.props</code>, but clearly I am incorrect. A detailed response would be very highly appreciated.</p>