bug fix: solve client rendering

Jeon JaeHyeong · Jeon JaeHyeong · commit 1de7cd786527 · 2016-06-27T10:32:14.000+09:00
diff --git a/README.md b/README.md
@@ -3,6 +3,9 @@
 * HTML template engine: nashorn(react-dom-server)
 * dynamic html: react js  
 
+![capture](https://raw.githubusercontent.com/tinywind/REACT-PRACTICE-WEB/master/capture.png "comment")
+
+
 # How to Run
 * run se.olapetersson.ReactiveApplication.class
 * add lobby: http://localhost:8080/lobbies/{lobby-name}
@@ -14,14 +17,10 @@
 * jpa
 * h2 database
 * react js
-
 * babel-gen: https://github.com/tinywind/BABEL-CODEGEN
-
-**_BABEL-CODEGEN_ is not deployed to public maven repository, yet.** 
-
+ **_BABEL-CODEGEN_ is not deployed to public maven repository, yet.** 
 * lombok
-
-**If fail compile on any IDE, you check the IDE support _lombok_.** 
+ **If fail compile on any IDE, you check the IDE support _lombok_.** 
 
 # References
 * http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle
diff --git a/capture.png b/capture.png
diff --git a/src/main/resources/static/js/doms.jsx b/src/main/resources/static/js/doms.jsx
@@ -13,6 +13,8 @@ var Head = React.createClass({
                 <script src="/webjars/react/15.1.0/react.min.js"></script>
                 <script src="/webjars/react/15.1.0/react-dom.min.js"></script>
                 <script src="/webjars/requirejs-babel/0.0.8/babel-5.8.22.min.js"></script>
+                <script src="/js/doms.js"></script>
+                <script src="/js/playfield.js"></script>
             </head>
         )
     }
diff --git a/src/main/resources/static/js/playfield.jsx b/src/main/resources/static/js/playfield.jsx
@@ -3,7 +3,7 @@ var LobbyCard = React.createClass({
         var title = this.props.title;
         return (
             <div className="jumbotron">
-                <h3>{title}</h3>
+                <h5>{title}</h5>
             </div>
         );
     }
@@ -54,7 +54,7 @@ var PlayField = React.createClass({
         }
         return (
             <div className="jumbotron container-fluid">
-                <h2>Lobbies</h2>
+                <h4>Lobbies</h4>
                 {lobbies}
             </div>
         );
diff --git a/src/main/resources/templates/home.jsx b/src/main/resources/templates/home.jsx
@@ -2,7 +2,7 @@ var Comment = React.createClass({
     render: function () {
         return (
             <div>
-                <h2>{ this.props.author }</h2>
+                <h4>{ this.props.author }</h4>
                 <p>{ this.props.content } </p>
             </div>
         )
@@ -24,29 +24,26 @@ var CommentList = React.createClass({
 });
 
 React.createClass({
-    containerConstructorString: function () {
-        return "ReactDOM.render(<PlayField />, document.getElementById('container'))";
-    },
+    containerConstructorString: "ReactDOM.render(<PlayField />, document.getElementById('container'));",
     render: function () {
+        var style = {padding: '1em'};
         return (
             <html>
             <Head title={this.props.title}/>
             <body>
-            <div>
-                <h1>Render on Server side</h1>
+            <h1>Render on Server side</h1>
+            <div style={style}>
                 <PlayField/>
                 <CommentList comments={this.props.comments}/>
             </div>
             <hr/>
             <hr/>
-            <div>
-                <h1>Render on Client side</h1>
+            <h1>Render on Client side</h1>
+            <div style={style}>
                 <div id="container">
                     "Not React Rendering"
                 </div>
-                <script type="text/babel">
-                    {this.containerConstructorString()}
-                </script>
+                <script type="text/babel" dangerouslySetInnerHTML={{__html:this.containerConstructorString}}></script>
             </div>
             </body>
             </html>

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,8 @@ var Head = React.createClass({`
`13`	`13`	`<script src="/webjars/react/15.1.0/react.min.js"></script>`
`14`	`14`	`<script src="/webjars/react/15.1.0/react-dom.min.js"></script>`
`15`	`15`	`<script src="/webjars/requirejs-babel/0.0.8/babel-5.8.22.min.js"></script>`
	`16`	`+ <script src="/js/doms.js"></script>`
	`17`	`+ <script src="/js/playfield.js"></script>`
`16`	`18`	`</head>`
`17`	`19`	`)`
`18`	`20`	`}`