vuquangtam · January 11, 2017 16:17 · Mar 10, 2015 · Mar 10, 2015 · Mar 10, 2015 · Mar 10, 2015
diff --git a/Learning.markdown b/Learning.markdown
@@ -57,7 +57,7 @@ render: ->
   priority_active = @state.vote == 'priority'
 ```
 
-#### 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method `in render()`
+#### 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method in `render()`
 
 ```coffee
 popoverClasses = =>

diff --git a/Learning.markdown b/Learning.markdown
@@ -2,19 +2,21 @@
 
 These are some things I've found helpful after doing React for a couple months. It's possible these practices are short sighted and will cause other problems, I just haven't hit those bumps in the road yet. 
 
-### 1. Always define your `propTypes`. Always. 
+This list started after reading this phenomincal article on [React Tips and Best Practicies](http://aeflash.com/2015-02/react-tips-and-best-practices.html).
+
+#### 1. Always define your `propTypes`. Always. 
 
 Think of `propTypes` as a love letter to whatever developer will work on a component after you. Your components should be as declarative as possible. React's error messaging is so clear and helpful and this will make things so much easier.
 
-### 2. For any `propType` that isn't required, always set it in `getDefaultProps`
+#### 2. For any `propType` that isn't required, always set it in `getDefaultProps`
 
 Defaults are not only helpful, this will reveals some code smells if you are passing around props that could be clarified further. If it isn't required and doesn't have a default what the hell is it?
 
-### 3. Rely on `...splats` over passing props explicity
+#### 3. Rely on `...splats` over passing props explicity
 
 Using splats (`{...this.props}`) when passing lots of props is so much less noisy. If your components `propTypes` are properly defined then there should be no mystery what it needs. Basically read the [Transferring Props](https://facebook.github.io/react/docs/transferring-props.html) documentation
 
-#### A note on splats, destructuring assignment & coffeescript
+##### A note on splats, destructuring assignment & coffeescript
 
 Destructuring assignment of objects in coffeescript gets weird and the JSX compiling seems to miss this some times. There is also no `...` for objects. In place of that I've been using two patterns with `lodash`:
 
@@ -35,7 +37,7 @@ render: ->
   childComponentProps = _.omit(@props, ['candidates','priorityOnly', 'groupBy', 'sortBy', 'parentName'])
 ```
 
-### 4. Place derived props or state in `render()` rather than in `getInitialState`
+#### 4. Place derived props or state in `render()` rather than in `getInitialState`
 
 There are many times that you need to derive some sort of variable based on a prop or state. These values, if they can be deterministally set based on a specific prop or some aspect of the state should always be placed in the `render()` method
 
@@ -55,7 +57,7 @@ render: ->
   priority_active = @state.vote == 'priority'
 ```
 
-### 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method `in render()`
+#### 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method `in render()`
 
 ```coffee
 popoverClasses = =>

diff --git a/Learning.markdown b/Learning.markdown
@@ -1,20 +1,20 @@
-# **React Best Practices** - Lessons learned after a couple months of using React
+## **React Best Practices** - Lessons learned after a couple months of using React
 
 These are some things I've found helpful after doing React for a couple months. It's possible these practices are short sighted and will cause other problems, I just haven't hit those bumps in the road yet. 
 
-## 1. Always define your `propTypes`. Always. 
+### 1. Always define your `propTypes`. Always. 
 
 Think of `propTypes` as a love letter to whatever developer will work on a component after you. Your components should be as declarative as possible. React's error messaging is so clear and helpful and this will make things so much easier.
 
-## 2. For any `propType` that isn't required, always set it in `getDefaultProps`
+### 2. For any `propType` that isn't required, always set it in `getDefaultProps`
 
 Defaults are not only helpful, this will reveals some code smells if you are passing around props that could be clarified further. If it isn't required and doesn't have a default what the hell is it?
 
-## 3. Rely on `...splats` over passing props explicity
+### 3. Rely on `...splats` over passing props explicity
 
 Using splats (`{...this.props}`) when passing lots of props is so much less noisy. If your components `propTypes` are properly defined then there should be no mystery what it needs. Basically read the [Transferring Props](https://facebook.github.io/react/docs/transferring-props.html) documentation
 
-### A note on splats, destructuring assignment & coffeescript
+#### A note on splats, destructuring assignment & coffeescript
 
 Destructuring assignment of objects in coffeescript gets weird and the JSX compiling seems to miss this some times. There is also no `...` for objects. In place of that I've been using two patterns with `lodash`:
 
@@ -35,7 +35,7 @@ render: ->
   childComponentProps = _.omit(@props, ['candidates','priorityOnly', 'groupBy', 'sortBy', 'parentName'])
 ```
 
-## 4. Place derived props or state in `render()` rather than in `getInitialState`
+### 4. Place derived props or state in `render()` rather than in `getInitialState`
 
 There are many times that you need to derive some sort of variable based on a prop or state. These values, if they can be deterministally set based on a specific prop or some aspect of the state should always be placed in the `render()` method
 
@@ -55,7 +55,7 @@ render: ->
   priority_active = @state.vote == 'priority'
 ```
 
-## 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method `in render()`
+### 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method `in render()`
 
 ```coffee
 popoverClasses = =>

diff --git a/Learning → Learning.markdown b/Learning → Learning.markdown
@@ -1,3 +1,5 @@
+# **React Best Practices** - Lessons learned after a couple months of using React
+
 These are some things I've found helpful after doing React for a couple months. It's possible these practices are short sighted and will cause other problems, I just haven't hit those bumps in the road yet. 
 
 ## 1. Always define your `propTypes`. Always. 

diff --git a/Learning b/Learning
@@ -0,0 +1,66 @@
+These are some things I've found helpful after doing React for a couple months. It's possible these practices are short sighted and will cause other problems, I just haven't hit those bumps in the road yet. 
+
+## 1. Always define your `propTypes`. Always. 
+
+Think of `propTypes` as a love letter to whatever developer will work on a component after you. Your components should be as declarative as possible. React's error messaging is so clear and helpful and this will make things so much easier.
+
+## 2. For any `propType` that isn't required, always set it in `getDefaultProps`
+
+Defaults are not only helpful, this will reveals some code smells if you are passing around props that could be clarified further. If it isn't required and doesn't have a default what the hell is it?
+
+## 3. Rely on `...splats` over passing props explicity
+
+Using splats (`{...this.props}`) when passing lots of props is so much less noisy. If your components `propTypes` are properly defined then there should be no mystery what it needs. Basically read the [Transferring Props](https://facebook.github.io/react/docs/transferring-props.html) documentation
+
+### A note on splats, destructuring assignment & coffeescript
+
+Destructuring assignment of objects in coffeescript gets weird and the JSX compiling seems to miss this some times. There is also no `...` for objects. In place of that I've been using two patterns with `lodash`:
+
+When your child components have a lot of props
+```coffee
+render: ->
+  moveStageProps = _.pick(@props, ['stage', 'searchStages', 'id'])
+
+  <MoveStage {...moveStageProps} />
+```
+
+When your child components have a ton of props:
+```coffee
+render: ->
+  # Pull out the props into variables for the parent components
+  { candidates, priorityOnly, groupBy, sortBy, parentName } = @props
+  # Omit those same props for the childComponents
+  childComponentProps = _.omit(@props, ['candidates','priorityOnly', 'groupBy', 'sortBy', 'parentName'])
+```
+
+## 4. Place derived props or state in `render()` rather than in `getInitialState`
+
+There are many times that you need to derive some sort of variable based on a prop or state. These values, if they can be deterministally set based on a specific prop or some aspect of the state should always be placed in the `render()` method
+
+Bad:
+```coffee
+getInitialState: ->
+  vote: @props.cast_vote
+  priority_active: @props.cast_vote == 'priority'
+```
+
+Good: 
+```coffee
+getInitialState: ->
+  vote: @props.cast_vote
+
+render: ->
+  priority_active = @state.vote == 'priority'
+```
+
+## 5. `React.addons.classSet` is limited and depricated. Make a `<component>Classes()` method `in render()`
+
+```coffee
+popoverClasses = =>
+  classes = ['popover', 'bottom']
+  classes.push('is-visible') if @props.isPopoverVisible
+  classes.push("popover-#{type}")
+  classes.join(' ')
+
+  `<div className={popoverClasses()} >`
+```