mirror of
https://github.com/Febbweiss/springboot-react-webpack.git
synced 2026-03-05 06:35:36 +00:00
Feature: using webpack instead of wro
This commit is contained in:
@@ -1,5 +1,10 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react'),
|
||||
ReactDOM = require('react-dom'),
|
||||
marked = require('marked'),
|
||||
$ = require('jquery');
|
||||
|
||||
var Comment = React.createClass({
|
||||
rawMarkup: function() {
|
||||
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
|
||||
@@ -57,6 +62,7 @@ var CommentForm = React.createClass({
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var CommentBox = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {data: this.props.data || []};
|
||||
@@ -120,4 +126,11 @@ var CommentList = React.createClass({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
CommentBox: CommentBox,
|
||||
CommentList: CommentList,
|
||||
CommentForm: CommentForm,
|
||||
Comment: Comment
|
||||
};
|
||||
@@ -1,4 +1,14 @@
|
||||
var renderClient = function (comments) {
|
||||
"use strict";
|
||||
|
||||
var React = require('react'),
|
||||
ReactDOM = require('react-dom'),
|
||||
ReactDOMServer = require('react-dom/server'),
|
||||
CommentBox = require('./app.jsx').CommentBox;
|
||||
|
||||
|
||||
require('bootstrap/dist/css/bootstrap.css');
|
||||
|
||||
global.renderClient = function (comments) {
|
||||
var data = comments || [];
|
||||
ReactDOM.render(
|
||||
<CommentBox data={data} url="/api/comments" pollInterval={2000}/>,
|
||||
@@ -6,9 +16,10 @@ var renderClient = function (comments) {
|
||||
);
|
||||
};
|
||||
|
||||
var renderServer = function (comments) {
|
||||
global.renderServer = function (comments) {
|
||||
var data = Java.from(comments);
|
||||
return React.renderToString(
|
||||
return ReactDOMServer.renderToString(
|
||||
<CommentBox data={data} url="/api/comments" pollInterval={2000} />
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
var global = this;
|
||||
var global = window = this;
|
||||
|
||||
var console = {};
|
||||
console.debug = print;
|
||||
console.warn = print;
|
||||
console.log = print;
|
||||
var console = {
|
||||
debug: print,
|
||||
warn: print,
|
||||
log: print,
|
||||
error: print
|
||||
};
|
||||
7
src/main/resources/static/js/vendors.js
Normal file
7
src/main/resources/static/js/vendors.js
Normal file
@@ -0,0 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
var React = require('react'),
|
||||
ReactDOM = require('react-dom'),
|
||||
$ = require('jquery');
|
||||
|
||||
require('bootstrap/dist/css/bootstrap.css');
|
||||
@@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Comments channel</title>
|
||||
<link rel="stylesheet" href="/css/react-bootstrap.css" />
|
||||
<link rel="stylesheet" href="/css/comments.css" />
|
||||
<meta charset="UTF-8" />
|
||||
<title>Comments channel</title>
|
||||
<link rel="stylesheet" href="/css/vendors.bundle.js.css" />
|
||||
<link rel="stylesheet" href="/css/comments.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -16,10 +16,8 @@
|
||||
|
||||
<div th:replace="fragments/footer"></div>
|
||||
|
||||
<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>
|
||||
<script src="/js/vendors.bundle.js"></script>
|
||||
<script src="/js/app.bundle.js"></script>
|
||||
<script th:inline="javascript">
|
||||
var initialData = JSON.parse(/*[[${data}]]*/ '[]');
|
||||
renderClient(initialData);
|
||||
|
||||
Reference in New Issue
Block a user