title: How can i render a React JS component directly & without a Target container
body: <p>I would like to render a component directly without a Target container, i need to get the content of the component right in the place where i put the generated JS file.</p>
  
  <p>Here is my index.js file, i have removed the "document.getElementById('target-container')" is there a way to render this component without a target container or a way to append a target container without inserting it in the HTML template file.</p>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  import axios from 'axios';
  import '../node_modules/cleanslate/cleanslate.css';
  import './style.scss';
  
  class Widget extends React.Component {
  constructor(props){
      super(props);
      this.state = {}
  }
  
  componentDidMount() {
      let id = this.props.id;
      axios.get(`https://api.com/${id}`)
      .then((res) =&gt; {
          const brand = res.data;
          this.setState({
              rating: brand.rating,
              logo : brand.logo,
              name: brand.name,
              stars: brand.stars,
              url: brand.url
          });
      });
  }
  
  render() {
      return (
          &lt;div className="cleanslate"&gt;
              &lt;a href={this.state.url} target="_blank"&gt;
                  &lt;img src="https://img/.svg" className="" alt="" /&gt;
                  &lt;div className="rating-box"&gt;
                      &lt;img src={this.state.logo} className="logo" alt={this.state.name} /&gt;
                      &lt;span className="note"&gt;{this.state.rating}/10&lt;/span&gt;
                      &lt;div id="Selector" className={`selected-${this.state.stars}`}&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      )
  }
  }
  
  ReactDOM.render(
      &lt;Widget id="7182" /&gt;
  )
  </code></pre>
  
  <p>Here is an example (<a href="https://github.com/seriousben/embeddable-react-widget" rel="nofollow noreferrer">https://github.com/seriousben/embeddable-react-widget</a>) of appending the component in another one :</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Widget from '../components/widget';
  import '../../vendor/cleanslate.css';
  
  export default class EmbeddableWidget {
  static el;
  
  static mount({ parentElement = null, ...props } = {}) {
  const component = &lt;Widget {...props} /&gt;;
  
  function doRender() {
    if (EmbeddableWidget.el) {
      throw new Error('EmbeddableWidget is already mounted, unmount first');
    }
    const el = document.createElement('div');
    el.setAttribute('class', 'cleanslate');
  
    if (parentElement) {
      document.querySelector(parentElement).appendChild(el);
    } else {
      document.body.appendChild(el);
    }
    ReactDOM.render(
      component,
      el,
    );
    EmbeddableWidget.el = el;
  }
  if (document.readyState === 'complete') {
    doRender();
  } else {
    window.addEventListener('load', () =&gt; {
      doRender();
    });
  }
    }
  
    static unmount() {
      if (!EmbeddableWidget.el) {
        throw new Error('EmbeddableWidget is not mounted, mount first');
      }
      ReactDOM.unmountComponentAtNode(EmbeddableWidget.el);
      EmbeddableWidget.el.parentNode.removeChild(EmbeddableWidget.el);
      EmbeddableWidget.el = null;
    }
  }
  </code></pre>