Lucas Stadler лет назад: 11
Родитель
Сommit
52d1b31722
2 измененных файлов с 21 добавлено и 8 удалено
  1. 20 8
      js/react/entry.js
  2. 1 0
      js/react/package.json

+ 20 - 8
js/react/entry.js

1
// following along http://facebook.github.io/react/docs/tutorial.html
1
// following along http://facebook.github.io/react/docs/tutorial.html
2
2
3
import React from "react";
3
import React from "react";
4
import marked from "marked";
4
5
5
require('./style.css');
6
require('./style.css');
6
7
16
17
17
class CommentList extends React.Component {
18
class CommentList extends React.Component {
18
	render() {
19
	render() {
20
		let commentNodes = this.props.data.map((comment) => {
21
			return (
22
				<Comment author={comment.author}>
23
					{comment.text}
24
				</Comment>
25
			);
26
		});
27
19
		return (
28
		return (
20
			<div className="comment-list">
29
			<div className="comment-list">
21
				<Comment author="Alice">Down the... halfpipe!</Comment>
22
				<Comment author="PP">Alice, what blasphemy!</Comment>
23
				<Comment author="Maybe Not Lewis">Let her be herself, Peter,
24
					we let you jump around all the time as well...
25
				</Comment>
30
				{commentNodes}
26
			</div>
31
			</div>
27
		);
32
		);
28
	}
33
	}
33
		return (
38
		return (
34
			<div className="comment-box">
39
			<div className="comment-box">
35
				<h1>Comments</h1>
40
				<h1>Comments</h1>
36
				<CommentList />
41
				<CommentList data={this.props.data} />
37
				<CommentForm />
42
				<CommentForm />
38
			</div>
43
			</div>
39
		);
44
		);
42
47
43
class Comment extends React.Component {
48
class Comment extends React.Component {
44
	render() {
49
	render() {
50
		let rawMarkup = marked(this.props.children.toString());
45
		return (
51
		return (
46
			<div className="comment">
52
			<div className="comment">
47
				<h2 className="comment-author">{this.props.author}</h2>
53
				<h2 className="comment-author">{this.props.author}</h2>
48
				{this.props.children}
54
				<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
49
			</div>
55
			</div>
50
		);
56
		);
51
	}
57
	}
52
}
58
}
53
59
54
React.render(<CommentBox />, document.getElementById("content"));
60
var data = [
61
	{author: "Alice", text: "Down the... halfpipe!"},
62
	{author: "PP", text: "Alice, what **blasphemy**!"},
63
	{author: "Maybe Not Lewis", text: "Let her be herself, Peter, we let *you* jump around all the time as well..."}
64
];
65
66
React.render(<CommentBox data={data} />, document.getElementById("content"));

+ 1 - 0
js/react/package.json

6
    "6to5-core": "^3.5.3",
6
    "6to5-core": "^3.5.3",
7
    "6to5-loader": "^3.0.0",
7
    "6to5-loader": "^3.0.0",
8
    "css-loader": "^0.9.1",
8
    "css-loader": "^0.9.1",
9
    "marked": "^0.3.3",
9
    "react": "^0.13.0-beta.1",
10
    "react": "^0.13.0-beta.1",
10
    "style-loader": "^0.8.3",
11
    "style-loader": "^0.8.3",
11
    "webpack": "^1.5.3"
12
    "webpack": "^1.5.3"