rtmalone · April 2, 2016 04:18
diff --git a/whole react index.html b/whole react index.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/0.14.8/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/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>
    <div id="broadcast"></div>
    <!-- <script type="text/babel" src="scripts/example.js"></script> -->
    <script type="text/babel">
      var data = [
        {id: 1, author: "Tyler M.", text: "This is one comment"},
        {id: 2, author: "Ben M.", text: "This is *another* comment"}
      ];

      var BroadcastBox = React.createClass({
        getInitialState: function() {
          return {broadcast: {}};
        },
        loadBroadcastFromServer: function() {
          $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
              this.setState({broadcast:data});
            }.bind(this),
            error: function(xhr, status, err) {
              console.error(this.props.url, status, err.toString());
            }.bind(this)
          });
        },
        componentDidMount: function() {
          this.loadBroadcastFromServer();
        },
        render: function() {
          console.log('>>>: ', this.state);
          return (
            <div className='broadcastBox'>
              <h2>{this.state.broadcast.name}</h2>
              <p>Type: {this.state.broadcast.type}</p>
              <p>Start Time: {this.state.broadcast.start}</p>
            </div>
          );
        }
      });

      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) {
          $.ajax({
            url: this.props.url,
            dataType: 'json',
            type: 'POST',
            data: comment,
            success: function(data) {
              this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
              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>
          );
        }
      });

      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='a name please' 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')
      // );

      ReactDOM.render(
        <BroadcastBox url='/api/broadcast'/>, document.getElementById('broadcast')
      );
    </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/0.14.8/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/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>
	<div id="broadcast"></div>
	<!-- <script type="text/babel" src="scripts/example.js"></script> -->
	<script type="text/babel">
	var data = [
	{id: 1, author: "Tyler M.", text: "This is one comment"},
	{id: 2, author: "Ben M.", text: "This is another comment"}
	];

	var BroadcastBox = React.createClass({
	getInitialState: function() {
	return {broadcast: {}};
	},
	loadBroadcastFromServer: function() {
	$.ajax({
	url: this.props.url,
	dataType: 'json',
	cache: false,
	success: function(data) {
	this.setState({broadcast:data});
	}.bind(this),
	error: function(xhr, status, err) {
	console.error(this.props.url, status, err.toString());
	}.bind(this)
	});
	},
	componentDidMount: function() {
	this.loadBroadcastFromServer();
	},
	render: function() {
	console.log('>>>: ', this.state);
	return (
	<div className='broadcastBox'>
	<h2>{this.state.broadcast.name}</h2>
	<p>Type: {this.state.broadcast.type}</p>
	<p>Start Time: {this.state.broadcast.start}</p>
	</div>
	);
	}
	});

	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) {
	$.ajax({
	url: this.props.url,
	dataType: 'json',
	type: 'POST',
	data: comment,
	success: function(data) {
	this.setState({data: data});
	}.bind(this),
	error: function(xhr, status, err) {
	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>
	);
	}
	});

	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='a name please' 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')
	// );

	ReactDOM.render(
	<BroadcastBox url='/api/broadcast'/>, document.getElementById('broadcast')
	);
	</script>
	</body>
	</html>
No results found