selvagsz/react-code-walkthrough.md

## react-code-walkthrough.md

      
    Raw
  

              react-code-walkthrough.md
            
          
    I'm often tempted to jump into the source code of the framework/libraries that I consume. In react, the source code lies inside the /src folder https://github.com/facebook/react/tree/master/src
To start with, the best way is to go through the modules with no or less dependencies. Usually, the utils will have less dependencies but they would be consumed a lot throughout. So, I feel its good to start with them.
React shares some utilities from https://github.com/facebook/fbjs

invariant
keyMirror
keyOf
emptyFunction
warning
mapObject
camelizeStyleName
memoizeStringOnly
hyphenateStyleName
ExecutionEnvironment


Once you glimsed the above, start with the general utils that lies inside the /shared folder https://github.com/facebook/react/tree/master/src/shared/utils
shared/utils/

I'll provide insights on important modules. Many other modules will look self explanatory. (eg: isTextInputElement)
PooledClass

Aims at reusing the object instances. The object instances should have a destructor method to reset the instance state
var PooledClass = require('PooledClass');

// Poolable Class
function Person(options) {
  this.name = options.name;
}

Person.prototype.destructor = function() {
  this.name = null;
}

PooledClass.addPoolingTo(Person);  // augments the Person class with PooledClass
let personInstance = Person.getPooled(); // returns an instance from the pool. If there are no instances in the pool, returns a new instance
Transaction

traverseAllChildren

CallbackQueue

ReactNodeTypes

getHostComponentFromComposite

flattenChildren


Isomorphic/classic/

types/

Handles validation on the PropTypes. Each validation is chainable
element/

ReactCurrentOwner

Object which contains the owner component
ReactElement

ReactElement

ReactElement.createElement

ReactElement.cloneElement

ReactElement.isValidElement

ReactElement.cloneAndReplaceKey

ReactElement.createFactory

ReactElementValidator

ReactDOMFactories

Constains a map of supported HTML tags >> React Component classes
modern/

Isomorphic/children/

onlyChildren

sliceChildren

ReactChildren

Isomorphoc/modern/

Isomorphic/React


renderers/shared/

shouldUpdateReactComponent

renderes/dom/shared/

CSSProperty

Handles unitless CSS properties like flex, colCount, tabSize, etc & shorthand CSS property expansion like background, font, etc