Where should ReactDOM be imported from?

Question

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?

score 130 · Accepted Answer · edited Jan 30 '17 at 13:21

130

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.

edited Jan 30 '17 at 13:21

John Weisz

30,137
13
89
132

answered Nov 06 '15 at 06:43

Saad

49,729
21
73
112

8

should use `import * as ReactDOM from 'react-dom'`? – cyrilluce Mar 12 '17 at 10:07
@cyrilluce This was the syntax that worked for me using `"react": "^0.14.3"` and `"react-dom": "^0.14.3"` – seangwright Apr 20 '17 at 03:17
`import ReactDOM from 'react-dom'` should work just fine. You might need to do `import * as ReactDOM from 'react-dom'` if you're using TypeScript though. – Saad Jul 20 '17 at 19:45
3

Why do we need to use * as ReactDOM for typescript? – Edward Mar 26 '18 at 04:35

score 5 · Answer 2 · edited May 12 '22 at 11:02

5

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";

edited May 12 '22 at 11:02

Devesh

603
2
11

answered May 11 '22 at 03:51

shashank

61
1
6

Where should ReactDOM be imported from?

2 Answers2