CODEWITHSUNDEEP
reactjsreact-dom
TheGreyBearded
TheGreyBearded

Reputation: 357

ReactDOM not rendering anything

index.html: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <script src='./index.js' type='text/babel'></script>
    <div id="root"></div>
  </body>
</html>

index.js:

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

ReactDOM.render(
    <h1>Hello world</h1>,
    document.getElementById('root')
);

The webpage is completely empty, tried reinstalling react and react-dom several times. There's no compilation errors from babel or node. The webpage is just empty.

Upvotes: 1

Views: 7723

Answers (3)

Sanjeev
Sanjeev

Reputation: 21

First you need to add react, reactdom, babel files in your index.html file.

Option 1: then you can able to see the output by moving the index.js script inside the index.html as below. where you can see the output by opening the index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div> 
    <script type="text/babel" >
        ReactDOM.render(
            <h1>Hi! My react App</h1>,
            document.getElementById('app')
        )
    </script>
  </body>
</html>

Option 2: Adding external js file: If you are adding some external react js file,

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div> 
    <script type="text/babel" src="index.js" >
    </script>
  </body>
</html>

index.js:

ReactDOM.render(
   <h1>Hi Now your react app works</h1>,
   document.getElementById('root')
);

first you have to create an http server. Else you will see some file load error in console something like Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Steps to create simple http-server using node:
 1) Install node JS -> https://nodejs.org/en/download/
 2) Run: npm install -g http-server
 3) Run: http-server [folderpath]   // folder path which contains index.html

once you started the http server, you will see the msg like below

 Starting up http-server, serving [folder name]
 Available on:
 http://127.0.0.1:8080
 http://192.168.1.6:8080

Now access the URL (http://127.0.0.1:8080) you could see the index.html output. Hope it helps!!!

Upvotes: 1

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

Here is the simple example to get started!

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8" />
        <title>React App</title>
        <script src="https://unpkg.com/react@latest/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
        <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
        <script type="text/babel">
                var ex = <h1>It worked!</h1>;
                ReactDOM.render(
                        ex,
                        document.getElementById('root')
                );
        </script>
</head>
<body>
        <div id="root"/>
</body>
</html>

Upvotes: 2

Damien Leroux
Damien Leroux

Reputation: 11693

Include the index.js after the dom element div creation:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src='./index.js' type='text/babel'></script>
  </body>
</html>

When index.js is executing, it requires the dom element to fill it with the react rendering

Upvotes: 0

Related Questions