Currently, Stack snippetsSnippets use BabelBabel version 6.10.3 (circa June 18, 2016).
The following ES7+ES7+ features are unsupported:
As a follow-up to T.J. Crowder's awesome response, I have crafted a template using React 18 and BableBabel 7.
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. I added examples of callbacks, effects, states, and memoizationmemoization.
.App button:last-child {
margin-left: 0.5rem;
}
<div id="root"></div>
<script type="text/babel" data-presets="es2017,react">
/* BEGIN ES2017 (ES8) React code... */
const { useCallback, useEffect, useMemo, useState } = React;
const App = ({ initialCount = 0, step = 1, title = 'APP_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);
}, []);
const resetCount = useCallback(() => {
setCount(initialCount);
}, [initialCount]);
const clickDisabled = useMemo(() => count <= 0, [count]);
return (
<div className="App">
<h1>{title}</h1>
<p>{name}, you have {count} tries left.</p>
<>
<button disabled={clickDisabled} onClick={updateCount}>Click me</button>
<button onClick={resetCount}>Reset</button>
</>
</div>
);
};
// Render it
ReactDOM
.createRoot(document.getElementById('root'))
.render(<App initialCount={10} step={-1} title="Example using Hooks" />);
/* END ES2017 (ES8) 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>