Confusion with default import of React

Essentially, JSX compilers (like Babel/TypeScript) convert the JSX code to pure JavaScript.

For example, the following JSX code:

const Element = () => (
    <div>
        Hey there
    </div>
);

is compiled into:

const Element = () => (
    React.createElement("div", null, "Hey there")
);

Which is now valid JavaScript that can be parsed by the browser.

As you may have noticed, it uses the React.createElement function to create the div. This is why changing the name of the import doesn't work - the compiler still tries to use React.

Babel lets you configure this using the pragma option, if desired, allowing you to use a different function name.

TypeScript can do the same using the jsxFactory compiler option.