Skip to content

Instantly share code, notes, and snippets.

@ethan-deng
ethan-deng / CORS.md
Last active November 4, 2015 07:45
Windows Authentication with Cross Origin Request

React Props, State and Data Flow

In React always treat component props and state as immutable. props are owned by parent component and flow one-way from parent to child. State is private to the current component and can only be changed by setState. When there is need to flow data from child to parent, use the event handler.

  1. Don't try to access children component's state using refs.

For example (bad code)

this.refs.myChildComp.state

Add Event Handler to Aysnc Loaded UI Component without Wait

Usually when you want to add a event handler to a dynamically loaded UI compoent is to wait for the UI is generated and then attached the event handler. If this is the only way to do it, and if you are writing a shared library, you have to provide a "update"/"refresh" function to run to attach the event handlers in the "wait" function.

$.when($.ajax(url)).done(function(result){
  $('<div>').appendTo(myDoc).click(function(){
    ......
  });
});
@ethan-deng
ethan-deng / babelify7.md
Last active December 2, 2015 17:23
Babelify 7 and JSX error

Babelify 7 and JSX error

First Babelify is not Babel and their version numbers doesn't match. This confuses me a lot at first.

If you run into a similar error as I did next. Try these steps to fix it.

1st, you need install

npm install --save-dev babel-preset-es2015 babel-preset-react

React material-ui installation

  1. npm install material-ui --save

  2. npm install react-tap-event-plugin --save

  3. Add Google font to SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);

NPM

Update NPM

npm install -g npm

NPM Scripts

NPM Scripts run command using binary from the packages in the current location and doesn't use the globally installed package. When using NPM scripts to run build commands, it is not necessary to install build package globally.

List currently installed package versions

npm list --depth=0

NPM Install Error

To solve this issue when running "npm install", install Visual Studio 2015 and then

"File" -> "New Project" -> choose C++ template and install C++ support.

Microsoft Windows [Version 10.0.10586]
(c) 2015 Microsoft Corporation. All rights reserved.

Redux-vs-Alt

A line by line comparison of Redux and Alt's implementation of Dan Abramov's Todo list example

Redux is getting hot! The trend can be seen from this Redex vs Alt NPM trend chart. However the framework of Alt + AltContainer is a much more concise and much easier to understand than Redux.

It seems Alt is not getting as much attention as Redux. There may be a few reasons for this. First, the best coding approach of Alt + AltContainer is not well documented. Second, even though Alt came out earlier than Redux but AltContainer is a few months later than Redux. Third, Dan Abramov the author of both React Hot Loader and Redux is a better known figure.

If you haven't heard of Alt, please read along and see why I think Alt is much easier than Redux. This is a line by line comparison of Dan Abramove's Todo list demo for Redux and my porting of the Todo list to Alt implementation.

To run the [sample code from Github](https://github.com/eth