All geek questions in one place

Responsive to connecting js file with html file

I have a React JS file that displays the following:

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

I reference it from an HTML file as follows:

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

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

<h3>It <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 have no experience with JavaScript. Why is this happening?

+4
source share
4 answers

Your script already selects the treediv element . Thus, there is no need to place the script tag inside the div tag.

<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="app/listTree/treenode.css">
   </head>
   <body>
      <h3>It <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 also lack tags <head>and <body>html.

In addition, if you want to display jsx in your React code, you also need to add tags <script>(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 <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:

, , ( . Treenode.js :

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

. Testing... rendered, , .

+2

, script

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

'text/babel'

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

js

.jsx

.

+1

Try loading the script after your div, not inside

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

You also need to download React.

0
source

You should not put a slash in front of "listTree".

So the script tag should look like this:

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

Source: https://habr.com/ru/post/1608652/

More articles:


All Articles