Skip to content

Commit 643beef

Browse files
fladoflado
committed
refactor samples
1 parent 9ecfd37 commit 643beef

File tree

6 files changed

+193
-9
lines changed

6 files changed

+193
-9
lines changed

‎comments.json

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,33 @@
66
{
77
"author": "Paul O’Shannessy",
88
"text": "React is *great*!"
9+
},
10+
{
11+
"author": "sasas",
12+
"text": "asasas"
13+
},
14+
{
15+
"author": "aaaa",
16+
"text": "aaaa"
17+
},
18+
{
19+
"author": "aaaa111",
20+
"text": "aaaa"
21+
},
22+
{
23+
"author": "aaaa222",
24+
"text": "aaaa"
25+
},
26+
{
27+
"author": "aaaa3333",
28+
"text": "aaaa"
29+
},
30+
{
31+
"author": "aaaa4444",
32+
"text": "aaaa"
33+
},
34+
{
35+
"author": "dssfsf",
36+
"text": "sfdsfsf"
937
}
10-
]
38+
]

‎public/comments-index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Hello React Comments</title>
5+
<!-- Not present in the tutorial. Just for basic styling. -->
6+
<link rel="stylesheet" href="css/base.css" />
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
11+
</head>
12+
<body>
13+
<div id="content"></div>
14+
<script type="text/jsx;harmony=true" src="scripts/commentsExample.js"></script>
15+
</body>
16+
</html>

‎public/index.html

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Hello React</title>
5-
<!-- Not present in the tutorial. Just for basic styling. -->
6-
<link rel="stylesheet" href="css/base.css" />
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
4+
<title>Hello ReactJS</title>
115
</head>
126
<body>
137
<div id="content"></div>
14-
<script type="text/jsx;harmony=true" src="scripts/example.js"></script>
8+
<a href="comments-index.html">Comments Example</a><br/>
9+
<a href="product-table-index.html">Search Product Table Example</a>
1510
</body>
1611
</html>

‎public/product-table-index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Product Table</title>
5+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" />
6+
<link rel="stylesheet" href="css/base.css" />
7+
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
10+
</head>
11+
<body>
12+
<div id="content"></div>
13+
<script type="text/jsx;harmony=true" src="scripts/productTableExample.js"></script>
14+
</body>
15+
</html>

‎public/scripts/example.js renamed to ‎public/scripts/commentsExample.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,12 @@ var CommentBox = React.createClass({
6262
getInitialState: function() {
6363
return {data: []};
6464
},
65+
6566
componentDidMount: function() {
6667
this.loadCommentsFromServer();
6768
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
6869
},
70+
6971
render: function() {
7072
return (
7173
<div className="commentBox">

‎public/scripts/productTableExample.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
2+
var FilterableProductTable = React.createClass({
3+
getInitialState: function() {
4+
return { filterText: '', inStockOnly: false }
5+
},
6+
handleUserInput: function(txt, stockOnly) {
7+
this.setState({
8+
filterText: txt,
9+
inStockOnly: stockOnly
10+
});
11+
},
12+
13+
render: function() {
14+
return (
15+
<div>
16+
<SearchBar
17+
filterText={this.state.filterText}
18+
inStockOnly={this.state.inStockOnly}
19+
onUserInput={this.handleUserInput}/>
20+
<ProductTable
21+
products={this.props.products}
22+
filterText={this.state.filterText}
23+
inStockOnly={this.state.inStockOnly} />
24+
</div>
25+
);
26+
}
27+
});
28+
29+
var SearchBar = React.createClass({
30+
handleChange: function() {
31+
this.props.onUserInput(
32+
this.refs.filterTextInput.getDOMNode().value,
33+
this.refs.inStockOnlyInput.getDOMNode().checked
34+
);
35+
},
36+
render: function() {
37+
return (
38+
<form>
39+
<input
40+
type="text"
41+
placeholder="Search..."
42+
ref="filterTextInput"
43+
onChange={this.handleChange}
44+
value={this.props.filterText} />
45+
<p>
46+
<input
47+
type="checkbox"
48+
checked={this.props.inStockOnly}
49+
ref="inStockOnlyInput"
50+
onChange={this.handleChange}/>
51+
{' '}
52+
Only show products in stock
53+
</p>
54+
</form>
55+
);
56+
}
57+
});
58+
59+
var ProductTable = React.createClass({
60+
render: function() {
61+
var rows = [];
62+
var lastCategory = null;
63+
var filterText = this.props.filterText.toLowerCase();
64+
var inStockOnly = this.props.inStockOnly;
65+
66+
this.props.products.forEach(function(product) {
67+
if (product.category !== lastCategory) {
68+
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
69+
}
70+
if (product.name.toLowerCase().indexOf(filterText) > -1) {
71+
if (inStockOnly) {
72+
if (product.stocked) {
73+
rows.push(<ProductRow product={product} key={product.name} />);
74+
}
75+
} else {
76+
rows.push(<ProductRow product={product} key={product.name} />);
77+
}
78+
}
79+
lastCategory = product.category;
80+
});
81+
82+
return (
83+
<table>
84+
<thead>
85+
<tr>
86+
<th>Name</th>
87+
<th>Price</th>
88+
</tr>
89+
</thead>
90+
<tbody>{rows}</tbody>
91+
</table>
92+
);
93+
}
94+
});
95+
96+
var ProductCategoryRow = React.createClass({
97+
render: function() {
98+
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
99+
}
100+
});
101+
102+
var ProductRow = React.createClass({
103+
render: function() {
104+
var name = this.props.product.stocked ?
105+
this.props.product.name :
106+
<span style={{color: 'red'}}>
107+
{this.props.product.name}
108+
</span>;
109+
return (
110+
<tr>
111+
<td>{name}</td>
112+
<td>{this.props.product.price}</td>
113+
</tr>
114+
);
115+
}
116+
});
117+
118+
119+
var PRODUCTS = [
120+
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
121+
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
122+
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
123+
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
124+
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
125+
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
126+
];
127+
128+
React.render(<FilterableProductTable products={PRODUCTS} />, document.body);

0 commit comments

Comments
 (0)