Я пробую базовое 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
<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>