Can't get React to render most basic things

March 6, 2023

In the past week or so I’ve been following several tutorials to learn React. However every tutorial I follow ends up in the same problem. I’m sure there is something stupid I’m missing, like an install or something most developers would always have installed so it isn’t mentioned in tutorials.

The following is the most recent example I’ve tried and comes from FreeCodeCamp’s tutorial video "Learn React by Building an eCommerce Site – Tutorial" at around 40 minutes into the video they show a simple Hello World code, only using index.js with the code shown below:

import React from "react";
import { ReactDOM } from "react-dom";

var element = <div>Hello World!</div>;

ReactDOM.render(element, document.getElementById('root'));

When I run this code using npm start nothing gets rendered on the screen:
Nothing renders

I’ve been trying several methods of calling ReactDOM.render(), none has gotten anything to render.
The standard example you get when using npx create-react-app does render however.
Does anyone have any idea what I’m doing wrong?

>Solution :

You need to fix your import statement:
import ReactDom from "react-dom"; instead of import { ReactDOM } from "react-dom";

I would also recommend using let instead of var.

Updated code:

import React from "react";
import ReactDOM from "react-dom";

let element = <div>Hello World!</div>;

ReactDOM.render(element, document.getElementById('root'));