CODEWITHSUNDEEP
node.jsreactjslocalhost
Farhan Ansari
Farhan Ansari

Reputation: 299

Getting Blank page on localhost:3000 while using npm along with reactjs

enter image description here

    var express = require ('express');

//create our app
var app = express();

app.use(express.static('public'));

app.listen(3000,function(){

  console.log('Sever is up  on port 3000');

});

This is code of Server.js file. 

<!DOCTYPE html>
<html>

  <head>
      <meta charset="UTF-8"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

  </head>

<body>

  <script type="text/babel" src="app.jsx"></script>


</body>
</html>

Code of index.html file

var Greeter = React.createClass({

  render: function(){
    return(
    <div>
      <h1> Howdy! </h1>
    </div>
    );
}
});


ReactDOM.render(
<Greeter/>,
  document.getElementbyId('app')
);

Code of app.jsx file

where is error? i don't find any error. But when I am opening http://localhost:3000, I am getting a blank page. Am using Windows 10 and node -v 6.9.1

Any help would be highly appreciated! Thanks.

Upvotes: 0

Views: 8597

Answers (4)

Dhruvdutt Jadhav
Dhruvdutt Jadhav

Reputation: 428

Try babel 5.8.23.

You forgot to put in the app HTML element.

<div id="app"></div>

Also, there's a typo in getElementById. The B should be caps.

ReactDOM.render(
  <Greeter/>,
  document.getElementById('app')
);

Upvotes: 1

duwalanise
duwalanise

Reputation: 1302

continued to the answer by @MayankShukla. Try adding script for babel transpiler to transform jsx code, include this reference:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script>

Upvotes: 0

Vignesh Murugan
Vignesh Murugan

Reputation: 575

Please update a Div with id as app since React is not able find an Div with id app

<div id="app"/>

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104529

You forgot to add html element with id='app', Include this in html file, it will work.

<div id="app"></div>

There is an error in this part:

ReactDOM.render(
     <Greeter/>,
     document.getElementbyId('app')
);

check the spelling of getElementbyId, instead of that put this getElementById.

Upvotes: 2

Related Questions