Related Links - title

Author: vasanthk

anti-patterns/01.props-in-initial-state.md

@@ -41,5 +41,5 @@ class SampleComponent extends Component {
 }
 ```
 
-### Reference:
+### Related links:
  - https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e

anti-patterns/02.refs-over-findDOMNode.md

@@ -115,5 +115,5 @@ class MyComponent extends Component {
 }
 ```
 
-### Reference:
+### Related links:
 - [ESLint Rule proposal: warn against using findDOMNode()](https://github.com/yannickcr/eslint-plugin-react/issues/678#issue-165177220)

anti-patterns/03.HOC-over-mixins.md

@@ -78,7 +78,7 @@ var FirstView = bindToCarData(React.createClass({
 }));
 ```
 
-### Reference:
+### Related links:
 - [Mixins are dead - Long live higher ordercomponents](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)
 - [Mixins are considered harmful](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html)
 - [Stackoverflow: Using mixins vs components for code reuse](http://stackoverflow.com/questions/21854938/using-mixins-vs-components-for-code-reuse-in-facebook-react)

anti-patterns/05.mutating-state.md

@@ -66,5 +66,5 @@ class SampleComponent extends Component {
 }
 ```
 
-### Reference:
+### Related links:
 [React Design Patterns and best practices by Michele Bertoli.](https://github.com/MicheleBertoli/react-design-patterns-and-best-practices)

anti-patterns/07.spreading-props-dom.md

@@ -14,5 +14,5 @@ const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
 const Spread = (props) => (<div {...props.domProps}>Test</div>);
 ```
 
-### Reference:
+### Related links:
 - [React Design Patterns and best practices by Michele Bertoli.](https://github.com/MicheleBertoli/react-design-patterns-and-best-practices)

gotchas/01.pure-render-checks.md

@@ -140,6 +140,6 @@ class Component extends React.Component {
 }
 ```
 
-### Reference:
+### Related links:
 - https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
 - https://github.com/nfour/js-structures/blob/master/guides/react-anti-patterns.md#pure-render-immutability

gotchas/02.synthetic-events.md

@@ -21,5 +21,5 @@ function handleClick(event) {
 }
 ```
 
-### Reference:
+### Related links:
 - [React/Redux: Best practices & gotchas](https://medium.com/nick-parsons/react-redux-best-practices-gotchas-56cf61c1c415)

patterns/01.stateless-functions.md

@@ -49,7 +49,7 @@ Greeting.contextTypes = {
 };
 ```
 
-### Reference:
+### Related links:
 - [React Stateless Functional Components](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.uf2v8yt3y)
 - [Some Thoughts on Function Components in React](https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7#.yol3kq7gb)
 - [Container Components and Stateless Functional Components in React](http://www.zsoltnagy.eu/container-components-and-stateless-functional-components-in-react/)

patterns/02.jsx-spread-attributes.md

@@ -57,6 +57,6 @@ const FancyDiv = ({ className, ...props }) => (
 
 Although convenient, spread operators do increase the connascence (complexity or type of coupling) and may make debugging occur at run-time instead of before for the developer and any future maintainers. Also, it is better to use spread operators on props into components and then deconstruct the object instead of blindly passing `props` onto React DOM Elements. This is an [anti-pattern](../anti-patterns/07.spreading-props-dom.md). Passing objects with undetermined contents onto React DOM Elements will increase the likelihood of invalid HTML attributes.
 
-### References:
+### Related links:
 
 [JSX Spread Attributes](https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81)

patterns/08.render-callback.md

@@ -75,6 +75,6 @@ class WindowWidth extends React.Component {
 
 Many developers favor Higher Order Components for this type of functionality. It’s a matter of preference.
 
-### Related Links
+### Related links:
 
 [Github Gist and conversation](https://gist.github.com/vasanthk/b6988e1904f219c6ca236289caad865d)

patterns/09.children-pass-through.md

@@ -156,5 +156,5 @@ From another point of view having an explicit method like renderTodo makes it ev
 
 **Opinion:** Personally I like renderTodo() function being passed to the component (or) having it inside the component.
 
-### Reference:
+### Related links:
 [Children types](http://krasimirtsonev.com/blog/article/children-in-jsx)

patterns/17.controlled-uncontrolled-input.md

@@ -136,7 +136,7 @@ class NameForm extends React.Component {
 ```
 Likewise, `<input type="checkbox">` and `<input type="radio">` support defaultChecked, and `<select>` supports defaultValue.
 
-### Reference:
+### Related links:
 - Gist: https://gist.github.com/vasanthk/a6bf35857749b09275a339f6fd9469bb
 - In depth: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
 - https://www.sitepoint.com/video-controlled-vs-uncontrolled-components-in-react/

patterns/18.conditionals-in-jsx.md

@@ -61,7 +61,7 @@ const sampleComponent = () => {
 };
 ```
 
-### Reference:
+### Related links:
 - https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8
 
 

patterns/19.async-nature-of-setState.md

@@ -155,6 +155,6 @@ ReactComponent.prototype.setState = function(partialState, callback) {
 
 What's actually sync or async are the effects of calling setState in a React application - the reconciliation algorithm, doing the VDOM comparisons and calling render to update the real DOM.
 
-## Reference:
+## Related links:
 - https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3#.jhdhncws3
 - https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm

patterns/20.dependency-injection.md

@@ -114,7 +114,7 @@ Inject.contextTypes = {
 };
 ```
 
-### Reference:
+### Related links:
 - [What is Dependency Injection?](https://www.youtube.com/watch?v=IKD2-MAkXyQ)
 - [The Basics of Dependency Injection](https://www.youtube.com/watch?v=jXhdOTw1q5Q)
 - [Dependency injection in JavaScript](http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)

patterns/23.flux-pattern.md

@@ -85,5 +85,5 @@ module.exports = {
 };
 ```
 
-### Reference:
+### Related links:
 - https://github.com/krasimir/react-in-patterns/tree/master/patterns/flux

patterns/24.one-way-data-flow.md

@@ -64,5 +64,5 @@ The benefit that comes with this pattern is that our components become dummy rep
 It's really easy to think about the React components as views (renderers).
 We write our application in a declarative way and deal with the complexity in only one place.
 
-### Reference:
+### Related links:
 - https://www.startuprocket.com/articles/evolution-toward-one-way-data-flow-a-quick-introduction-to-redux

patterns/25.presentational-vs-container.md

@@ -129,7 +129,7 @@ export default function (Component) {
 Using this technique our container is really flexible in rendering its result.
 It will be really helpful if we want to switch from digital to analog clock representation.
 
-### Reference:
+### Related links:
  - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mbglcakmp
  - https://github.com/krasimir/react-in-patterns/tree/master/patterns/presentational-and-container
  - https://medium.com/@learnreact/container-components-c0e67432e005

patterns/26.third-party-integration.md

@@ -83,5 +83,5 @@ class Tags extends React.Component {
   }
 }
 ```
-### Reference:
+### Related links:
   - https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party

patterns/27.passing-function-to-setState.md

@@ -30,5 +30,5 @@ this.setState({ expanded: !this.state.expanded });
 this.setState(prevState => ({ expanded: !prevState.expanded }));
 ```
 
-### Reference
+### Related links:
 - https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82

patterns/29.feature-flags-using-redux.md

@@ -105,6 +105,6 @@ export isFeatureEnabled({ features }, featureName) {
   return isFeatureEnabledSelector(features, featureName);
 }
 ```
-### Reference:
+### Related links:
  - http://blog.rstankov.com/feature-flags-in-react/
  - https://gist.github.com/RStankov/0e764f27daf38f2fcd81b82360334528

patterns/30.component-switch.md

@@ -26,5 +26,5 @@ Page.propTypes = {
 };
 ```
 
-### Reference:
+### Related links:
  - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5

patterns/32.list-components.md

@@ -21,6 +21,6 @@ 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:
+### Related links:
 - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
 

perf-tips/01.shouldComponentUpdate-check.md

@@ -72,5 +72,5 @@ export default class AutocompleteItem extends React.Component {
 }
 ```
 
-### Reference:
+### Related links:
 - [React Performance optimization](https://medium.com/@nesbtesh/react-performance-optimization-28ec5b61fff3)

perf-tips/02.pure-component.md

@@ -36,6 +36,6 @@ export default class Example extends PureComponent {
 })
 ```
 
-### Reference:
+### Related links:
 - [Recompose](https://github.com/acdlite/recompose#composition)
 - [React: PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent)

perf-tips/03.reselect.md

@@ -40,5 +40,5 @@ const doubleRes = createSelector(
   })
 );
 ```
-### Reference:
+### Related links:
 - [React](https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.cz2ypc2ob)

ux-variations/01.composing-variations.md

@@ -56,5 +56,5 @@ class MemberSignIn extends Component {
 export default MemberSignIn;
 ```
 
-### Reference:
+### Related links:
 - [Slides from my talk: Building Multi-tenant UI with React](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)

ux-variations/02.toggle-ui-elements.md

@@ -37,5 +37,5 @@ class PasswordField extends Component {
 }
 ```
 
-### Reference:
+### Related links:
 - [Slides from my talk: Building Multi-tenant UI with React](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)

ux-variations/05.wrapper-components.md

@@ -20,5 +20,5 @@ const Parent = () => {
   </div>
 };
 ```
-### Reference:
+### Related links:
 - [Slides from my talk: Building Multi-tenant UI with React](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)

ux-variations/06.display-order-variations.md

@@ -19,5 +19,5 @@ class PageSections extends Component {
   }
 }
 ```
-### Reference:
+### Related links:
 - [Slides from my talk: Building Multi-tenant UI with React](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)