React component closing tag : <p>I'm new to React and I'm trying to figure out the purpose/use of &lt;MyComponent&gt;&lt;/MyComponent&gt; vs &lt;MyComponent /&gt;. I can't seem to find information on anything except self-closing tags.</p>

<p>I've created a basic tab scroller as a <a href="https://jsfiddle.net/ChimeraZen/hym59xy3/" rel="noreferrer">JSFiddle</a> using the self-closing &lt;MyComponent /&gt; and subsequent props, and I'm wondering if there's a better way to write in React than what I've done.</p>



<pre class="lang-js prettyprint-override"><code>class TabScroller extends React.Component {

  render() {
    return (
      &lt;div className="tabScroller"&gt;
        &lt;div className="NavList"&gt;
          &lt;TabNav handleClick={this.handleNavClick} /&gt;
          &lt;TabList 
            tabs={this.state.tabs} 
            activeTab={this.state.activeTab}
            scrollPosition={this.state.scrollPosition} 
            handleClick={this.handleTabClick}
          /&gt;
        &lt;/div&gt;
        &lt;TabContent content={this.state.tabs[this.state.activeTab].content} /&gt;
      &lt;/div&gt;
    );
  }
}

// ========================================

ReactDOM.render(
  &lt;TabScroller /&gt;,
  document.getElementById('root')
);
</code></pre>
