Question

在Terminal中，我在相应的目录中使用了http-server，这样当我点击cmd + s时，我就可以看到我的练习网络应用了 - ＆gt; cmd + r。今天，我决定继续，但我不能。

在服务器http://192.168.1.8:8080上，我的页面正常显示。但是当我对其进行更改然后执行cmd + s - ＆gt; cmd + r检查出来，没有任何变化。一切都保持不变。

在服务器http://127.0.0.1:8080上，该页面完全空白。即使我尝试对其进行更改，也没有任何反应。只是一个空白的屏幕。

这是我的index.html文件：

<!DOCTYPE html>
<html>

  <head>
     <title>My practice web app</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>

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

  </body>

</html>

这是我的index.js文件：

var Website = React.createClass({

   scrolling: function() {
     $('html,body').animate({
         scrollTop: $(".scrollToPortfolio").offset().top
        },'slow');
   },

   scrollToAbout: function() {
     $('html,body').animate({
       scrollTop: $(".scrollToAbout").offset().top
     },'slow');
   },

  render: function() {
    return(

      <div className="container">
      <kbd className="fullName">My practice web app</kbd>
        <button onClick={this.scrolling} type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button onClick={this.scrollToAbout} type="button" className="btn btn-primary about">About</button>
        <button type="button" className="btn btn-primary contact">Contact</button>

        <div className="trainPic">
        <img src={"./pictures/myPic3.JPG"} className="myPic"></img>
        </div>

        <div className="scrollToPortfolio">
          <h1>Portfolio</h1>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
        </div>

        <div className="scrollToAbout">
          <h1>About</h1>
          <h2>Text</h2>
          <h2>Text</h2>
        </div>
      </div>
    );
  }
});

ReactDOM.render(<Website/>, document.getElementById('firstBar'));

这是我的Terminal服务器：

Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.1.8:8080

这是我在空白页面上遇到的错误（http://127.0.0.1:8080）：

Uncaught SyntaxError: http://127.0.0.1:8080/index.js: Unexpected token (19:2)
at Parser.pp.raise (browser.js:2027)
at Parser.pp.unexpected (browser.js:2596)
at Parser.pp.expect (browser.js:2590)
at Parser.pp.parseObj (browser.js:1447)
at Parser.pp.parseExprAtom (browser.js:1250)
at Parser.parseExprAtom (browser.js:26392)
at Parser.pp.parseExprSubscripts (browser.js:1097)
at Parser.pp.parseMaybeUnary (browser.js:1079)
at Parser.pp.parseExprOps (browser.js:1035)
at Parser.pp.parseMaybeConditional (browser.js:1018)

为什么我的服务器（ReactJS）会出现空白屏幕？

0 个答案: