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
I did whatever was instructed. I might have missed something but I don't know how to rectify this one. — EdG
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
@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
When I am selecting "open in browser" from "view menu" for helloworld.html, then also nothing is happening. — EdG

Vivian Vivian · Accepted Answer · 2016-08-02T08:48:22

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!:

React starter kit Hello World program error

1 Answers