title: Rendering a ReactJS component in memory before placing it in the DOM
body: <p>I have the concept of a tile in my application. </p>
  
  <p>Tiles are dynamically loaded. They can then be initialized against a DOM element using an <code>init</code> method, with the tile taking care of rendering itself.</p>
  
  <p><strong>features/my-tile/tile.js</strong></p>
  
  <pre><code>import contentsComponentFactory from './components/contents/factory'
  
  const tile = {
    init,
  };
  
  // `el` is a DOM element
  function init(el) {
    // Render a "contents" ReactJS component (see below) to the DOM - how?
    // Is the following possible?
    el.appendChild(contentsComponentFactory.create({ props }).render());
  }
  
  export default tile;
  </code></pre>
  
  <p>A tile has a component <code>contents</code> which renders the tile contents to the screen.</p>
  
  <p><strong>features/my-tile/components/contents/factory.js</strong>    </p>
  
  <pre><code>const factory = {
    create
  };
  
  function create(options) {
    const component = Object.create(React.Component.prototype);
  
    component.props = options.props;
    component.state = { message: 'This is a tile' };
    component.render = function() {
      return &lt;div&gt;{this.state.message}&lt;/div&gt;;
    };
  
    return component;
  }
  
  export default factory;
  </code></pre>
  
  <p>In AngularJS, in <code>init</code> I would render the contents in memory and insert the result into the DOM. Can I do this in ReactJS?</p>
  
  <p>I am new to ReactJS and so I may be completely misunderstanding something.</p>