The templates should use the JSX runtime transform for React

[lemonmade]

Currently, the template imports the default export from React: https://github.com/Shopify/shopify-cli-extensions/blob/main/create/templates/shared/checkout_ui_extension/react.js#L1

This is an older pattern that prevents us from producing more optimized builds in the future (more detail from React’s release notes: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). It’s also more annoying for developers, because they need to manually include the React import in every file that uses JSX.

The previous version of the extension CLI did not require this import, and used the jsx-runtime way of creating React elements: https://github.com/Shopify/ui-extensions/blob/main/packages/checkout-ui-extensions-run/src/webpack-config.ts#L207-L213 / https://github.com/Shopify/checkout-ui-extensions-template/blob/main/scripts/generate/templates/checkout/src/index.tsx

[vividviolet]

Is this a duplicate of #127?

[lemonmade]

It is, thank you for pointing that out!