CODEWITHSUNDEEP
reactjs
Einat Lugassy
Einat Lugassy

Reputation: 77

ReactDOM does not render a simple div

I'm trying to render a simple div on the main html file using ReactDOM render method, but the div is not rendered on the screen and there are no exceptions thrown. Am I doing it wrong?

app.js:

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

ReactDOM.render(
  <h1> Hi! </h1>, document.getElementById('root')
);

index.html:

<!doctype html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1> Hello World! </h1>
    <div id="root"></div> 
  </body> 
</html>

The screen only shows the "Hello World!" h1 tag.

I'm also using webpack webpack dev server and Babel.

Upvotes: 0

Views: 2552

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Reason is you forgot to include your bundle.js file in html, add this line in body:

<script src = "bundle.js"></script>

Try this:

<!DOCTYPE html>
<html>
   <head>
      <title>Example</title>
   </head>
   <body>
      <h1> Hello World! </h1>
      <div id="root"></div> 
      <script src = "bundle.js"></script>
   </body>
</html>

Instead of <!doctype html> use <!DOCTYPE html>.

bundle.js: When you run webpack, it starts the process from the entry point you defined in webpack.config.js, It will compile all your files and create a bundle file. You need to include that bundle in html file.

Note: change the path and file name if you are using name other than bundle.js.

Check this answer for user defined components: Simple Component is not rendering: React js

Upvotes: 1

Related Questions