More formatting

This commit is contained in:
Rico Sta. Cruz 2015-04-17 18:53:45 +08:00
parent 6a0a221b9c
commit 5e91475913
2 changed files with 36 additions and 12 deletions

View File

@ -178,3 +178,11 @@
.hljs-comment { .hljs-comment {
font-style: normal; font-style: normal;
} }
pre.light {
background: #fdfdff;
}
pre + pre {
margin-top: -1.7em;
}

View File

@ -15,8 +15,9 @@ var Component = React.createClass({
``` ```
```js ```js
var c = React.render(<Component name="John" />, document.body); React.render(<Component name="John" />, document.body);
``` ```
{:.light}
## Nesting ## Nesting
Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html). Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
@ -26,6 +27,7 @@ Nest components to separate concerns. See [multiple components](http://facebook.
var UserAvatar = React.createClass({...}); var UserAvatar = React.createClass({...});
var UserProfile = React.createClass({...}); var UserProfile = React.createClass({...});
``` ```
{:.light}
```js ```js
var Info = React.createClass({ var Info = React.createClass({
@ -85,6 +87,7 @@ These are methods available for `Component` instances. See [Component API](http:
```js ```js
React.findDOMNode(c) // 0.13+ React.findDOMNode(c) // 0.13+
``` ```
{:.light}
```js ```js
c.forceUpdate() c.forceUpdate()
@ -111,7 +114,7 @@ Methods and properties you can override. See [component specs](http://facebook.g
| [`getInitialState()`](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) | | | [`getInitialState()`](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) | |
| [`getDefaultProps()`](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) | | | [`getDefaultProps()`](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) | |
| ---- | ---- | | ---- | ---- |
| [`mixins: [ ... ]`](http://facebook.github.io/react/docs/component-specs.html#mixins) | Mixins | | [`mixins: [ ... ]`](http://facebook.github.io/react/docs/component-specs.html#mixins) | Mixins ... [more](#mixins) |
| [`propTypes: { ... }`](http://facebook.github.io/react/docs/component-specs.html#proptypes) | Validation ... [more](#property-validation) | | [`propTypes: { ... }`](http://facebook.github.io/react/docs/component-specs.html#proptypes) | Validation ... [more](#property-validation) |
| [`statics: { ... }`](http://facebook.github.io/react/docs/component-specs.html#statics) | Static methods | | [`statics: { ... }`](http://facebook.github.io/react/docs/component-specs.html#statics) | Static methods |
| [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX | | [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX |
@ -126,6 +129,8 @@ Before initial rendering occurs. Add your DOM stuff on didMount (events, timers,
| `componentDidMount()` | After rendering | | `componentDidMount()` | After rendering |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
<br>
### Updating ### Updating
Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
@ -135,6 +140,8 @@ Called when parents change properties and `.setState()`. These are not called fo
| `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here | | `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
<br>
### Unmounting ### Unmounting
Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount). Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
@ -147,7 +154,10 @@ table.lc tr>:nth-child(1) { width: 50%; }
table.lc tr>:nth-child(2) { text-align: right; } table.lc tr>:nth-child(2) { text-align: right; }
</style> </style>
<br>
### Example: loading AJAX data ### Example: loading AJAX data
See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
```js ```js
React.createClass({ React.createClass({
@ -294,17 +304,18 @@ propTypes: {
## Other features ## Other features
### Class set ### Class set
Easily manipulate DOM classes. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html). Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
```js ```js
var cx = require('classnames');
render: function() { render: function() {
var cx = React.addons.classSet;
var classes = cx({ var classes = cx({
'message': true, 'message': true,
'message-important': this.props.isImportant, 'message-important': this.props.isImportant,
'message-read': this.props.isRead 'message-read': this.props.isRead
}); });
// same final string, but much cleaner
return <div className={classes}>Great Scott!</div>; return <div className={classes}>Great Scott!</div>;
} }
``` ```
@ -315,8 +326,8 @@ See [Transferring props](http://facebook.github.io/react/docs/transferring-props
```html ```html
<VideoPlayer src="video.mp4" /> <VideoPlayer src="video.mp4" />
``` ```
{:.light} {:.light}
```js ```js
var VideoPlayer = React.createClass({ var VideoPlayer = React.createClass({
render: function() { render: function() {
@ -327,14 +338,19 @@ var VideoPlayer = React.createClass({
``` ```
### Mixins ### Mixins
See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
var TickTock = React.createClass({ ```js
mixins: [SetIntervalMixin] var SetIntervalMixin = {
}
SetIntervalMixin = {
componentWillMount: function() { .. } componentWillMount: function() { .. }
} }
```
```js
var TickTock = React.createClass({
mixins: [SetIntervalMixin]
}
```
## [Top level API](https://facebook.github.io/react/docs/top-level-api.html) ## [Top level API](https://facebook.github.io/react/docs/top-level-api.html)