Question

我刚开始学习反应。不使用Node.js

＆＃13;

var HelloWorld = React.createClass({
      render: function() {
          return ( 
            <p>Hello, {this.props.name}! </p>
          );
  }
});

ReactDOM.render(<HelloWorld name="Narayanan Arumugam" />,         
                document.getElementById("container"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="container"></div>

＆＃13;

上面的代码工作正常。现在，如何将Javascript代码片段添加到外部文件中，并将其称为scripts.js，并将其包含在index.html中。

我尝试将其添加到单独的文件中;有一个与index.html位于同一目录级别的scripts.js文件，并将JavaScript代码放在其中。尝试使用以下命令的文件。

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

但是我得到了一个空白页面。我做错了什么？

我希望能够分开我的课程

Answer 1

（1）请添加类似

的内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

（2）所有对我有用的工作都是index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<div id="container"></div>
<script src='c-s.js' type="text/babel"></script>

和c-s.js

var HelloWorld = React.createClass({
  render: function() {
      return ( 
        <p>Hello, {this.props.name}! </p>
      );
 }
});

ReactDOM.render(<HelloWorld name="Narayanan Arumugam" />,         
            document.getElementById("container"));

（3）当你刚运行index.html时，你会在控制台和空白屏幕上出现安全错误，就像这样

Fetching scripts with an invalid type/language attributes is deprecated and will be removed in M56, around January 2017. See https://www.chromestatus.com/features/5760718284521472 for more details.

browser.js:5773 XMLHttpRequest cannot load file:///C:/Users/sbt-dudkin-av/src/domize-0/c-s.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.  transform.load @ browser.js:5773

（4）如果你需要这项工作，从服务器加载它（例如，安装节点和http-server并在你的代码中运行'http-server'文件夹，然后在浏览器中运行'localhost：8085'）

没有node.js的react.js无法包含外部文件中可用的组件类

1 个答案: