Where should ReactDOM be imported from?

JavascriptReactjsBrowserify

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSergei BasharovView Question on Stackoverflow
Solution 1 - JavascriptSaadView Answer on Stackoverflow
Solution 2 - JavascriptshashankView Answer on Stackoverflow