basic react comments component

js/components/comments.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import CommentsList from './commentslist.jsx'
+import CommentsForm from './commentsform.jsx'
+
+class Comments extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            comments: []
+        }
+        this.addComment = this.addComment.bind(this);
+    }
+    addComment(value){
+        this.state.comments.push(value); //this alone won't notify React to update the DOM
+        this.setState({
+            comments: this.state.comments
+        });
+    }
+    render(){
+        return <section>
+            <CommentsList comments={this.state.comments}></CommentsList>
+            <CommentsForm handleSubmit={this.addComment}></CommentsForm>
+        </section>
+    }
+}
+
+export default Comments;

js/components/commentsform.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+class CommentsForm extends React.Component {
+    constructor(props){
+        super(props);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+    handleSubmit(event){
+        event.preventDefault();
+        this.props.handleSubmit(this.refs.comment.value);
+    }
+    render() {
+        return <form onSubmit={this.handleSubmit}>
+            <input ref="comment" type="text" placeholder="Your Comment"/>
+            <input type="submit" value="Post Comment"/>
+        </form>
+    }
+}
+
+export default CommentsForm;

js/components/commentslist.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+class CommentsList extends React.Component {
+    render(){
+        return <ul>
+            {this.props.comments.map((comment, index) =>
+                <li key={index}>{comment}</li>
+            )}
+        </ul>
+
+    }
+}
+
+export default CommentsList;

js/index.js

@@ -1,7 +1,8 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
+import Comments from './components/comments.jsx';
 
 ReactDOM.render(
-    <h1 className="foo">Hello, world!</h1>,
+    <Comments></Comments>,
     document.querySelector('main')
 );

js/mylib.js

@@ -1,18 +0,0 @@
-const myFunc = function(){
-    console.log('included!');
-}
-
-export default myFunc;
-
-const myFunc2 = function(){
-    console.log('also included');
-}
-
-const unnecessary = function(){
-    console.log('unnecessary');
-}
-
-export {
-    myFunc2,
-    unnecessary as omitme
-}