More formatting
This commit is contained in:
parent
6a0a221b9c
commit
5e91475913
|
@ -178,3 +178,11 @@
|
||||||
.hljs-comment {
|
.hljs-comment {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre.light {
|
||||||
|
background: #fdfdff;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre + pre {
|
||||||
|
margin-top: -1.7em;
|
||||||
|
}
|
||||||
|
|
40
react.md
40
react.md
|
@ -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)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue