Markdown updates

lusia · Apr 9, 2017 · ee1608b · ee1608b
1 parent 4ce7453
commit ee1608b
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 29 deletions.
diff --git a/patterns/28.decorators.md b/patterns/28.decorators.md
@@ -18,14 +18,14 @@ export default class ProfileContainer extends Component {
   // Component code
 }
 ```
-Check for a Decorator usage example [here](https://github.com/gigobyte/react-document-title-decorator)
 
 ### Article:
-  - https://medium.com/@gigobyte/enhancing-react-components-with-decorators-441320e8606a
+- [Enhancing React components with Decorators](https://medium.com/@gigobyte/enhancing-react-components-with-decorators-441320e8606a)
 
 ### Related:
-- https://twitter.com/dan_abramov/status/628202050946514944
-- http://stackoverflow.com/questions/36553814/what-is-the-use-of-connect-decorator-in-react-redux
-- http://stackoverflow.com/questions/36286384/decorators-with-react-components
-- https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.8cbzw5wcl
-- https://survivejs.com/react/appendices/understanding-decorators/
+- [Decorators != higher ordered components](https://twitter.com/dan_abramov/status/628202050946514944)
+- [React Decorator example - Module](https://github.com/gigobyte/react-document-title-decorator)
+- [What is the use of Connect(decorator in react-redux)](http://stackoverflow.com/questions/36553814/what-is-the-use-of-connect-decorator-in-react-redux)
+- [Decorators with React Components](http://stackoverflow.com/questions/36286384/decorators-with-react-components)
+- [Exploring ES7 decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.8cbzw5wcl)
+- [Understanding Decorators](https://survivejs.com/react/appendices/understanding-decorators/)
diff --git a/patterns/29.feature-flags-using-redux.md b/patterns/29.feature-flags-using-redux.md
@@ -1,10 +1,6 @@
 # Feature Flags
 Enabling Feature flags in React using Redux
 
-### Reference:
- - http://blog.rstankov.com/feature-flags-in-react/
- - https://gist.github.com/RStankov/0e764f27daf38f2fcd81b82360334528
-
 ```javascript
 // createFeatureFlaggedContainer.js
 import React from 'react';
@@ -109,3 +105,6 @@ export isFeatureEnabled({ features }, featureName) {
   return isFeatureEnabledSelector(features, featureName);
 }
 ```
+### Reference:
+ - http://blog.rstankov.com/feature-flags-in-react/
+ - https://gist.github.com/RStankov/0e764f27daf38f2fcd81b82360334528
diff --git a/patterns/30.component-switch.md b/patterns/30.component-switch.md
@@ -1,9 +1,6 @@
 # The switching component
 A switching component is a component that renders one of many components.
 
-### Reference:
- - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
-
 Use an object to map prop values to components
 ```javascript
 import HomePage from './HomePage.jsx';
@@ -28,3 +25,6 @@ Page.propTypes = {
   page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
 };
 ```
+
+### Reference:
+ - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
diff --git a/patterns/31.reaching-into-a-component.md b/patterns/31.reaching-into-a-component.md
@@ -2,10 +2,6 @@
 Accessing a component from the parent.
 eg. Autofocus an input (controlled by parent component)
 
-### Reference:
-- https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
-
-
 #### Child Component
 An input component with a focus() method that focuses the HTML element
 ```javascript
@@ -45,3 +41,6 @@ class SignInModal extends Component {
   }
 }
 ```
+### Reference:
+- https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
+
diff --git a/patterns/32.list-components.md b/patterns/32.list-components.md
@@ -1,10 +1,6 @@
 # Lists Components
 Lists and other things that are almost components
 
-### Reference:
-- https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
-
-
 Instead of making a separate component for lists I can then generate the results like:
 ```javascript
 const SearchSuggestions = (props) => {
@@ -24,3 +20,7 @@ const SearchSuggestions = (props) => {
 If things get more complex or you want to use this component elsewhere,
 you should be able to copy/paste the code out into a new component.
 Don’t prematurely componentize.
+
+### Reference:
+- https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
+
diff --git a/patterns/33.format-text-via-component.md b/patterns/33.format-text-via-component.md
@@ -2,12 +2,7 @@
 Instead of formatting text by calling helper functions inside render, we can create a separate component that
 handles this.
 
-### Reference:
-  - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
-
-
-
-#### WITH COMPONENT
+#### With Component
 Render function is lot cleaner to comprehend as it is just simple component composition.
 ```javascript
 const Price = (props) => {
@@ -56,7 +51,7 @@ const Page = () => {
   );
 };
 ```
-#### WITHOUT COMPONENT
+#### Without Component
 Less code: But render looks less clean. (Debatable, yeah I understand)
 ```javascript
 function numberToPrice(num, options = {}) {
@@ -86,3 +81,7 @@ const Page = () => {
   );
 };
 ```
+
+### Reference:
+  - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
+