<p dir="auto">ReactDOM and React are good separation of concerns. However, except for special cases, React applications almost always require the ReactDOM as well. The special cases can obviously have their own builds which can remove the unnecessary dependency. But React officially should serve a single library which includes the ReactDOM as a single resource. It absolutely makes no sense for an extra network request for a library that's 900 bytes gzipped.</p>
<p dir="auto">This cost is even multiplied, since the official CDNs seem to already have a redirection in place. At the moment of filing this issue, a request to <a href="https://fb.me/react-0.14.7.min.js" rel="nofollow">https://fb.me/react-0.14.7.min.js</a> ends up with 301 to <a href="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12624086_185960608428874_474870377_n.js" rel="nofollow">https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12624086_185960608428874_474870377_n.js</a></p>
<p dir="auto">And similar redirects for ReactDOM. That's <code class="notranslate">4</code> requests in place of what could be a <code class="notranslate">2</code>. 2 requests, for a mere 900 bytes. In other words, taking the overhead of TCP/IP and HTTP, <code class="notranslate">an overhead of nearly half a kilobyte with about 600ms of latency (in my geographic location) for a mere 900 bytes</code>. Now, add to the fact that the <code class="notranslate">gzip would probably nullify that 900 bytes almost entirely</code> if its included as a part of the other 70kb file, due to binary compression.</p>
<p dir="auto">I'm honestly quite surprised why it was even decided to separate them (Not as libraries, but in terms of deployment).</p>
<p dir="auto">I was talking with a new React user in IRC, and they were having trouble understanding the ES6 in the docs. I think using ES6 in the docs is a good idea, but what about giving the reader more ability to understand the code?</p>
<p dir="auto">Concept:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/936069/25067709/2cd09f34-2201-11e7-96d7-cd343d2ea70b.png"><img src="https://cloud.githubusercontent.com/assets/936069/25067709/2cd09f34-2201-11e7-96d7-cd343d2ea70b.png" alt="react tutorial page" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/936069/25067742/efbc9fe8-2201-11e7-800c-79fdee1d6daa.png"><img src="https://cloud.githubusercontent.com/assets/936069/25067742/efbc9fe8-2201-11e7-800c-79fdee1d6daa.png" alt="react tutorial page with es6 class popup" style="max-width: 100%;"></a></p>
<p dir="auto">Maybe take text from <a href="https://babeljs.io/learn-es2015/#ecmascript-2015-features-classes" rel="nofollow">Babel's ES6+ Guide</a> and modify it a bit to fit the surrounding content.</p>
<p dir="auto">This could be done across the site, but it's most important in the tutorial.</p>