There’s a simple heuristic that JSX uses to determine what you’re trying to render.
<div /> becomes
React.createElement("div"). A string is used to create a host element (react-dom) by that name.
<MyDiv /> becomes
React.createElement(MyDiv). A function reference is used to create an element from a named component definition.
<Module.Component /> becomes
React.createElement(Module.Component). A function reference is used to create an element from a component definition, nested inside an object. (It also works with lowercase
props.componentName. Give it a try!)
But you can do more without JSX than you can with it.
For examples, there’s no JSX equivalent for a conditional:
React.createElement(someCondition ? FancyDiv : "div")
Take it home
How do you handle dynamic element creation?