Skip to main content
Active reading [<https://meta.stackoverflow.com/tags/stack-snippets/info> <https://en.wikipedia.org/wiki/Babel_(transcompiler)>]. Added some context.
Source Link
Peter Mortensen
  • 31.6k
  • 4
  • 22
  • 14

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>

Currently Stack snippets use Babel version 6.10.3 (circa June 18, 2016).

The following ES7+ features are unsupported:

As a follow-up to T.J. Crowder's awesome response, I have crafted a template using React 18 and Bable 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 memoization.

.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>

Currently, Stack Snippets use Babel version 6.10.3 (circa June 18, 2016).

The following ES7+ features are unsupported:

As a follow-up to T.J. Crowder's awesome response, I have crafted a template using React 18 and Babel 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 memoization.

.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>
added 100 characters in body
Source Link
Mr. Polywhirl
  • 48.4k
  • 12
  • 5

Currently Stack snippets use Babel version 6.10.36.10.3 (circa June 18, 2016).

The following ES7+ features are unsupported:

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 memoization.

.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>

Currently Stack snippets use Babel version 6.10.3.

The following are unsupported:

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 memoization.

.App button:last-child {
  margin-left: 0.5rem;
}
<div id="root"></div>
<script type="text/babel" data-presets="es2017,react">
/* BEGIN ES2017 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 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>

Currently Stack snippets use Babel version 6.10.3 (circa June 18, 2016).

The following ES7+ features are unsupported:

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 memoization.

.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>
added 79 characters in body
Source Link
Mr. Polywhirl
  • 48.4k
  • 12
  • 5
  • Async functions (async/await)
  • Optional chaining (?.)
  • Nullish-coalescing (??) and assignment (??=)
  • Shorthand for <React.Fragment> (<></>)
.App button:last-child {
  margin-left: 0.5rem;
}
<div id="root"></div>
<script type="text/babel" data-presets="es2017,react">
/* BEGIN ES2017 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 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>
  • Async functions (async/await)
  • Optional chaining (?.)
  • Nullish-coalescing (??) and assignment (??=)
.App button:last-child {
  margin-left: 0.5rem;
}
<div id="root"></div>
<script type="text/babel" data-presets="es2017,react">
/* BEGIN ES2017 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 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>
  • Async functions (async/await)
  • Optional chaining (?.)
  • Nullish-coalescing (??) and assignment (??=)
  • Shorthand for <React.Fragment> (<></>)
.App button:last-child {
  margin-left: 0.5rem;
}
<div id="root"></div>
<script type="text/babel" data-presets="es2017,react">
/* BEGIN ES2017 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 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>
added 6 characters in body
Source Link
Mr. Polywhirl
  • 48.4k
  • 12
  • 5
Loading
added 430 characters in body
Source Link
Mr. Polywhirl
  • 48.4k
  • 12
  • 5
Loading
Source Link
Mr. Polywhirl
  • 48.4k
  • 12
  • 5
Loading
Post Made Community Wiki by Mr. Polywhirl