How to use @babel/plugin-transform-react-jsx - 3 common examples

// don't work without it: https://github.com/babel/babel/issues/7215
      require('@babel/plugin-transform-destructuring').default,
      // class { handleClick = () => { } }
      require('@babel/plugin-proposal-class-properties').default,
      // The following two plugins use Object.assign directly, instead of Babel's
      // extends helper. Note that this assumes `Object.assign` is available.
      // { ...todo, completed: true }
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      // Transforms JSX
      [
        require('@babel/plugin-transform-react-jsx').default,
        {
          useBuiltIns: true
        }
      ],
      // Polyfills the runtime needed for async/await and generators
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true
        }
      ],
      // Remove PropTypes from production build
      isProduction && [require.resolve('babel-plugin-transform-react-remove-prop-types'), {
        removeImport: true
      }]

function jsx({ types, parse }) {
    /**
     * A list of already handled files.
     * @type {Array}
     * @private
     */
    const HANDLED = [];

    return {
        // extends the default jsx plugin
        inherits: require('@babel/plugin-transform-react-jsx').default,
        visitor: {
            Program(path) {
                // store the Program path
                this.program = path;
            },
            JSXElement(path, state) {
                const filename = path.hub.file.opts.filename;
                const { pragma, moduleName, defaultImport } = state.opts;

                if (!moduleName) {
                    // module name is not specified.
                    return;
                }

                if (HANDLED.includes(filename)) {
                    // file already handled