React starter kit Hello World program error

Question

I am trying to make an "Hello World" program as suggest on react tutorial.

But I created helloworld.js under src and helloworld.html in root. When I try to run my helloworld.html nothing happens (at all). And when I try to run helloworld.js error described below comes.

Is it some issue with babel?

Did you follow the instructions in the readme to properly set up? — ajmajmajma, Aug 01 '16 at 19:05
I did whatever was instructed. I might have missed something but I don't know how to rectify this one. — EdG, Aug 01 '16 at 19:08
what does your helloworld.html look like? the error in screenshot is expected, as you are trying to run JSX code that is supposed to be run in browser as if it's a pure JS node application — lena, Aug 01 '16 at 19:34
@lena I added screenshot of my html. If that error is expected then how am I supposed to run my program to see the output "Hello World" — EdG, Aug 01 '16 at 20:37
When I am selecting "open in browser" from "view menu" for helloworld.html, then also nothing is happening. — EdG, Aug 01 '16 at 20:43
You are using ES6 syntax but as far as I can tell have no transpiler to convert it to something viewable in a browser. The actual error you are getting sugguests you havent turned on es6 in the editor — undefined, Aug 01 '16 at 23:08
ECMAscrip6 is ticked in library section. I have also set Java Script Language version to "JSX Harmony". I have read that " some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP." Is it the case. If so how can I solve it. — EdG, Aug 02 '16 at 08:22

Vivian · Answer 1 · 2016-08-02T09:24:59.710

0

Your first question, why helloworld.html returns nothing at all: You should not need to add src="src/helloworld.js" in the tag. Otherwise the will try to load your helloworld.js (which causes your second question). I have created a plunker - it works without the src="src/helloworld.js"

html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>test</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Demo: http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview

For your second question. I guess you try to separate the script to a new file out from the helloworld.html. You do not need import because you add the react.js and react-dom.js in the html's head tag already. ReactDOM.render is already known when you load the src/helloworld.js from the script tag.

html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" src="src/helloworld.js">
    </script>
  </body>
</html>

src/helloworld.js

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

Demo: http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview

Edit:

Click on the browser, for example, I clicked Chrome and got Hello World!:

edited Aug 02 '16 at 09:24

answered Aug 02 '16 at 08:48

Vivian

138
2
5

file:///root/WebstormProjects/Tessact-React-Front/helloworld.html – EdG Aug 02 '16 at 09:05
I did exact thing you said. Gives File not found in chrome. – EdG Aug 02 '16 at 09:06
1

The fact that you are on file:/// makes me think you are not behind any web server. Are you using webstorm to open the html file? – Vivian Aug 02 '16 at 09:21
Yes I am using Webstorm – EdG Aug 02 '16 at 09:29
I edited my answer, if you also click the chrome on the right hand panel in webstorm, do you have a page launched in chrome like I have got? – Vivian Aug 02 '16 at 09:30
No. Page launches in chrome. But it says File not found. – EdG Aug 02 '16 at 09:36
I am using react starter kit. When I tried making an empty project like you did and putting helloworld.html in it, then it worked just like your's. How can I make it work with starter kit – EdG Aug 02 '16 at 09:40
Ok. I see now. With React Starter Kit, you do not add the html file and the js file in the way you did in your question. To solve your problem step by step, firstly, have you run two commands "npm install" and "npm start" in your project folder ? – Vivian Aug 02 '16 at 09:56
Where should I add them then? – EdG Aug 02 '16 at 10:22
You could open a command prompt with admin right. Go to your react-starter-kit project folder, than you type "npm install". – Vivian Aug 02 '16 at 10:36
I am still struggling with the setup. Running npm install give one or other errors like "babel-eslint requires a peer of eslint < "2.2.0, which is not insatalled". And when I install eslint < "2.2.0", eslint-config-airbnb has peer dependency on eslint 2.2.0. I really don't know what's wrong – EdG Aug 03 '16 at 08:24

React starter kit Hello World program error

1 Answers1