Не удалось загрузить http://localhost: 3000 / js / app.jsx

Question

Я пробую базовое c веб-приложение, чтобы получить представление о вещах на основе следующего урока https://www.freecodecamp.org/news/how-to-build-a-web-app-with-go-gin-and-react-cffdc473576/

До сих пор все работало хорошо (определены api, main. go и index. html), но теперь после добавления компонентов app.jsx я должен получить отрендеренный домашний компонент, но вместо этого получить следующую ошибку .

Uncaught Ошибка: не удалось загрузить http://localhost: 3000 / js / app.jsx в XMLHttpRequest.xhr.onreadystatechange (babel. js: 61552)

(вышеуказанная ошибка отображается в консоли chrome, перейдите по ссылке ниже, чтобы увидеть скриншот localhost)

blob: { ссылка }

/ * Также получало предупреждение

[GIN-debug] [ПРЕДУПРЕЖДЕНИЕ] Работает в режиме «отладки». Переключитесь в режим «релиз» в производственном процессе.

(много искал и пытался найти сборку, менеджер конфигурации, без стандартной панели инструментов или выпадающий в конце добавленный gin.SetMode (gin.ReleaseMode) в основной функции, но вышеупомянутая ошибка все еще сохраняется!) * /

// Основная функция и обработчики в основном. 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>