Skip to content

Commit b018181

Browse files
ruanyfruanyf
committed
adding new demos
1 parent 5a50290 commit b018181

File tree

5 files changed

+243
-6
lines changed

5 files changed

+243
-6
lines changed

‎README.md‎

Lines changed: 163 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ React.render(
9494

9595
## this.props.children
9696

97-
we use `this.props.children` to access a component's children.
97+
React uses `this.props.children` to access a component's children.
9898

9999
```js
100100
var NotesList = React.createClass({
@@ -120,6 +120,166 @@ React.render(
120120
);
121121
```
122122

123+
## Finding a DOM node
124+
125+
React uses React.findDOMNode() to find a DOM node.
126+
127+
```js
128+
var MyComponent = React.createClass({
129+
handleClick: function() {
130+
React.findDOMNode(this.refs.myTextInput).focus();
131+
},
132+
render: function() {
133+
return (
134+
<div>
135+
<input type="text" ref="myTextInput" />
136+
<input type="button" value="Focus the text input" onClick={this.handleClick} />
137+
</div>
138+
);
139+
}
140+
});
141+
142+
React.render(
143+
<MyComponent />,
144+
document.getElementById('example')
145+
);
146+
```
147+
148+
## this.state
149+
150+
React thinks of component as state machines, and uses `this.state` to hold component's state, `this.setState()` to update `this.state` and re-render the component.
151+
152+
```js
153+
var LikeButton = React.createClass({
154+
getInitialState: function() {
155+
return {liked: false};
156+
},
157+
handleClick: function(event) {
158+
this.setState({liked: !this.state.liked});
159+
},
160+
render: function() {
161+
var text = this.state.liked ? 'like' : 'haven\'t liked';
162+
return (
163+
<p onClick={this.handleClick}>
164+
You {text} this. Click to toggle.
165+
</p>
166+
);
167+
}
168+
});
169+
170+
React.render(
171+
<LikeButton />,
172+
document.getElementById('example')
173+
);
174+
```
175+
176+
## Form
177+
178+
The `value` property of Form components, such as <input>, <textarea>, and <option>, is unaffected by any user input. If you wanted to update the value in response to user input, you could use the onChange event.
179+
180+
```js
181+
var Input = React.createClass({
182+
getInitialState: function() {
183+
return {value: 'Hello!'};
184+
},
185+
handleChange: function(event) {
186+
this.setState({value: event.target.value});
187+
},
188+
render: function () {
189+
var value = this.state.value;
190+
return (
191+
<div>
192+
<input type="text" value={value} onChange={this.handleChange} />
193+
<p>{value}</p>
194+
</div>
195+
);
196+
}
197+
});
198+
199+
React.render(<Input/>, document.body);
200+
```
201+
202+
## Component Lifecycle
203+
204+
Components have three main parts of their lifecycle: Mounting, Updating and Unmounting. React provides hooks into these lifecycle part. `will` methods are called right before something happens, and `did` methods which are called right after something happens.
205+
206+
```js
207+
var Hello = React.createClass({
208+
getInitialState: function () {
209+
return {
210+
opacity: 1.0
211+
};
212+
},
213+
214+
componentDidMount: function () {
215+
this.timer = setInterval(function () {
216+
var opacity = this.state.opacity;
217+
opacity -= .05;
218+
if (opacity < 0.1) {
219+
opacity = 1.0;
220+
}
221+
this.setState({
222+
opacity: opacity
223+
});
224+
}.bind(this), 100);
225+
},
226+
227+
render: function () {
228+
return (
229+
<div style={{opacity: this.state.opacity}}>
230+
Hello {this.props.name}
231+
</div>
232+
);
233+
}
234+
});
235+
236+
React.render(
237+
<Hello name="world"/>,
238+
document.body
239+
);
240+
```
241+
242+
## Ajax
243+
244+
Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.
245+
246+
```js
247+
var UserGist = React.createClass({
248+
getInitialState: function() {
249+
return {
250+
username: '',
251+
lastGistUrl: ''
252+
};
253+
},
254+
255+
componentDidMount: function() {
256+
$.get(this.props.source, function(result) {
257+
var lastGist = result[0];
258+
if (this.isMounted()) {
259+
this.setState({
260+
username: lastGist.owner.login,
261+
lastGistUrl: lastGist.html_url
262+
});
263+
}
264+
}.bind(this));
265+
},
266+
267+
render: function() {
268+
return (
269+
<div>
270+
{this.state.username}'s last gist is
271+
<a href={this.state.lastGistUrl}>here</a>.
272+
</div>
273+
);
274+
}
275+
});
276+
277+
React.render(
278+
<UserGist source="https://api.github.com/users/octocat/gists" />,
279+
document.body
280+
);
281+
```
282+
123283
## Extras
124284
125285
### Precompiling JSX
@@ -155,7 +315,8 @@ Put the compiled JS files into HTML.
155315
156316
## Useful links
157317
158-
- [React's Official site](http://facebook.github.io/react)
318+
- [React's official site](http://facebook.github.io/react)
319+
- [React's official examples](https://github.com/facebook/react/tree/master/examples)
159320
160321
## License
161322

‎ajax/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../build/react.js"></script>
5+
<script src="../build/JSXTransformer.js"></script>
6+
<script src="../build/jquery.min.js"></script>
7+
</head>
8+
<body>
9+
<script type="text/jsx">
10+
var UserGist = React.createClass({
11+
getInitialState: function() {
12+
return {
13+
username: '',
14+
lastGistUrl: ''
15+
};
16+
},
17+
18+
componentDidMount: function() {
19+
$.get(this.props.source, function(result) {
20+
var lastGist = result[0];
21+
if (this.isMounted()) {
22+
this.setState({
23+
username: lastGist.owner.login,
24+
lastGistUrl: lastGist.html_url
25+
});
26+
}
27+
}.bind(this));
28+
},
29+
30+
render: function() {
31+
return (
32+
<div>
33+
{this.state.username}'s last gist is
34+
<a href={this.state.lastGistUrl}>here</a>.
35+
</div>
36+
);
37+
}
38+
});
39+
40+
React.render(
41+
<UserGist source="https://api.github.com/users/octocat/gists" />,
42+
document.body
43+
);
44+
</script>
45+
</body>
46+
</html>

‎build/jquery.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo7/index.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,6 @@
2626
}.bind(this), 100);
2727
},
2828

29-
componentWillUnmount: function () {
30-
clearInterval(this.timer);
31-
},
32-
3329
render: function () {
3430
return (
3531
<div style={{opacity: this.state.opacity}}>

‎this-ref/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../build/react.js"></script>
5+
<script src="../build/JSXTransformer.js"></script>
6+
</head>
7+
<body>
8+
<div id="example"></div>
9+
<script type="text/jsx">
10+
var MyComponent = React.createClass({
11+
handleClick: function() {
12+
React.findDOMNode(this.refs.myTextInput).focus();
13+
},
14+
render: function() {
15+
return (
16+
<div>
17+
<input type="text" ref="myTextInput" />
18+
<input type="button" value="Focus the text input" onClick={this.handleClick} />
19+
</div>
20+
);
21+
}
22+
});
23+
24+
React.render(
25+
<MyComponent />,
26+
document.getElementById('example')
27+
);
28+
</script>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)