I'm trying out a basic web app to get a sense of things based on the following tutorial https://www.freecodecamp.org/news/how-to-build-a-web-app-with-go-gin-and-react-cffdc473576/
So far things worked out well (defined api,main.go and index.html) but now after adding the app.jsx components I'm supposed to get the rendered home component but instead get the following error.
Uncaught Error: Could not load http://localhost:3000/js/app.jsx at XMLHttpRequest.xhr.onreadystatechange (babel.js:61552)
(the above error is displayed in the console of chrome , follow the link below to see the screenshot of localhost )
blob:https://stackoverflow.com/793c356c-f0c3-4e20-bb2d-043a96aa0539
/* Was also getting the warning
[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
( searched a lot and tried to find build, configuration manager,no standard toolbar or drop down at the end added gin.SetMode(gin.ReleaseMode) in main function but the above mentioned error still persists !) */
// Main function and handlers in 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
<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/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/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>
