无法加载 http://localhost:3000/js/app.jsx

Question

我正在尝试一个基本的网络应用程序，以根据以下教程了解事物 https://www.freecodecamp.org/news/how-to-build-a-web-app-with-go-gin-and-react-cffdc473576/

到目前为止，事情进展顺利（定义了 api、main.go 和 index.html），但现在在添加 app.jsx 组件后，我应该得到渲染的 home 组件，但却得到以下错误。

未捕获的错误：无法加载 http://localhost:3000/js/app.jsx 在 XMLHttpRequest.xhr.onreadystatechange (babel.js:61552)

（上面的错误在chrome的控制台显示，点击下面的链接可以看到localhost的截图）

blob:https://stackoverflow.com/793c356c-f0c3-4e20-bb2d-043a96aa0539

/* 也收到了警告

[GIN-debug] [警告] 在“调试”模式下运行。在生产环境中切换到“发布”模式。

( 搜索了很多，试图找到构建，配置管理器，没有标准工具栏或下拉菜单 最后添加了 gin.SetMode(gin.ReleaseMode) 在 main 函数中，但上述错误仍然存​​在！）*/

// main.go中的主要函数和处理程序

 func main() {
    router := gin.Default()

    router.Use(static.Serve("/", static.LocalFile("./views", true)))

    api := router.Group("/api")
    {
        api.GET("/", func(c *gin.Context) {
            c.JSON(http.StatusOK, gin.H{
                "message": "pong",
            })
        })
    }

    api.GET("/quotes", QuoteHandler)
    api.POST("/quotes/like/:quoteID", LikeQuote)

    gin.SetMode(gin.ReleaseMode)

    router.Run(":3000")
}

// QuoteHandler retrieves a list of available quotes
func QuoteHandler(c *gin.Context) {
    c.Header("Content-Type", "application/json")
    c.JSON(http.StatusOK, gin.H{
        "message": "Quotes handler not implemented yet",
    })
}

// LikeQuote increments the likes of a particular quote Item
func LikeQuote(c *gin.Context) {
    c.Header("Content-Type", "application/json")
    c.JSON(http.StatusOK, gin.H{
        "message": "LikeQuote handler not implemented yet",
    })
}

//app.jsx

 class App extends  React.Component {
    render() {
        if(this.loggedIn){
            return (<LoggedIn/>);
        }
        else {
            return (<Home/>);
        }
    }
}

class Home extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="col-xs-8 col-xs-offset-2 jumbotron text-center">
                    <h1>Snippet n Sparks</h1>
                    <p>Snippets of quotes sparking life</p>
                    <p>Sign in to get access</p>
                    <a onClick={this.authenticate} className="btn btn-primary btn-lg btn-login btn-block">Sign In</a>
                </div>
            </div>
        )
    }
}

class LoggedIn extends React.Component {
    constructor(props) {
     super(props);
    this.state = {
        quotes: []
    }
    }

render() {
    return (
        <div className="container">
            <div className="col-lg-12">
                <br/>
                <span className="pull-right"><a onClick={this.logout}>Log out</a></span>
                <h2>Snippet n Sparks</h2>
                <p>Let's feed you with some inspirational quotes!!</p>
                <div className="row">
                    {this.state.quotes.map(function(quote, i){
                        return (<Quote key={i} quote={quote} />);
                    })}
                </div>
            </div>
        </div>
    )
}
}

class Quote extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: ""
        }
        this.like = this.like.blind(this);
    }

    like() {
        //..we'll add this b;lock later
    }

    render() {
        return(
            <div className="col-xs-4">
                <div className="panel panel-default">
                    <div className="panel-heading">#{this.props.joke.id} <span className="pull-right">{this.state.liked}</span></div>
                    <div className="panel-body">
                        {this.props.quote.quote}
                    </div>
                    <div className="panel-footer">
                        {this.props.quote.likes} Likes &nbsp;
                        <a onClick={this.like} className="btn btn-default">
                            <span className="glyphicon glyphicon-thumbs-up"></span>
                        </a>
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

//index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Snippet n sparks</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdn.auth0.com/js/auth0/9.0/auth0.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  <script type="text/babel" src="js/app.jsx"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

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

Answer 1

来自 mkopriva 的 cmets ~Feb 19/20，OP 说解决了这个问题：

确保你遵循这个：

然后我们需要在views/js 目录中创建一个app.jsx 文件，其中将包含我们的React 代码。”

-mkopriva

---

是的，app.jsx 和 index.html 在视图目录中
- 精明

这是错误的，app.jsx 不应该在views 目录下，它应该 在views/js 目录中

-mkopriva

---

只有 jsx 文件应该在 views/js 下。 index.html 应该还在原处。即views/js/app.jsx和views/index.html

-mkopriva