comments_build_example

8 years ago · 9105447c23
parent 6b98a6448b
commit 9105447c23
8 changed files with 8594 additions and 0 deletions
--- a/comments_build_example/index.html
+++ b/comments_build_example/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <main></main>
+        <script src="main.js" charset="utf-8"></script>
+    </body>
+</html>
--- a/comments_build_example/js/components/comments.jsx
+++ b/comments_build_example/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(comment){
+        this.state.comments.push(comment); //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;
--- a/comments_build_example/js/components/commentsform.jsx
+++ b/comments_build_example/js/components/commentsform.jsx
@ -0,0 +1,24 @@
+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({
+        body: this.refs.body.value,
+        author: this.refs.author.value
+    });
+}
+    render() {
+        return <form onSubmit={this.handleSubmit}>
+            <input ref="author" type="text" placeholder="author"/><br/>
+            <textarea ref="body" placeholder="comment"></textarea><br/>
+            <input type="submit" value="Post Comment"/>
+        </form>
+    }
+}
+
+export default CommentsForm;
--- a/comments_build_example/js/components/commentslist.jsx
+++ b/comments_build_example/js/components/commentslist.jsx
@ -0,0 +1,16 @@
+import React from 'react';
+
+class CommentsList extends React.Component {
+    render(){
+        return <ul>
+            {this.props.comments.map((comment, index) =>
+                <li key={index}>
+                    {comment.author} says: "{comment.body}"
+                </li>
+            )}
+        </ul>
+
+    }
+}
+
+export default CommentsList;
--- a/comments_build_example/js/index.js
+++ b/comments_build_example/js/index.js
@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import Comments from './components/comments.jsx';
+
+ReactDOM.render(
+    <Comments></Comments>,
+    document.querySelector('main')
+);
--- a/comments_build_example/package-lock.json
+++ b/comments_build_example/package-lock.json
--- a/comments_build_example/package.json
+++ b/comments_build_example/package.json
@ -0,0 +1,24 @@
+{
+  "name": "webpacktest",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack-dev-server --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "webpack": "^4.8.3",
+    "webpack-dev-server": "^3.1.4"
+  },
+  "devDependencies": {
+    "webpack-cli": "^2.1.3"
+  }
+}
--- a/comments_build_example/webpack.config.js
+++ b/comments_build_example/webpack.config.js
@ -0,0 +1,16 @@
+module.exports = {
+    entry: './js/index.js',
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/, //for all files that end with js/jsx
+                use: {
+                    loader: 'babel-loader', //use the babel loader to load:
+                    options: {
+                        presets: ["es2015", "react"] //the es2015 compiler
+                    }
+                }
+            }
+        ]
+    }
+};