1- var CommentBox = React . createClass ( {
2- loadCommentsFromServer : function ( ) {
1+ class CommentBox extends React . Component {
2+ state = { data : this . props . initialData } ;
3+
4+ loadCommentsFromServer = ( ) => {
35 var xhr = new XMLHttpRequest ( ) ;
46 xhr . open ( 'get' , this . props . url , true ) ;
5- xhr . onload = function ( ) {
7+ xhr . onload = function ( ) {
68 var data = JSON . parse ( xhr . responseText ) ;
79 this . setState ( { data : data } ) ;
810 } . bind ( this ) ;
911 xhr . send ( ) ;
10- } ,
11- handleCommentSubmit : function ( comment ) {
12+ } ;
13+
14+ handleCommentSubmit = comment => {
1215 var comments = this . state . data ;
1316 // Optimistically set an id on the new comment. It will be replaced by an
1417 // id generated by the server. In a production application you would likely
2326
2427 var xhr = new XMLHttpRequest ( ) ;
2528 xhr . open ( 'post' , this . props . submitUrl , true ) ;
26- xhr . onload = function ( ) {
29+ xhr . onload = function ( ) {
2730 this . loadCommentsFromServer ( ) ;
2831 } . bind ( this ) ;
2932 xhr . send ( data ) ;
30- } ,
31- getInitialState : function ( ) {
32- return { data : this . props . initialData } ;
33- } ,
34- componentDidMount : function ( ) {
33+ } ;
34+
35+ componentDidMount ( ) {
3536 window . setInterval ( this . loadCommentsFromServer , this . props . pollInterval ) ;
36- } ,
37- render : function ( ) {
37+ }
38+
39+ render ( ) {
3840 return (
3941 < div className = "commentBox" >
4042 < h1 > Comments</ h1 >
4143 < CommentList data = { this . state . data } />
42- < CommentForm onCommentSubmit = { this . handleCommentSubmit } />
44+ < CommentForm onCommentSubmit = { this . handleCommentSubmit } />
4345 </ div >
44- ) ;
46+ ) ;
4547 }
46- } ) ;
48+ }
4749
48- var CommentList = React . createClass ( {
49- render : function ( ) {
50+ class CommentList extends React . Component {
51+ render ( ) {
5052 var commentNodes = this . props . data . map ( function ( comment ) {
5153 return (
52- < Comment author = { comment . author } key = { comment . id } >
53- { comment . text }
54+ < Comment author = { comment . author } key = { comment . id } >
55+ { comment . text }
5456 </ Comment >
55- ) ;
57+ ) ;
5658 } ) ;
57- return (
58- < div className = "commentList" >
59- { commentNodes }
60- </ div >
61- ) ;
59+ return < div className = "commentList" > { commentNodes } </ div > ;
6260 }
63- } ) ;
64-
65- var CommentForm = React . createClass ( {
66- getInitialState : function ( ) {
67- return { author : '' , text : '' } ;
68- } ,
69- handleAuthorChange : function ( e ) {
70- this . setState ( { author : e . target . value } ) ;
71- } ,
72- handleTextChange : function ( e ) {
73- this . setState ( { text : e . target . value } ) ;
74- } ,
75- handleSubmit : function ( e ) {
61+ }
62+
63+ class CommentForm extends React . Component {
64+ state = {
65+ author : '' ,
66+ text : ''
67+ } ;
68+
69+ handleAuthorChange = e => {
70+ this . setState ( { author : e . target . value } ) ;
71+ } ;
72+
73+ handleTextChange = e => {
74+ this . setState ( { text : e . target . value } ) ;
75+ } ;
76+
77+ handleSubmit = e => {
7678 e . preventDefault ( ) ;
7779 var author = this . state . author . trim ( ) ;
7880 var text = this . state . text . trim ( ) ;
@@ -81,8 +83,9 @@ var CommentForm = React.createClass({
8183 }
8284 this . props . onCommentSubmit ( { author : author , text : text } ) ;
8385 this . setState ( { author : '' , text : '' } ) ;
84- } ,
85- render : function ( ) {
86+ } ;
87+
88+ render ( ) {
8689 return (
8790 < form className = "commentForm" onSubmit = { this . handleSubmit } >
8891 < input
@@ -101,27 +104,30 @@ var CommentForm = React.createClass({
101104 </ form >
102105 ) ;
103106 }
104- } ) ;
107+ }
105108
106109function createRemarkable ( ) {
107- var remarkable = ( ( "undefined" != typeof global ) && ( global . Remarkable ) ) ? global . Remarkable : window . Remarkable ;
108- return new remarkable ( ) ;
110+ var remarkable =
111+ 'undefined' != typeof global && global . Remarkable
112+ ? global . Remarkable
113+ : window . Remarkable ;
114+
115+ return new remarkable ( ) ;
109116}
110117
111- var Comment = React . createClass ( {
112- rawMarkup : function ( ) {
118+ class Comment extends React . Component {
119+ rawMarkup = ( ) => {
113120 var md = createRemarkable ( ) ;
114121 var rawMarkup = md . render ( this . props . children . toString ( ) ) ;
115122 return { __html : rawMarkup } ;
116- } ,
117- render : function ( ) {
123+ } ;
124+
125+ render ( ) {
118126 return (
119- < div className = "comment" >
120- < h2 className = "commentAuthor" >
121- { this . props . author }
122- </ h2 >
123- < span dangerouslySetInnerHTML = { this . rawMarkup ( ) } />
124- </ div >
125- ) ;
127+ < div className = "comment" >
128+ < h2 className = "commentAuthor" > { this . props . author } </ h2 >
129+ < span dangerouslySetInnerHTML = { this . rawMarkup ( ) } />
130+ </ div >
131+ ) ;
126132 }
127- } ) ;
133+ }
0 commit comments