Febbweiss/springboot-react-webpack
1
0
Fork 0
mirror of https://github.com/Febbweiss/springboot-react-webpack.git synced 2026-03-05 06:35:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generated JS and CSS to the target/classes/static folder

Browse Source
This commit is contained in:
fecaille
2016-03-10 13:38:02 +01:00
parent 918f8fb20f
commit 4e5bb4f361
5 changed files with 10 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/templates/index.html
View File

@@ -3,8 +3,8 @@
<head lang="en">
<meta charset="UTF-8" />
<title>Comments channel</title>
<link rel="stylesheet" href="/css/bundle/react-bootstrap.css" />
<link rel="stylesheet" href="/css/bundle/comments.css" />
<link rel="stylesheet" href="/css/react-bootstrap.css" />
<link rel="stylesheet" href="/css/comments.css" />
</head>
<body>
@@ -16,9 +16,9 @@
<div th:replace="fragments/footer"></div>
<script src="/js/bundle/react-bootstrap.js"></script>
<script src="/js/bundle/comments.js"></script>
<script src="/js/jsx/app.js"></script>
<script src="/js/jsx/app.render.js"></script>
<script src="/js/react-bootstrap.js"></script>
<script src="/js/comments.js"></script>
<script src="/js/app.js"></script>
<script src="/js/app.render.js"></script>
</body>
</html>

7
src/main/webapp/css/comments.css
View File

@@ -1,7 +0,0 @@
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}

123
src/main/webapp/js/app.jsx
View File

@@ -1,123 +0,0 @@
'use strict';
var Comment = React.createClass({
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
);
}
});
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if( !text || !author ) {
return;
}
this.props.onCommentSubmit({author: author, text: text})
this.setState({author: '', text: ''});
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
}
});
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
handleCommentSubmit: function(comment) {
var comments = this.state.data;
comment.id = Date.now();
var newComments = comments.concat([comment]);
this.setState({data: newComments});
$.ajax({
url: this.props.url,
method: 'POST',
dataType: 'json',
data: comment,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
this.setState({data: comments});
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmit={this.handleCommentSubmit}/>
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map( function(comment) {
return (
<Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
)
}
});

4
src/main/webapp/js/app.render.jsx
View File

@@ -1,4 +0,0 @@
ReactDOM.render(
<CommentBox url="/api/comments" pollInterval={2000}/>,
document.getElementById('content')
);