parent
6b98a6448b
commit
9105447c23
@ -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>
|
||||||
@ -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;
|
||||||
@ -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;
|
||||||
@ -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;
|
||||||
@ -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')
|
||||||
|
);
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in new issue