CODEWITHSUNDEEP
javascriptreactjs
bsky
bsky

Reputation: 20242

React how to connect JS file with HTML file

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?

Upvotes: 4

Views: 22896

Answers (4)

Giridhar Bandi
Giridhar Bandi

Reputation: 1323

Here is how I get it working add the following script

<script src="https://npmcdn.com/[email protected]/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

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67336

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.

Upvotes: 3

Fran&#231;ois Richard
Fran&#231;ois Richard

Reputation: 7055

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

Upvotes: 1

Nicholas Ang
Nicholas Ang

Reputation: 11

You should not place a slash before "listTree".

So your script tag should look like this:

<script src="listTree/TreeNode.js"></script>

Upvotes: 0

Related Questions