Clarify some react points

This commit is contained in:
Rico Sta. Cruz 2015-04-17 18:30:12 +08:00
parent c86fa47a04
commit 30f72174a5
1 changed files with 53 additions and 22 deletions

View File

@ -3,7 +3,8 @@ title: React.js
layout: default layout: default
--- ---
## Components Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking.
{:.brief-intro.center}
```js ```js
var Component = React.createClass({ var Component = React.createClass({
@ -17,6 +18,26 @@ var Component = React.createClass({
var c = React.render(<Component name="John" />, document.body); var c = React.render(<Component name="John" />, document.body);
``` ```
## Nesting
Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
{:.center}
```js
var UserAvatar = React.createClass({...});
var UserProfile = React.createClass({...});
```
```js
var Info = React.createClass({
render() {
return <div>
<UserAvatar username={this.props.username} />
<UserProfile username={this.props.username} />
</div>;
}
});
```
## States & Properties ## States & Properties
```js ```js
@ -33,7 +54,7 @@ this.props.fullscreen === true
this.replaceProps({ ... }); this.replaceProps({ ... });
``` ```
### Initial states and properties ### Initial data
```js ```js
React.createClass({ React.createClass({
@ -73,8 +94,8 @@ c.replaceProps({ ... })
c.refs c.refs
``` ```
### [Component specs](http://facebook.github.io/react/docs/component-specs.html) ### Component specs
Methods and properties you can override in your class definitions. Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
| Method | What | | Method | What |
| ---- | ---- | | ---- | ---- |
@ -262,8 +283,10 @@ propTypes: {
## Other features ## Other features
### [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html) ### Class set
Easily manipulate DOM classes. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
```js
render: function() { render: function() {
var cx = React.addons.classSet; var cx = React.addons.classSet;
var classes = cx({ var classes = cx({
@ -274,16 +297,24 @@ propTypes: {
// same final string, but much cleaner // same final string, but much cleaner
return <div className={classes}>Great Scott!</div>; return <div className={classes}>Great Scott!</div>;
} }
```
### [Propagating properties to children](http://facebook.github.io/react/docs/transferring-props.html) ### Propagating properties
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
```html
<VideoPlayer src="video.mp4" />
```
{:.light}
```js
var VideoPlayer = React.createClass({ var VideoPlayer = React.createClass({
render: function() { render: function() {
/* propagates src="..." down to this sub component */
return <VideoEmbed {...this.props} controls='false' />; return <VideoEmbed {...this.props} controls='false' />;
} }
}); });
```
<VideoPlayer src="video.mp4" />
### Mixins ### Mixins