Where should ReactDOM be imported from?
Solution 1
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.
Solution 2
if you are using the latest version of react (v18 onwards), the react and react statement has been updated. Earlier (till v17.0.2 ) it was:
import React from 'react';
import ReactDOM from 'react-dom';
currently (since v18.0.0 ) it is:
import { React } from "react";
import { createRoot } from "react-dom/client";
Related videos on Youtube
Sergei Basharov
Updated on July 05, 2022Comments
-
Sergei Basharov about 2 years
After upgrading to version
0.14.2
, I see an error and recommendation to useReactDOM.render()
instead ofReact.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? -
cyrilluce over 7 yearsshould use
import * as ReactDOM from 'react-dom'
? -
seangwright about 7 years@cyrilluce This was the syntax that worked for me using
"react": "^0.14.3"
and"react-dom": "^0.14.3"
-
Saad almost 7 years
import ReactDOM from 'react-dom'
should work just fine. You might need to doimport * as ReactDOM from 'react-dom'
if you're using TypeScript though. -
Edward over 6 yearsWhy do we need to use * as ReactDOM for typescript?