ethan-deng

#React ES7 ES6 ES5 Syntax

1. https://facebook.github.io/react/docs/reusable-components.html
2. https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html
3. https://babeljs.io/blog/2015/06/07/react-on-es6-plus
4. http://www.ian-thomas.net/autobinding-react-and-es6-classes/
5. http://blog.ricardofilipe.com/post/babel-react-es7-sample
6. standard/standard#372

ES7

ethan-deng

React Hot Loader

1. Webpack: React Hot Loader
2. Browserify: LiveReactload 2.x

WebPack

1. webpack-howto
2. Webpack Tutorial
3. react-webpack-cookbook

ethan-deng

ES6 Promises

• ES6 Promises
• Promise MDN
• es6-promise
• Promises for asynchronous programming
• Promise Patterns & Anti-Patterns
• Understanding JavaScript’s async await

ethan-deng

SharePoint Rest API

• Get to know the SharePoint 2013 REST service
• Complete basic operations using SharePoint 2013 REST endpoints
• Access SharePoint 2013 data from add-ins using the cross-domain library
• Develop SharePoint Add-ins
• Working with lists and list items with REST
• Working with folders and files with REST
• Use OData query operations in SharePoint REST requests
• Determine SharePoint REST service endpoint URIs

ethan-deng

React.js State Explained

var React = require('react');
var $ = require('jquery');
/********************************************************
This code is to explain state mutation in React and demo
why immutable.js is a better approach
**********************************************************/
var Test = React.createClass({

ethan-deng

The case that you have to use Immutable.js in React

In React, there are scenarios that you have to use Immutable.js if you want to use shouldComponentUpdate to improve performance.

For example if your state is an object or array in a flux data store

  this.var1 = {a:1, b:2};
  this var2 = [1,2,3];

ethan-deng

Closure and Const/Let

_createClass(Contact, [{
	    key: 'render',
	    value: function render() {
	      var self = this;
	      var controls = [];
	
	      var _loop = function _loop() {

ethan-deng

Webpack Feature Flag

• https://github.com/petehunt/webpack-howto
• https://webpack.github.io/docs/list-of-plugins.html
• http://jilles.me/webpack-bundle-splitting-and-feature-flags/
• http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/

ethan-deng

React Animation

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://facebook.github.io/react/docs/animation.html
• https://medium.com/@cheapsteak/animations-with-reacttransitiongroup-4972ad7da286#.ckg4ne3t7

1. CSS animation can be applied directly to component that never enter or leave the dom. For example, a preploaded layer which is hidden to the left.

2. CSS animation can be used directly on component using inline style.

ethan-deng

• npm install express

• npm install -g node-inspector

• npm install -g devtool

• devtool app.js --watch

• npm install mongodb