Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carystanley/react-cookbook
React Cookbook - Recipes for making your React.js Components Awesome, or at least a little cleaner
https://github.com/carystanley/react-cookbook
Last synced: 23 days ago
JSON representation
React Cookbook - Recipes for making your React.js Components Awesome, or at least a little cleaner
- Host: GitHub
- URL: https://github.com/carystanley/react-cookbook
- Owner: carystanley
- Created: 2014-06-20T16:24:33.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-28T17:13:07.000Z (over 7 years ago)
- Last Synced: 2024-11-14T00:23:55.088Z (3 months ago)
- Homepage:
- Size: 3.91 KB
- Stars: 56
- Watchers: 6
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React-Cookbook
==============
Recipes for making your React.js Components Awesome, or at least a little cleaner
* [Basics](#basics)
* [Use 'className' for class](#use-classname-for-class)
* [Style tags can be done inline](#style-tags-can-be-done-inline)
* [Intermediate](#intermediate)
* [Use ternary operator for if/else](#use-ternary-operator-for-ifelse)
* [Use 'map' to cleanly iterate over arrays](#use-map-to-cleanly-iterate-over-arrays)
* [Use 'classSet' to toggle classes](#use-classset-to-toggle-classes)
* [ReactLink can be used for two-way data bindings](#reactlink-can-be-used-for-two-way-data-bindings)
* [Reduce can be used for simple list filtering](#reduce-can-be-used-for-simple-list-filtering)
* [Use bind to map specifiic parameters for event handlers](#use-bind-to-map-specifiic-parameters-for-event-handlers)
* [Handler callback functions can be used a props to get events for subcomponents](#handler-callback-functions-can-be-used-a-props-to-get-events-for-subcomponents)
### Basics
#### Use 'className' for class
```
render: function() {
return (
Button
);
}
```
#### Style tags can be done inline
`NOTE: React uses camelCased for attribute names 'backgroundColor for 'background-color'`
```
render: function() {
return (
Test
);
}
```
[view fiddle](http://jsfiddle.net/EwCAf/)
### Intermediate
#### Use ternary operator for if/else
```
render: function() {
var coinflip = Math.random() < .5;
return (
{(coinflip) ?
Heads :
Tails
}
);
}
```
[view fiddle](http://jsfiddle.net/MBu9v/)
#### Use 'map' to cleanly iterate over arrays
```
render: function() {
var list = ['one', 'two', 'three'];
return (
- {item}
{list.map(function(item, idx) {
return
})}
);
}
```
[view fiddle](http://jsfiddle.net/ggVt6/)
#### Use 'classSet' to toggle classes
```
var cx = React.addons.classSet;
...
render: function() {
return
}
```
[view fiddle](http://jsfiddle.net/v4Uwb/2/)
#### ReactLink can be used for two-way data bindings
```
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {value: 'Hello!'};
},
render: function() {
return (
);
}
```
[view fiddle](http://jsfiddle.net/vvS8F/)
#### Reduce can be used for simple list filtering
```
return (
- {item.title} )
{messages.reduce(function(messages, item) {
if (match(item, filter)) {
messages.push(
}
return messages;
}, [])}
);
```
[view fiddle](http://jsfiddle.net/qTQtD/)
#### Use bind to map specifiic parameters for event handlers
```
onClick: function(value, e) {
e.preventDefault();
this.props.onChange({
choice: value
}, true);
this.setState({
choice: value
});
},
render: function() {
var self = this,
cx = React.addons.classSet,
choices = this.props.choices,
selected = this.state.choice;
return (
- {choice.label} ;
{choices.map(function(choice) {
return
})}
);
}
```
> Note: bind should have "null" as its first parameter, React will automatically re-bind with "this"
[view fiddle](http://jsfiddle.net/1w57b59n/3/)
#### Handler callback functions can be used a props to get events for subcomponents
```
onClick: function(value, e) {
e.preventDefault();
this.props.onChange({
choice: value
}, true);
this.setState({
choice: value
});
},
...
```
[view fiddle](http://jsfiddle.net/1w57b59n/3/)