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

Package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "main": "js/app.js",
  "dependencies": {

ethan-deng

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);

ethan-deng

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

ethan-deng

React Router

1. http://www.regextester.com/15

2. https://expressjs.com/en/guide/routing.html

3. https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md

4. Caveats of Using Hash History

5. Get rid of ?_k=asdf when not using state in hash history

6. path in browser has a "?_k=qvx3sz" param

7. Using Custom Histories

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

#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

• rd /S /Q node_modules

• robocopy c:\temp node_modules /purge

• npm cache clean

• cd %APPDATA%\npm-cache

• Go back to NPM 2 npm -g install npm@latest-2

ethan-deng

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.

ethan-deng

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