Update README

README.md

@@ -1,8 +1,172 @@
-# React Techniques & Patterns 
+# React Bits
 
-A compilation of React Techniques and patterns out there in the wild.
+A compilation of React Patterns, techniques, tips and tricks.
 
-## Readings
+Your contributions are heartily♡ welcome. (✿◠‿◠)
+
+---
+
+## Design Patterns and Techniques
+
+- [Stateless Functions](./01.stateless-functions.jsx)
+
+- [JSX Spread Attributes](./02.jsx-spread-attributes.jsx)
+
+- [Destructuring Arguments](./03.destructuring-arguments.jsx)
+
+- [Conditional Rendering](./04.conditional-rendering.jsx)
+
+- [Children Types](./05.children-types.jsx)
+
+- [Array As Children](./06.array-as-children.jsx)
+
+- [Function As Children](./07.function-as-children.jsx)
+
+- [Render Callback](./08.render-callback.jsx)
+
+- [Children Pass Through](./09.children-pass-through.jsx)
+
+- [Proxy Component](./10.proxy-component.jsx)
+
+- [Style Component](./11.style-component.jsx)
+
+- [Event Switch](./12.event-switch.jsx)
+
+- [Layout Component](./13.layout-container.jsx)
+
+- [Container Component](./14.container-component.jsx)
+
+- [Higher Order Component](./15.higher-order-component.jsx)
+
+- [State Hoisting](./16.state-hoisting.jsx)
+
+- [Controlled-Uncontrolled Input](./17.controlled-uncontrolled-input.jsx)
+
+- [Conditionals In JSX](./18.conditionals-in-jsx.jsx)
+
+- [Async Nature Of setState()](./19.async-nature-of-setState.jsx)
+
+- [Dependency Injection](./20.dependency-injection.js)
+
+- [Context Wrapper](./21.context-wrapper.jsx)
+
+- [Event Handlers](./22.event-handlers.jsx)
+
+- [Flux Pattern](./23.flux-pattern.jsx)
+
+- [One Way Data Flow](./24.one-way-data-flow.jsx)
+
+- [Presentational vs Container](./25.presentational-vs-container.jsx)
+
+- [Third Party Integration](./26.third-party-integration.jsx)
+
+- [Passing Function To setState()](./27.passing-function-to-setState.jsx)
+
+- [Decorators](./28.decorators.jsx)
+
+- [Feature Flags](./29.feature-flags-using-redux.jsx	)
+
+- [Component Switch](./30.component-switch.jsx)
+
+- [Reaching Into A Component](./31.reaching-into-a-component.jsx)
+
+- [List Components](./32.list-components.jsx)
+
+- [Format Text via Component](./33.format-text-via-component.jsx	)
+
+- [Share Tracking Logic](./34.share-tracking-logic.jsx)
+
+## Anti-Patterns
+
+- [Props In Initial State](anti-patterns/01.props-in-initial-state.jsx)
+
+- [Refs over findDOMNode()](anti-patterns/02.refs-over-findDOMNode.jsx)
+
+- [HOC over Mixins](anti-patterns/03.HOC-over-mixins.jsx)
+
+- [setState() in componentWillMount()](anti-patterns/04.setState-in-componentWillMount.jsx)
+
+- [Mutating State](anti-patterns/05.mutating-state.jsx)
+
+- [Using Indexes as Key](anti-patterns/06.using-indexes-as-key.jsx)
+
+- [Spreading Props on DOM elements](anti-patterns/07.spreading-props-dom.jsx)
+
+## Handling UX Variations
+
+- [Composing UX Variations](ux-variations/01.composing-variations.jsx)
+
+- [Toggle UI Elements](ux-variations/02.toggle-ui-elements.jsx)
+
+- [HOC for Feature Toggles](ux-variations/03.HOC-feature-toggles.jsx)
+
+- [HOC for Props Proxy](ux-variations/04.HOC-props-proxy.jsx)
+
+- [Wrapper Components](ux-variations/05.wrapper-components.jsx)
+
+- [Display Order Variations](ux-variations/06.display-order-variations.jsx)
+
+## Conventions
+
+- [Class Organization](conventions/01.class-organization.jsx)
+
+- [Adding Class Names](conventions/02.adding-class-names.jsx)
+
+- [Computed Props and State](conventions/03.computed-props-state.jsx)
+
+- [Cached variables in render()](conventions/04.cached-vars-in-render.jsx)
+
+- [Using HTML Entities](conventions/05.use-html-entities.jsx)
+
+- [Tables](conventions/06.tables.jsx)
+
+- [Inline List Iteration](conventions/07.inline-list-iteration.jsx)
+
+- [Closures in render()](conventions/08.closures-in-render.jsx)
+
+- [Functional Components](conventions/09.functional-components.jsx)
+
+- [Formatting Props](conventions/10.formatting-props.jsx)
+
+- [ES6 class constructor super()](conventions/11.super-in-constructor.jsx)
+
+## Perf Tips
+
+- [shouldComponentUpdate() check](perf-tips/01.shouldComponentUpdate-check.jsx)
+
+- [Using recompose](perf-tips/02.recompose.jsx)
+
+- [Using reselect](perf-tips/03.reselect.jsx)
+
+## Styling
+
+- [Stateless UI Components](styling/01.stateless-ui-components.jsx)
+
+- [Styles Module](styling/02.styles-module.jsx)
+
+- [Style Functions](styling/03.style-functions.jsx)
+
+- [NPM Modules](styling/04.using-npm-modules.jsx)
+
+- [Base Component](styling/05.base-component.jsx)
+
+- [Layout Component](styling/06.layout-component.jsx)
+
+- [Typography Component](styling/07.typography-component.jsx)
+
+- [HOC for Styling](styling/08.HOC-for-styling.jsx)
+
+## Gotchas
+
+- [Pure render checks](gotchas/01.pure-render-checks.jsx)
+
+- [Synthetic Events](gotchas/02.synthetic-events.jsx)
+
+## References
+
+I tried to link them all in my code. Pardon me if I missed a few.
+
+Here are a few great resources:
 
 [React in Patterns by krasimir](https://github.com/krasimir/react-in-patterns)
 

anti-patterns/README.md

@@ -0,0 +1,3 @@
+# Anti-pattens
+
+Familiarizing ourselves with common anti-patterns will help us understand how React works and describe useful forms of refactoring our code.

conventions/README.md

@@ -0,0 +1,7 @@
+# Conventions
+
+Just a few resonable conventions to follow, since there is no one size fits all.
+
+## Articles
+
+[Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)

gotchas/README.md

@@ -0,0 +1,9 @@
+# Gotchas
+
+React is intuitive for the most part, but there are quite a few stumbling points which might caatch you by surprise. We'll discuss more on them here.
+
+## Articles
+
+[React Gotchas](https://daveceddia.com/react-gotchas/)
+
+[Top 5 React Gotchas](http://joelgriffith.net/top-5-react-gotchas/)

perf-tips/README.md

@@ -0,0 +1,21 @@
+# Perf Tips
+
+**Key Ideas**
+
+- Avoid Reconciliation with shouldComponentUpdate() check
+
+- Use Immutable Data Structures
+
+- Use Production Build
+
+- Profile Components with Chrome Timeline
+
+## Articles
+
+[Optimizing Performance: Docs](https://facebook.github.io/react/docs/optimizing-performance.html)
+
+[Performance Engineering with React](http://benchling.engineering/performance-engineering-with-react/)
+
+[Tips to optimise rendering of a set of elements in React](https://blog.lavrton.com/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae)
+
+[React.js Best Practices for 2016](https://blog.risingstack.com/react-js-best-practices-for-2016/)

styling/README.md

@@ -0,0 +1,9 @@
+# Styling in React
+
+Here we look into some ideas around using CSS in JS.
+
+If you are pondering over why to use CSS in JS, I highly recommend this [talk](http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html) by [Vjeux](https://twitter.com/Vjeux)
+
+## Articles
+
+[Patterns for style composition in React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/)

ux-variations/README.md

@@ -1,22 +1,20 @@
-# Handling UX variations and building React components for multiple brands and applications
+# Handling UX variations for multiple brands and apps
 
-Here are few general coding principles which help write reusable React components
 
-## Single Responsibility Principle
+## [Slides from my talk](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)
 
-**In React**
 
-Components/Containers code must essentially deal with only one chunk of the UI feature/functionality.
+A few general coding principles which help write reusable React components
 
-* Eg. <Shipping Address/>
+## Single Responsibility Principle
 
-* Address container (Only has address related fields)
+**In React**
 
-* Name container (first and last name)
+Components/Containers code must essentially deal with only one chunk of the UI feature/functionality.
 
-* Phone component
+* Eg. Shipping Address component
 
-* State, City and Zip code container
+* Address container (Only has address related fields), Name container (first and last name), Phone component, State, City and Zip code container
 
 **In Redux**
 
@@ -26,21 +24,19 @@ All API related call go into Redux thunks/other async handling sections (redux-p
 
 * Any routing has to be dealt with the receiving component via a promise.
 
-## Keep it Simple Stupid (KISS
+## Keep it Simple Stupid (KISS)
 
 * Essentially, if the component needs no state - use stateless functions.
 
-* Perf matters: Stateless fns > ES6 class components > React.createClass()
+* Perf matters: **Stateless fns > ES6 class components > React.createClass()**
 
 * Don’t pass any more props than required {...this.props} only if the list is big -- if not pass individual props.
 
 * Too much flows of control (If-else variations) inside the component is usually a red-flag. This most likely means - need to split up the component or create a separate variation.
 
 * Don’t optimize prematurely - Making the current component reusable with current variations known.
 
-### [Slides from my talk](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)
-
-## Related Article
+## Articles
 
 [Building React Components for Multiple Brands and Applications](https://medium.com/walmartlabs/building-react-components-for-multiple-brands-and-applications-7e9157a39db4)