When importing react and reactDOM I have always seen:
import React from 'react';
import ReactDOM from 'react-dom';
Can I name React and ReactDOM something else?
Add a comment
|
1 Answer
React
For React, you must import React from 'react'. You need to import the default, and you need to name it React. This is because anytime you write JSX code like <MyComponent /> or <App />, this JSX code is transpiled and uses React.createElement(). So, you need to have access to the React object as it is named.
ReactDOM
For ReactDOM, however, you are probably mostly concerned with the DOM-related methods that are part of the default export, methods like render() or hydrate(). Because that's what you'll probably be using, you can name your import module anything you want. So, you could do something like this:
import FooBar from 'react-dom'
FooBar.render(someElement)
This does work, but the standard convention is to call the imported module ReactDOM, as that would make your code more understandable to anyone else looking at it.
Additional resources:
1 Comment
kmui2
Just an update: React 17 and some older specified major versions now include a new JSX transform that does not require this explicit React import. See reactjs.org/blog/2020/09/22/…