morizotter/.eslintignore

## .eslintignore
node_modules/
test/
webpack.config.js
dist/
server/

## .eslintrc.json
{
  "rules": {
    "indent": [
      2,
      2
    ],
    "quotes": [
      2,
      "double"
    ],
    "linebreak-style": [
      2,
      "unix"
    ],
    "semi": [
      2,
      "always"
    ],
    "no-unused-vars": [
      1, {"vars": "all", "args": "after-used"}
    ],
    "no-console": 1
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": "eslint:recommended",
  "ecmaFeatures": {
    "jsx": true,
    "experimentalObjectRestSpread": true,
    "modules": true
  },
  "plugins": [
    "react"
  ]
}

## app.js
import React from "react";
import ReactDOM from "react-dom";
import CommentBox from "./CommentBox";

ReactDOM.render(
  <CommentBox url="http://localhost:3001/api/comments" pollInterval={2000}/>,
  document.getElementById("app")
);

## Comment.jsx
import React from "react";
import marked from "marked";

export default class Comment extends React.Component {
  rawMarkup() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup};
  }

  render() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
}

## CommentBox.jsx
import CommentList from "./CommentList.jsx";
import CommentForm from "./CommentForm.jsx";

## CommentForm.jsx
import React from "react";

export default class CommentForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      author: "",
      text: ""
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleAuthorChange = this.handleAuthorChange.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
  }

  handleAuthorChange(e) {
    this.setState({author: e.target.value});
  }

  handleTextChange(e) {
    this.setState({text: e.target.value});
  }

  handleSubmit(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() {
    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>
    );
  }
}


## CommentList.jsx
import React from "react";
import Comment from "./Comment";

export default class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var commentNodes = this.props.data.map((comment) => {
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });

    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
}

## file0.txt
npm install --save react react-dom

## file1.txt
$ npm install -g eslint
$ eslint -v
$ eslint --init

## file4.txt
$ npm install --save-dev webpack babel-loader babel-core babel-preset-react babel-preset-es2015

## file6.txt
$ npm install lite-server concurrently --save-dev

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="dist/bundle.js"></script>
  </body>
</html>
</pre>

## package.json
{
  "name": "9.react-tutorial-2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "marked": "^0.3.5",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "superagent": "^1.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "eslint": "^1.10.3",
    "eslint-config-standard": "^4.4.0",
    "eslint-plugin-react": "^3.14.0",
    "eslint-plugin-standard": "^1.3.1",
    "lite-server": "^1.3.2",
    "webpack": "^1.12.10"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack -w",
    "lite": "lite-server --verbose --open dist",
    "start": "concurrent \"npm run webpack\" \"npm run lite\""
  },
  "author": "",
  "license": "ISC"
}

## webpack.config.js
module.exports = {
  entry: __dirname + "/src/app.js",
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel",
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};
	{
	"rules": {
	"indent": [
	2,
	2
	],
	"quotes": [
	2,
	"double"
	],
	"linebreak-style": [
	2,
	"unix"
	],
	"semi": [
	2,
	"always"
	],
	"no-unused-vars": [
	1, {"vars": "all", "args": "after-used"}
	],
	"no-console": 1
	},
	"env": {
	"es6": true,
	"browser": true
	},
	"extends": "eslint:recommended",
	"ecmaFeatures": {
	"jsx": true,
	"experimentalObjectRestSpread": true,
	"modules": true
	},
	"plugins": [
	"react"
	]
	}
	import React from "react";
	import ReactDOM from "react-dom";
	import CommentBox from "./CommentBox";

	ReactDOM.render(
	<CommentBox url="http://localhost:3001/api/comments" pollInterval={2000}/>,
	document.getElementById("app")
	);
	import React from "react";
	import marked from "marked";

	export default class Comment extends React.Component {
	rawMarkup() {
	var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
	return { __html: rawMarkup};
	}

	render() {
	return (
	<div className="comment">
	<h2 className="commentAuthor">
	{this.props.author}
	</h2>
	<span dangerouslySetInnerHTML={this.rawMarkup()} />
	</div>
	);
	}
	}
	import CommentList from "./CommentList.jsx";
	import CommentForm from "./CommentForm.jsx";
	import React from "react";

	export default class CommentForm extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	author: "",
	text: ""
	};

	this.handleSubmit = this.handleSubmit.bind(this);
	this.handleAuthorChange = this.handleAuthorChange.bind(this);
	this.handleTextChange = this.handleTextChange.bind(this);
	}

	handleAuthorChange(e) {
	this.setState({author: e.target.value});
	}

	handleTextChange(e) {
	this.setState({text: e.target.value});
	}

	handleSubmit(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() {
	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>
	);
	}
	}
	import React from "react";
	import Comment from "./Comment";

	export default class CommentList extends React.Component {
	constructor(props) {
	super(props);
	}

	render() {
	var commentNodes = this.props.data.map((comment) => {
	return (
	<Comment author={comment.author} key={comment.id}>
	{comment.text}
	</Comment>
	);
	});

	return (
	<div className="commentList">
	{commentNodes}
	</div>
	);
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React!</title>
	</head>
	<body>
	<div id="app"></div>
	<script type="text/javascript" src="dist/bundle.js"></script>
	</body>
	</html>
	</pre>
	{
	"name": "9.react-tutorial-2",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"dependencies": {
	"marked": "^0.3.5",
	"react": "^0.14.6",
	"react-dom": "^0.14.6",
	"superagent": "^1.6.1"
	},
	"devDependencies": {
	"babel-core": "^6.4.0",
	"babel-loader": "^6.2.1",
	"babel-preset-es2015": "^6.3.13",
	"babel-preset-react": "^6.3.13",
	"eslint": "^1.10.3",
	"eslint-config-standard": "^4.4.0",
	"eslint-plugin-react": "^3.14.0",
	"eslint-plugin-standard": "^1.3.1",
	"lite-server": "^1.3.2",
	"webpack": "^1.12.10"
	},
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"webpack": "webpack -w",
	"lite": "lite-server --verbose --open dist",
	"start": "concurrent \"npm run webpack\" \"npm run lite\""
	},
	"author": "",
	"license": "ISC"
	}
	module.exports = {
	entry: __dirname + "/src/app.js",
	output: {
	path: __dirname + '/dist',
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{
	test: /\.js[x]?$/,
	exclude: /node_modules/,
	loader: "babel",
	query:{
	presets: ['react', 'es2015']
	}
	}
	]
	},
	resolve: {
	extensions: ['', '.js', '.jsx']
	}
	};