Connor McSheffrey
11 years ago
27 changed files with 34 additions and 423 deletions
@ -1,13 +0,0 @@ |
|||||
--- |
|
||||
id: introduction-tip |
|
||||
title: Cookbook Introduction |
|
||||
layout: cookbook |
|
||||
permalink: introduction-tip.html |
|
||||
next: inline-styles.html |
|
||||
--- |
|
||||
|
|
||||
The React.js cookbook provides common React tips, bite-sized information that can surprisingly answer lots of questions you might have had and warn you against common pitfalls. |
|
||||
|
|
||||
### Contributing |
|
||||
|
|
||||
Submit a pull request to the [React repo](https://github.com/facebook/react) following the cookbook entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs IRC on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](http://groups.google.com/group/reactjs). |
|
||||
@ -1,24 +0,0 @@ |
|||||
--- |
|
||||
id: inline-styles-tip |
|
||||
title: Inline Styles |
|
||||
layout: cookbook |
|
||||
permalink: inline-styles-tip.html |
|
||||
next: if-else-in-JSX.html |
|
||||
prev: introduction.html |
|
||||
--- |
|
||||
|
|
||||
In React, inline styles are not specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var divStyle = { |
|
||||
color: 'white', |
|
||||
backgroundImage: 'url(' + imgUrl + ')', |
|
||||
WebkitTransition: 'all' // note the capital 'W' here |
|
||||
}; |
|
||||
|
|
||||
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode); |
|
||||
``` |
|
||||
|
|
||||
Style keys are camelCased in order to be consistent with accessing the properties using node.style.___ in DOM. This also explains why WebkitTransition has an uppercase "W". |
|
||||
@ -1,31 +0,0 @@ |
|||||
--- |
|
||||
id: if-else-in-JSX-tip |
|
||||
title: If-Else in JSX |
|
||||
layout: cookbook |
|
||||
permalink: if-else-in-JSX-tip.html |
|
||||
prev: inline-styles.html |
|
||||
next: self-closing-tag.html |
|
||||
--- |
|
||||
|
|
||||
`if-else` statements don't work inside JSX, since JSX is really just sugar for functions: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
// this |
|
||||
React.renderComponent(<div id="msg">Hello World!</div>, mountNode); |
|
||||
// is the same as this |
|
||||
React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode); |
|
||||
``` |
|
||||
|
|
||||
Which means `<div id={if (true){ 'msg' }}>Hello World!</div>` doesn't make sense, as (if it worked) it would be compiled down to something like this `React.DOM.div({id: if (true){ 'msg' }}, "Hello World!")`, which isn't valid JS. |
|
||||
|
|
||||
What you're searching for is ternary expression: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
React.renderComponent(<div id={true ? 'msg' : ''}>Hello World!</div>, mountNode); |
|
||||
``` |
|
||||
|
|
||||
Try the [JSX compiler](/react/jsx-compiler.html). |
|
||||
@ -1,12 +0,0 @@ |
|||||
--- |
|
||||
id: self-closing-tag-tip |
|
||||
title: Self-Closing Tag |
|
||||
layout: cookbook |
|
||||
permalink: self-closing-tag-tip.html |
|
||||
prev: if-else-in-JSX.html |
|
||||
next: jsx-root-node-count.html |
|
||||
--- |
|
||||
|
|
||||
In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't. |
|
||||
|
|
||||
Related: every React component can be self-closing: `<div/>`. |
|
||||
@ -1,12 +0,0 @@ |
|||||
--- |
|
||||
id: jsx-root-node-count-tip |
|
||||
title: Maximum number of JSX root nodes |
|
||||
layout: cookbook |
|
||||
permalink: jsx-root-node-count-tip.html |
|
||||
prev: self-closing-tag.html |
|
||||
next: style-prop-value-px.html |
|
||||
--- |
|
||||
|
|
||||
Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component. |
|
||||
|
|
||||
Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary. |
|
||||
@ -1,29 +0,0 @@ |
|||||
--- |
|
||||
id: style-prop-value-px-tip |
|
||||
title: Shorthand for specifying pixel values in style prop |
|
||||
layout: cookbook |
|
||||
permalink: style-prop-value-px-tip.html |
|
||||
prev: jsx-root-node-count.html |
|
||||
next: children-prop-type.html |
|
||||
--- |
|
||||
|
|
||||
When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var divStyle = {height: 10}; // rendered as "height:10px" |
|
||||
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode); |
|
||||
``` |
|
||||
|
|
||||
See [Inline Styles](/react/docs/cookbook/inline-styles-tip.html) for more info. |
|
||||
|
|
||||
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: |
|
||||
|
|
||||
- fillOpacity |
|
||||
- fontWeight |
|
||||
- lineHeight |
|
||||
- opacity |
|
||||
- orphans |
|
||||
- zIndex |
|
||||
- zoom |
|
||||
@ -1,12 +0,0 @@ |
|||||
--- |
|
||||
id: children-prop-type-tip |
|
||||
title: Type of the children prop |
|
||||
layout: cookbook |
|
||||
permalink: children-prop-type-tip.html |
|
||||
prev: style-prop-value-px.html |
|
||||
next: controlled-input-null-value.html |
|
||||
--- |
|
||||
|
|
||||
Usually, a component's `this.props.children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one. |
|
||||
|
|
||||
This means accessing, for example, `this.props.children.length` might be misleading, as it could either be the `length` property of the array of children, or that of a single string component. |
|
||||
@ -1,24 +0,0 @@ |
|||||
--- |
|
||||
id: controlled-input-null-value-tip |
|
||||
title: Value of null for controlled input |
|
||||
layout: cookbook |
|
||||
permalink: controlled-input-null-value-tip.html |
|
||||
prev: children-prop-type.html |
|
||||
next: componentWillReceiveProps-not-triggered-after-mounting.html |
|
||||
--- |
|
||||
|
|
||||
Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so. |
|
||||
|
|
||||
You might have run into a problem where `value` is specified, but the input can still be changed without consent. In this case, you might have accidentally set `value` to `undefined` or `null`. |
|
||||
|
|
||||
The snippet below shows this phenomenon; after a second, the text becomes editable. |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
React.renderComponent(<input value="hi" />, mountNode); |
|
||||
|
|
||||
setTimeout(function() { |
|
||||
React.renderComponent(<input value={null} />, mountNode); |
|
||||
}, 2000); |
|
||||
``` |
|
||||
@ -1,12 +0,0 @@ |
|||||
--- |
|
||||
id: componentWillReceiveProps-not-triggered-after-mounting-tip |
|
||||
title: componentWillReceiveProps not triggered after mounting |
|
||||
layout: cookbook |
|
||||
permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html |
|
||||
prev: controlled-input-null-value.html |
|
||||
next: props-in-getInitialSate-as-anti-pattern.html |
|
||||
--- |
|
||||
|
|
||||
`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/cookbook/component-specs.html) for the one that suits your needs. |
|
||||
|
|
||||
The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does. |
|
||||
@ -1,62 +0,0 @@ |
|||||
--- |
|
||||
id: props-in-getInitialSate-as-anti-pattern-tip |
|
||||
title: props in getInitialState is an anti-pattern |
|
||||
layout: cookbook |
|
||||
permalink: props-in-getInitialSate-as-anti-pattern-tip.html |
|
||||
prev: componentWillReceiveProps-not-triggered-after-mounting.html |
|
||||
next: dom-event-listeners.html |
|
||||
--- |
|
||||
|
|
||||
> Note: |
|
||||
> |
|
||||
> This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. |
|
||||
|
|
||||
Using props, passed down from parent, to generate state in `getInitialState` often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble. |
|
||||
|
|
||||
Bad example: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var MessageBox = React.createClass({ |
|
||||
getInitialState: function() { |
|
||||
return {nameWithQualifier: "Mr. " + this.props.name}; |
|
||||
}, |
|
||||
render: function() { |
|
||||
return <div>{this.state.nameWithQualifier}</div>; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
React.renderComponent(<MessageBox name="Zuck"/>, mountNode); |
|
||||
``` |
|
||||
|
|
||||
Better: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var MessageBox = React.createClass({ |
|
||||
render: function() { |
|
||||
return <div>{"Mr. " + this.props.name}</div>; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
React.renderComponent(<MessageBox name="Zuck"/>, mountNode); |
|
||||
``` |
|
||||
|
|
||||
For more complex logic: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var MessageBox = React.createClass({ |
|
||||
render: function() { |
|
||||
return <div>{this.getNameWithQualifier(this.props.name)}</div>; |
|
||||
}, |
|
||||
getNameWithQualifier: function(name) { |
|
||||
return 'Mr. ' + name; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
React.renderComponent(<MessageBox name="Zuck"/>, mountNode); |
|
||||
``` |
|
||||
@ -1,40 +0,0 @@ |
|||||
--- |
|
||||
id: dom-event-listeners-tip |
|
||||
title: DOM event listeners in a component |
|
||||
layout: cookbook |
|
||||
permalink: dom-event-listeners-tip.html |
|
||||
prev: props-in-getInitialSate-as-anti-pattern.html |
|
||||
next: initial-ajax.html |
|
||||
--- |
|
||||
|
|
||||
> Note: |
|
||||
> |
|
||||
> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery. |
|
||||
|
|
||||
Try to resize the window: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var Box = React.createClass({ |
|
||||
getInitialState: function() { |
|
||||
return {windowWidth: window.innerWidth}; |
|
||||
}, |
|
||||
handleResize: function(e) { |
|
||||
this.setState({windowWidth: window.innerWidth}); |
|
||||
}, |
|
||||
componentDidMount: function() { |
|
||||
window.addEventListener("resize", this.handleResize); |
|
||||
}, |
|
||||
componentWillUnmount: function() { |
|
||||
window.removeEventListener("resize", this.handleResize); |
|
||||
}, |
|
||||
render: function() { |
|
||||
return <div>Current window width: {this.state.windowWidth}</div>; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
React.renderComponent(<Box />, mountNode); |
|
||||
``` |
|
||||
|
|
||||
`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events. |
|
||||
@ -1,45 +0,0 @@ |
|||||
--- |
|
||||
id: initial-ajax-tip |
|
||||
title: Load initial data via AJAX |
|
||||
layout: cookbook |
|
||||
permalink: initial-ajax-tip.html |
|
||||
prev: dom-event-listeners.html |
|
||||
--- |
|
||||
|
|
||||
Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them. |
|
||||
|
|
||||
This example fetches the desired Github user's lastest gist: |
|
||||
|
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
|
|
||||
var UserGist = React.createClass({ |
|
||||
getInitialState: function() { |
|
||||
return { |
|
||||
username: '', |
|
||||
lastGistUrl: '' |
|
||||
}; |
|
||||
}, |
|
||||
componentDidMount: function() { |
|
||||
$.get(this.props.source, function(result) { |
|
||||
var lastGist = result[0]; |
|
||||
this.setState({ |
|
||||
username: lastGist.user.login, |
|
||||
lastGistUrl: lastGist.html_url |
|
||||
}); |
|
||||
}.bind(this)); |
|
||||
}, |
|
||||
render: function() { |
|
||||
return ( |
|
||||
<div> |
|
||||
{this.state.username}'s last gist is |
|
||||
<a href={this.state.lastGistUrl}>here</a>. |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
React.renderComponent( |
|
||||
<UserGist source="https://api.github.com/users/octocat/gists" />, mountNode |
|
||||
); |
|
||||
``` |
|
||||
@ -1,29 +0,0 @@ |
|||||
--- |
|
||||
id: false-in-jsx-tip |
|
||||
title: False in JSX |
|
||||
layout: cookbook |
|
||||
permalink: initial-ajax.html |
|
||||
prev: initial-ajax.html |
|
||||
--- |
|
||||
|
|
||||
Here's how `false` renders in different contexts: |
|
||||
|
|
||||
Renders as `id="false"`: |
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
React.renderComponent(<div id={false} />, mountNode); |
|
||||
``` |
|
||||
|
|
||||
String "false" as input value: |
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
React.renderComponent(<input value={false} />, mountNode); |
|
||||
``` |
|
||||
|
|
||||
No child: |
|
||||
```js |
|
||||
/** @jsx React.DOM */ |
|
||||
React.renderComponent(<div>{false}</div>, mountNode); |
|
||||
``` |
|
||||
|
|
||||
The reason why this one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && You have more than one item}</div>`. |
|
||||
Loading…
Reference in new issue