Currently Stack snippets use Babel version 6.10.3.

The following are unsupported:

* Async functions (`async`/`await`)
* Optional chaining (`?.`)
* Nullish-coalescing (`??`) and assignment (`??=`)

As a follow-up to T.J. Crowder's [awesome response](https://meta.stackoverflow.com/a/338538/1762224), I have crafted a template using React 18 and Bable 7.

My inspiration came from the following post:

> https://meta.stackoverflow.com/q/386096/1762224

Here is the snippet. Please note that I placed the JSX code inside the HTML viewport of the snippet editor. This is required so that Babel can process the JSX correctly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <div id="root"></div>
    <script type="text/babel" data-presets="es2017,react">
    /* BEGIN ES6 React code... */
    const { useCallback, useEffect, useState } = React;

    const App = ({ initialCount, step, title }) => {
      const [name, setName] = useState('...');
      const [count, setCount] = useState(initialCount ?? 0);

      useEffect(() => {
        (async () => {
          const response = await fetch('https://swapi.dev/api/people/1');
          const person = await response.json();
          setName(person?.name);
        })();
      }, []);

      const updateCount = useCallback((event) => {
        setCount((currentCount) => currentCount + step);
      }, []);

      return (
        <div className="App">
          <h1>{title}</h1>
          <p>{name}, you have clicked {count} times</p>
          <button onClick={updateCount}>
            Click me
          </button>
        </div>
      );
    };
    // Render it
    ReactDOM
      .createRoot(document.getElementById('root'))
      .render(<App initialCount={10} step={-1} title="Example using Hooks" />);
    /* END ES6 React code... */
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.1/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

<!-- end snippet -->