In the new create-React-app, the hasJsxRuntime function in eject webpack.config.js can switch the JSX call mode

JSX Conversion (V16 version)

  • createElement(type, config, children) — ReactElement
    • generateprops(mergeconfig.defaultProps)
    • judgearguments, assignmentprops.childrenforchildArrayorchildren
    • detectionref.keyLegal (not undefined)
    • return ReactElement
      • createelement(i.e., JSX)
      • Write the attributes $$type, type, key, ref, props, _owner
      • $$typeof:REACT_ELEMENT_TYPEforisValidElementjudge
      • Type: The element itself (understood as a component function)
        • Native components. Eg: ‘div’
        • Functions (functions, class components, etc.). Eg: the App
        • The React components. Eg: React.StrictMode, Fragment

JSX Conversion (V17 version)

Now the props property has children, which is handled by Babel

  • jsx(type, config, maybeKey) — reactjsxelement.js
    • generateprops(Merge config, defaultProps)
      • configAttributes arechildren(Same as V16, but compiled by Babel)
    • Check ref, key valid (non-undefined)
    • return ReactElement (type, key, ref, self, source, owner, props) 
      • Creating Element (JSX)
      • Write the attributes $$type, type, key, ref, props, _owner
      • $$typeof:REACT_ELEMENT_TYPEforisValidElementjudge
      • Type: The element itself (understood as a component function)

conclusion

The image below shows the children processing in createElement of V16. V17 will be handled by Babel.