After upgrading to version 0.14.2
, I see an error and recommendation to use ReactDOM.render()
instead of React.render()
, but whence do I import it?
When I don't import it and just running as it is, it shows it as undefined
. Is it a built-in functionality or is it a 3rd party library?
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 provides the developers with an API containing the methods such as render(), findDOMNode(), unmountComponentAtNode(), hydrate(), and createPortal().
Show activity on this post. import React from 'react'; import ReactDOM from 'react-dom'; import * as ReactDOMClient from 'react-dom/client'; import Switch from './components/Switch'; const root = ReactDOMClient. createRoot(document. getElementById('root')); root.
The reason React and ReactDOM were split into two libraries was due to the arrival of React Native. React contains functionality utilised in web and mobile apps. ReactDOM functionality is utilised only in web apps.
With the new update, all the DOM stuff you do should be done with ReactDOM
instead of React
. It's a separate module.
Do npm install react-dom
and then, if you're using ES6, you can do:
import ReactDOM from 'react-dom';
or if you're using ES5 you can just do:
var ReactDOM = require('react-dom');
and then you can use ReactDOM.render()
, ReactDOM.findDOMNode()
, etc in your code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With