Question 73600 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can't get React to render most basic things – Reactjs

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?

Tags:

2

Answers


  1. 0

    You need add index.js to settings file package.json and customize command "start" in your scripts

    Login or Signup to reply.
  2. 0

    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'));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search