└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | React-Cookbook
  2 | ==============
  3 | 
  4 | Recipes for making your React.js Components Awesome, or at least a little cleaner
  5 | 
  6 | * [Basics](#basics)
  7 |    * [Use 'className' for class](#use-classname-for-class)
  8 |    * [Style tags can be done inline](#style-tags-can-be-done-inline)
  9 | * [Intermediate](#intermediate)
 10 |    * [Use ternary operator for if/else](#use-ternary-operator-for-ifelse)
 11 |    * [Use 'map' to cleanly iterate over arrays](#use-map-to-cleanly-iterate-over-arrays)
 12 |    * [Use 'classSet' to toggle classes](#use-classset-to-toggle-classes)
 13 |    * [ReactLink can be used for two-way data bindings](#reactlink-can-be-used-for-two-way-data-bindings)
 14 |    * [Reduce can be used for simple list filtering](#reduce-can-be-used-for-simple-list-filtering)
 15 |    * [Use bind to map specifiic parameters for event handlers](#use-bind-to-map-specifiic-parameters-for-event-handlers)
 16 |    * [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)
 17 | 
 18 | ### Basics
 19 | 
 20 | #### Use 'className' for class
 21 | 
 22 | ```
 23 | render: function() {
 24 |   return (
 25 |     <button className="Btn Primary">Button</button>
 26 |   );
 27 | }
 28 | ```
 29 | 
 30 | #### Style tags can be done inline
 31 | 
 32 | `NOTE: React uses camelCased for attribute names 'backgroundColor for 'background-color'`
 33 | 
 34 | ```
 35 | render: function() {
 36 |   return (
 37 |     <div style={{color: 'white', backgroundColor: 'lightblue'}}>Test</div>
 38 |   );
 39 | }
 40 | ```
 41 | 
 42 | [view fiddle](http://jsfiddle.net/EwCAf/)
 43 | 
 44 | 
 45 | 
 46 | ### Intermediate
 47 | 
 48 | #### Use ternary operator for if/else
 49 | 
 50 | ```
 51 | render: function() {
 52 |   var coinflip = Math.random() < .5;
 53 |   return (
 54 |     <div>
 55 |       {(coinflip) ?
 56 |         <div>Heads</div> :
 57 |         <div>Tails</div>
 58 |       }
 59 |     </div>
 60 |   );
 61 | }
 62 | ```
 63 | 
 64 | [view fiddle](http://jsfiddle.net/MBu9v/)
 65 | 
 66 | #### Use 'map' to cleanly iterate over arrays
 67 | 
 68 | ```
 69 | render: function() {
 70 |   var list = ['one', 'two', 'three'];
 71 |   return (
 72 |     <ul>
 73 |       {list.map(function(item, idx) {
 74 |         return <li key={idx}>{item}</li>
 75 |       })}
 76 |     </ul>
 77 |   );
 78 | }
 79 | ```
 80 | [view fiddle](http://jsfiddle.net/ggVt6/)
 81 | 
 82 | #### Use 'classSet' to toggle classes
 83 | ```
 84 | var cx = React.addons.classSet;
 85 | 
 86 | ...
 87 | render: function() {
 88 |   return <div className={cx({
 89 |     'message': true,
 90 |     'message-important': this.props.isImportant,
 91 |     'message-read': this.props.isRead
 92 |   })}>Great, I'll be there.</div>;
 93 | }
 94 | ```
 95 | 
 96 | [view fiddle](http://jsfiddle.net/v4Uwb/2/)
 97 | 
 98 | #### ReactLink can be used for two-way data bindings
 99 | 
100 | ```
101 | mixins: [React.addons.LinkedStateMixin],
102 | getInitialState: function() {
103 |   return {value: 'Hello!'};
104 | },
105 | render: function() {
106 |   return (
107 |     <div>
108 |       <input type="text" valueLink={this.linkState('value')} />
109 |       <div>You typed: {this.state.value}</div>
110 |     </div>
111 |   );
112 | }
113 | ```
114 | 
115 | [view fiddle](http://jsfiddle.net/vvS8F/)
116 | 
117 | #### Reduce can be used for simple list filtering
118 | 
119 | ```
120 | return (
121 |   <ul>
122 |       {messages.reduce(function(messages, item) {
123 |         if (match(item, filter)) {
124 |           messages.push(<li>{item.title}</li>)
125 |         }
126 |         return messages;
127 |       }, [])}
128 |   </ul>
129 | );
130 | ```
131 | 
132 | [view fiddle](http://jsfiddle.net/qTQtD/)
133 | 
134 | #### Use bind to map specifiic parameters for event handlers
135 | 
136 | ```
137 | 		onClick: function(value, e) {
138 | 			e.preventDefault();
139 | 			this.props.onChange({
140 | 				choice: value
141 | 			}, true);
142 | 			this.setState({
143 | 				choice: value
144 | 			});
145 | 		},
146 | 
147 | 		render: function() {
148 | 			var self = this,
149 | 				cx = React.addons.classSet,
150 | 				choices = this.props.choices,
151 | 				selected = this.state.choice;
152 | 
153 | 			return (
154 | 				<ul className="Choices">
155 | 					{choices.map(function(choice) {
156 | 						return <li key={choice.value} className={cx({'Selected': (choice.value === selected)})}><a href='#' onClick={self.onClick.bind(null, choice.value)}>{choice.label}</a></li>;
157 | 					})}
158 | 				</ul>
159 | 			);
160 | 		}
161 | ```
162 | 
163 | > Note: bind should have "null" as its first parameter, React will automatically re-bind with "this"
164 | 
165 | [view fiddle](http://jsfiddle.net/1w57b59n/3/)
166 | 
167 | #### Handler callback functions can be used a props to get events for subcomponents
168 | 
169 | ```
170 | 		onClick: function(value, e) {
171 | 			e.preventDefault();
172 | 			this.props.onChange({
173 | 				choice: value
174 | 			}, true);
175 | 			this.setState({
176 | 				choice: value
177 | 			});
178 | 		},
179 | 
180 | 
181 | ...
182 | 
183 |     <div>
184 |         <div>{'Selected: ' + this.state.selected}</div>
185 |         <Chooser choices={choices} onChange={this.choiceChange} />
186 |     </div>
187 | ```
188 | 
189 | [view fiddle](http://jsfiddle.net/1w57b59n/3/)
190 | 
191 | 


--------------------------------------------------------------------------------