Confusion with default import of React

Question

To import React we write import React from 'react'.

But this is a default export right ? So if I change its name to something else other than React it should also work. But it doesn't work. Can anyone please explain why?

Answer 1

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.