-1

I don't know if this is good place to ask this question but i just started studying reactjs and stuck in the beginning, here is the question.

I have installed node and Installed http-server from the npm command on the command prompt npm install -g http-server and went to the directory where is my static files and run command http-server and then to the browser hit localhost:8081.

Nothing happens/shows on browser but on command prompt it shows that its running and working properly, everytime i refresh browser then it shows on command prompt working. So why nothing happens on browser ?

here is the code: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
  <title>Demo</title>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
  <body>
     <div id="example">
  
     </div>
  
  <script type="text/babel">
ReactDOM.render(
          <h1>Something</h1>, document.getElementById('example'));
  
 
  
  </script>

  </body>
</html>
waleedd32
  • 473
  • 2
  • 9
  • 23

2 Answers2

1

If you are looking for an alternative/easy way to set up a react application without having to worry about the messy configuration settings from the beginning, then I recommend using facebooks create-react-app starter code.

I realize this does not help you if you wished to learn the setup process, but for jumping right into react routing and learning that it is a great resource! I start most of my web-applications using this. It can also be easily modified to implement express for when you delve even further into the world of web-dev. I believe the starter code is also set up with web-pack and supports hot-loading, so any changes you make will automatically be refreshed/reflected after hitting save and you do not need to restart/republish to the server!

On top of that, this book is also a great resource for learning react, the DOM, JS, Express, and the like. I read and worked through the last edition (published 2017?) and found it super useful, hopefully this newer edition holds the same reputation.

Web-pack in itself is another large topic, and I endorse you to read up on it's capabilities, functions, high level design/implementation and the like as it is really interesting! Happy transpiling!

plum 0
  • 652
  • 9
  • 21
0

It looks like there is an ongoing issue with http-server. However, we can fix this using this tweak.

Try accessing your file in localhost with the filename after running http-server command.

For example, if your file name is somefile.html, try accessing this file like http://localhost:8081/somefile.html

coderpc
  • 4,119
  • 6
  • 51
  • 93
  • this is error message i got on browser : This page isn’t working localhost sent an invalid response. ERR_INVALID_REDIRECT – waleedd32 Jun 21 '19 at 19:15
  • @waleedd32 I've updated my answer. Let me know if it worked for you. – coderpc Jun 21 '19 at 19:22
  • 1
    it worked thanks but why it does not work like this : localhost:8081 ? and do you know any other way doing this instead of 'http-server' ? – waleedd32 Jun 21 '19 at 19:26
  • @waleedd32 as per my understanding, there is an incompatibility issue with http-server version. It can be solved by downgrading the version of `http-server` using this command - `npm install -g http-server@0.9.0` – coderpc Jun 21 '19 at 19:29
  • why i need to refresh localhost everytime, isnt react automatic ? just saving and it should show it there without refresh – waleedd32 Jun 21 '19 at 19:30
  • You will need to follow [these steps](https://facebook.github.io/create-react-app/docs/getting-started) if you are configuring your react app in such a way you want to see the changes on the fly. – coderpc Jun 21 '19 at 19:33
  • why i have been downvoted ? this was proper question – waleedd32 Jun 23 '19 at 13:59