soukiassianb/react tutorial.html

## react tutorial.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">

      var CommentBox = React.createClass({
        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,
              dataType: 'json',
              type: 'POST',
              data: comment,
              success: function(data) {
                this.setState({data: comments});
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
        },
        getInitialState: function(){
            return {data: []};
        },
        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>
        )
        }
      });

      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 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>
          )
        }
      })


      ReactDOM.render(
            <CommentBox url="/api/comments" pollInterval={2000} />,
            document.getElementById('content')
        )
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React Tutorial</title>
	<!-- Not present in the tutorial. Just for basic styling. -->
	<link rel="stylesheet" href="css/base.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/babel">

	var CommentBox = React.createClass({
	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,
	dataType: 'json',
	type: 'POST',
	data: comment,
	success: function(data) {
	this.setState({data: comments});
	}.bind(this),
	error: function(xhr, status, err) {
	console.error(this.props.url, status, err.toString());
	}.bind(this)
	});
	},
	getInitialState: function(){
	return {data: []};
	},
	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>
	)
	}
	});

	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 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>
	)
	}
	})


	ReactDOM.render(
	<CommentBox url="/api/comments" pollInterval={2000} />,
	document.getElementById('content')
	)
	</script>
	</body>
	</html>