Source:  Twitter logo

I have a React JS file which renders the following:

React.render(
    <TreeNode node={tree} />,
    document.getElementById("tree")
);

I reference it from a HTML file in the following way:

<!doctype html>
<html lang="en">

<link rel="stylesheet" href="app/listTree/treenode.css">

<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
    <script src="/listTree/TreeNode.js"></script>
</div>

</html>

However, the contents of the JS file are not displayed.

I don't have experience in working with JavaScript. Why is this happening?

Your script is already selecting the tree div element. So, there is no need to put a script tag inside of the div tag.

<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="app/listTree/treenode.css">
   </head>
   <body>
      <h3>It's <code>TreeNodes</code> all the way down</h3>
      <p>Edit the <code>tree</code> variable to change the tree</p>
      <div id="tree">
      </div>
      <script src="listTree/TreeNode.js" type="text/jsx"></script>
   </body>
</html>

You are also missing the <head> and <body> html tags.

Further, if you want to render jsx in your React code, you need to add <script> tags for them as well (and type="text/jsx" as a tag attribute):

<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="app/listTree/treenode.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
   </head>
   <body>
      <h3>It's <code>TreeNodes</code> all the way down</h3>
      <p>Edit the <code>tree</code> variable to change the tree</p>
      <div id="tree">
      </div>
      <script src="listTree/TreeNode.js" type="text/jsx"></script>
   </body>
</html>

EDIT:

As a test to make sure your environment is working (and you don't just have a problem in your Component. Try to replace the code inside Treenode.js with this:

React.render(
    <div>Testing...</div>,
    document.getElementById("tree")
);

Then, you have no external dependencies. If you see Testing... rendered, you know that the environment is set up correctly.

3 users liked answer #0dislike answer #03
Davin Tryon profile pic
Davin Tryon

Try to load your script after your div and not inside

<div id="tree">
</div>
<script src="/listTree/TreeNode.js"></script>

You need to load React also

1 users liked answer #1dislike answer #11
François Richard profile pic
François Richard

Here is how I get it working add the following script

<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

and change the type to 'text/babel'

<script type="text/babel" src="script.js"></script>

and the external js file should be with

.jsx

extension

please see working example here

1 users liked answer #2dislike answer #21
Giridhar Bandi profile pic
Giridhar Bandi

You should not place a slash before "listTree".

So your script tag should look like this:

<script src="listTree/TreeNode.js"></script>
0 users liked answer #3dislike answer #30
Nicholas Ang profile pic
Nicholas Ang

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).