CODEWITHSUNDEEP
javascripthtmlreactjs
bsky
bsky

Reputation: 20222

React can not access JS code from HTML

I am trying to create list with React, so I am using the module from here https://github.com/pqx/react-ui-tree

I am trying the sample application: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js

This application renders the following: React.render(, document.getElementById('app'));

In the same folder, I have an HTML file within which I try to display the tree created by the sample app:

<!doctype html>
<html lang="en">
<head>
    <script src="http://fb.me/react-0.13.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
</head>
<body>

<script src="app.js" type="javascript"></script>

<div id="tree">
</div>

</body>
</html>

However, when I open the HTML page in the browser, nothing is rendered. I don't have much experience with Javascript or React.

Why is this happening?

Do I need to use Gulp or some other tool?

Upvotes: 0

Views: 94

Answers (1)

Quentin
Quentin

Reputation: 943515

<script src="app.js" type="javascript"></script>

The MIME type for JavaScript is application/javascript (or the legacy text/javascript). Browsers do not recognise the non-standard javascript MIME type so will ignore the script.

This error would have been picked up if you had used the validator.

Omit the type attribute entirely. HTML 5 makes it optional and it defaults to JavaScript.

Your next problem is:

React.render(<App/>, document.getElementById('app'));

You have no element with that ID in your document.

You have one with the id tree, but that appears after the script, so won't exist at the time you run the script.

Upvotes: 1

Related Questions