Improved support for React in the code snippet editor?

Question

Overview of Feedback

• Supported React Versions
• Development vs. Production
• Auto-enable Use BabelJS / ES2015
• Insert React boilerplate

React Version

Currently, the newest version of React available in the snippet editor is 16.6.3.

Many questions (on Stack Overflow) are around hooks, which were added in version 16.8.0.

To work around this, I've been going to the React docs and copying the CDN links provided there: https://reactjs.org/docs/cdn-links.html. Is there a reason newer versions of React aren't supported? Can the newest versions be added?

Development vs. Production

The current links that are added are also the production builds. Given that questions and answers commonly include React specific warnings it would be preferable to have the development bundle with more meaningful warnings directly in the console (rather than links). Is there a reason the production builds are chosen over the development builds? The development build would provide a better experience for both question askers and answerers?

Auto-enable Use BabelJS / ES2015

Almost every React specific question uses JSX which requires this option to be enabled and can be easy to overlook. Can this option be auto-enabled when selecting a React version?

Insert React boilerplate

When enabling React there is almost always the same boilerplate to add a root div and mount the App component. If the editor is empty, could this boilerplate be auto-inserted?

• <div id="root"></div> in HTML
• ReactDOM.render( < App / > , document.getElementById("root")); with a basic App component definition in JavaScript

Summary

In summary, it would be great if the editor defaulted to something along these lines when selecting a React version:

• Support for the newest versions of React
• Use BabelJS / ES2015 auto-enabled since JSX is almost a requirement
• Using development builds (instead of production)
• Boilerplate HTML/JavaScript added (if empty)

function App() {
  return "Hello World!";
}

ReactDOM.render( < App / > , document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>