ReactJS: render with ReactJSX syntax on javascript file?

Question

I want to use JSX syntax on render, but it is not recognized if I try to use it on .js file.

It does render using object notation though.

Using this:

html:

<!DOCTYPE html>
<html>
<head>
    <style media="screen">
      .demo {
        border: 1px solid #ccc;
        margin: 1em;
        padding: 1em;
      }
    </style>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@latest/dist/react.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="js"></div>
<div id="react"></div>
<div id="react2"></div>
<script type="text/javascript" src="react-demo.js"></script>
</body>
</html>

Now react-demo.js file:

(function(){
"use strict";
/* global React ReactDOM*/
const render = () => {
const jsContainer = document.getElementById("js");
jsContainer.innerHTML = `
  <div class="demo">
    Hello JS
    <input>
    <p>${new Date()}</p>
  </div>
`;
const reactContainer = document.getElementById("react");
ReactDOM.render(
    React.createElement(
        "div",
        { className: "demo" },
        "Hello React",
        React.createElement('input'),
        React.createElement('p', null, new Date().toString())
    ),
    reactContainer
  );
  ReactDOM.render(<p>Hello Here</p>, document.getElementById('react2'))
}
setInterval(render, 1000)

})();

When I run it, I get this error:

Uncaught SyntaxError: Unexpected token < And it points to this line: ReactDOM.render(<p>Hello Here</p>, document.getElementById('react2'))

Now I read I need to change script type to text/babel. But doing that gives me this error:

XMLHttpRequest cannot load file:///home/oerp/js-programs/react-demo/react-demo.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

But I'm merely loading local file. Why does it work that way with babel type?

Though I was able to use JSX syntax directly on html like:

<script type="text/babel">

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

</script>

But I do want to put rendering on js file, not on html file.

Possibly duplicate of https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx ? — mplungjan, Jul 30 '17 at 11:16

score 0 · Answer 1 · answered Jul 30 '17 at 17:42

So the issue with babel type is that it can't be used locally using file type. It has to be from allowed types only, like http, https, data etc.

So the simplest approach would be to create local http server (to serve related html and js files). Like:

python -m SimpleHTTPServer

And then this works:

<script type="text/javascript" src="react-demo.js"></script>

Then I can use text/babel using specified file instead of just using it directly on html.

P.S. How to launch html using Chrome at "--allow-file-access-from-files" mode? answer by orszaczky helped me solve this.

score -3 · Answer 2 · answered Jul 30 '17 at 11:18

-3

Use type babel for react script.

<script type="text/javascript" src="react-demo.js"></script> - native javascript

<script type="text/babel" src="react-demo.js"></script> - it`s react js

answered Jul 30 '17 at 11:18

Lapapa

1
4

OP has indicated they did that. The issue is the loading of a local file via xhr, which needs to be explicitly allowed. – Dave Newton Jul 30 '17 at 12:57
No, the OP explicitly states they used the type. The error message is also quite clear-loading a local file via xhr requires a flag in Chrome (don't know about other browsers). OP's code shows the type is set to what you've suggested. – Dave Newton Jul 30 '17 at 17:26

ReactJS: render with ReactJSX syntax on javascript file?

2 Answers2