Q:

How do I create a React Stack Snippet with JSX support?

In the Stack Snippets editor, I can see a drop-down box for including a version of React, but how do I actually create a snippet using React with JSX in it?
Return to FAQ index

A:

Here's a step-by-step guide, first summary, then details with pictures. There are a couple of live demonstration snippets after the detailed instructions.
Summary:

Open the Stack Snippets editor by clicking the  toolbar button.

Pick your desired React version from the drop-down on the left-hand side. (See the details below if you don't see the version you need in the list.)

Tick the Use BabelJS / ES2015 checkbox; it doesn't say explicitly, but this is what enables JSX support, as the Babel configuration used includes JSX handling.

If you're not going to use the in-snippet console, this is a good time to un-tick that box.

If you have additional libraries, use the Add an external library button (or just script and link tags) to add them.

Add your code in the JavaScript panel.

If your code needs ajax, you can easily simulate it by using static data and setTimeout.

If you use Hooks, you can either use them directly on React (React.useState etc.) or to be more similar to how you probably use them in your real code, destructuring at the beginning (where you probably use import in your real code):
 const {useState} = React;

There's a Hooks example at the end of this answer.

At the end of your code, write a call to ReactDOM.render telling it what to render and where: If you're using the in-snippet console, be sure to define the HTML for an element in the HTML pane and target that element with the ReactDOM.render call; if you aren't, you can render directly to body if you like. (Rendering to body doesn't work if you use the in-snippet console because it overwrites the console's element.)

You're ready to run your React/JSX code! Click the Run button. Note that there may be a brief delay while scripts are loaded and the JSX is transpiled before your results appear in the results pane. As with any snippet, double-check that your snippet runs the way you mean it to (double-check the web console if not using the in-snippet console) and demonstrates what you want it to demonstrate (your specific issue, if asking a question; or the solution, if posting an answer).

Notes:

The version of Babel used by Stack Snippets doesn't support <> and </> for fragments, so use <React.Fragment> and </React.Fragment> instead.

The versions of React offered by the drop-down get out of date quickly, but you can easily edit to use an up-to-date version. For instance, if you select "React v16.6.3` from the drop-down, you can edit the script tags it includes to use v18.8.4 if you like.

Details:

Open the Stack Snippets editor by clicking the  toolbar button:

Pick your desired React version from the drop-down:

At the moment, the list goes up through v16.6.3. To use hooks and such, you'll need later versions. You can grab the latest from a CDN (like https://cdnjs.com/); use the "UMD" versions. For instance, to use v16.8.4:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Note: The version of Babel used by Stack Snippets doesn't support <> and </> for fragments, so use <React.Fragment> and </React.Fragment> instead.
Note: To use hooks, be sure to use v16.8 or later, and use const {useState} = React; and similar to get the hook functions; see the final example at the end of this answer.

Tick the Use BabelJS / ES2015 checkbox; it doesn't say explicitly, but this is what enables JSX support, as the Babel configuration used includes JSX handling:

If you're not going to use the in-snippet console, this is a good time to un-tick that box.

If you have additional libraries, use the Add an external library button (or just script and link tags) to add them:

(You can find just about everything hosted on a CDN somewhere, such as https://cdnjs.com/ [I have no affiliation with them].)

Add your code:

If our code needs ajax, you can easily simulate it with static data and setTimeout:
Instead of:
     fetch("/some/resource")
     .then(response => {
         if (!response.ok) {
             throw new Error("HTTP error " + response.status);
         }
         return response.json();
     })
     .then(data => {
         // ...use data here...
     })
     .catch(/*...*/);

you'd do:
     setTimeout(() => {
         // ...use data here...
     }, 800);

or if you need a promise:
     return new Promise(resolve => setTimeout(resolve, 800, {/*...data here...*/}));

If you use Hooks, you can either use them directly on React (React.useState etc.) or to be more similar to how you probably use them in your real code, destructuring at the beginning (where you probably use import in your real code):
 const {useState} = React;

There's a Hooks example at the end of this answer.

At the end of your code, write a call to ReactDOM.render telling it what to render and where.

If you're using the in-snippet console
 You'll want to define an element in the HTML box:

     <div id="react"></div>

 ...and then code the `ReactDOM` call like this, to render into that element:

     ReactDOM.render(
       <Thingy title="I'm the thingy" />,
       document.getElementById("react")
     );

 This is to leave the snippet console's element alone.

 Example (there's a live copy below as well):

 [![enter image description here][7]][7]

If not using the in-snippet console
You can still do the above, or alternately render directly to document.body:
  ReactDOM.render(
    <Thingy title="I'm the thingy" />,
    document.body
  );

Example (there's a live copy below as well):

You're ready to run your React/JSX code! Click the Run button. Make sure that the snippet runs and demonstrates the problem you're trying to show.

Note that there may be a brief delay while scripts are loaded and the JSX is transpiled before your results appear in the results pane. As with any snippet, double-check that your snippet runs the way you mean it to (double-check the web console if not using the in-snippet console) and demonstrates what you want it to demonstrate (your specific issue, if asking a question; or the solution, if posting an answer).

Live copy of rendering into an element and using the snippet console

// Example stateless functional component
const SFC = props => (
  <div>{props.label}</div>
);

// Example class component
class Thingy extends React.Component {
  render() {
    const {title} = this.props;
    console.log("rendered");
    return (
      <div>
        <div>{title}</div>
        <SFC label="I'm the SFC inside the Thingy" />
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Live copy of an example rendering directly to body
...which won't work with the in-snippet console (the console element will get overwritten):

// Example stateless functional component
const SFC = props => (
  <div>{props.label}</div>
);

// Example class component
class Thingy extends React.Component {
  render() {
    const {title} = this.props;
    return (
      <div>
        <div>{title}</div>
        <SFC label="I'm the SFC inside the Thingy" />
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Live example using Hooks
Note: See Step 2 in the Details above. To use hooks, you have to provide the React scripts explicitly, not via the drop-down, as the drop-down is outdated. See Step 2 for details.

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{title}</p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

