jaysoo

class TodoStore extends BaseStore {
  // Constructor is executed in the  config phase.
  constructor(stores, initialState) {
    super(stores, initialState) // ensures initial state loads for SSR

    // Other store initialization...
  }

  // This is executed in the run phase, after all stores have initialized.
  storeDidInitialize(stores) {

jaysoo

// 1. npm init
// 2. npm install --save webpack webpack-dev-server babel-loader babel-preset-es2015
// 3. mkdir dist && touch index.html
// 4. Include `<script src="/bundle.js"></script>` inside index.html
// 5. mkdir src && touch src/index.js
// 6. Add some code to index.js (e.g. `console.log('Hello, World!'))
// 7. npm start
// 8. Browse to http://localhost:8080/dist/

const webpack = require('webpack')

jaysoo

/*
 * Top level index.js
 */
let R = require('ramda')

global.trace = msg => R.tap(x => console.log(msg, x))

/*
 * ...
 *

jaysoo

/* 
 * This file contains JS modules for a React app using react-router and redux.
 * Each module should be in its own separate file, but for the purposes of
 * this gist, I've inlined them all.
 */

/* app/index.js */

import React from 'react'
import { Router, browserHistory } from 'react-router'

jaysoo

'use strict';

const cp = require('child_process');
const path = require('path');

// grep :: (String, Options) -> Promise [String]
module.exports = (pattern, opts) => {
  opts = opts || {};
  let exclude = opts.exclude || [];
  exclude = exclude.map(x => ` | grep -v ${x}`).join('');

jaysoo

/*
 * WARNING: Mutates the fetchContext argument (by default the window or global context).
 *
 * A crude way to intercept fetch responses, and dispatch actions as needed. Using this
 * for more global app concerns, where I may want to dispatch actions depending on the response
 * status or body. e.g. When seeing a 401, dispatch a logout action.
 *
 * In most cases, I'd recommend using a middlware as shown in redux's real-world example.
 * (https://github.com/reactjs/redux/blob/master/examples/real-world/middleware/api.js)
 * 

jaysoo

// Small example to show async action creators using redux-thunk in TypeScript.

// Original sync `deleteTodo`
const deleteTodo = createAction<Todo>(
  types.DELETE_TODO,
  (todo: Todo) => todo
);

// Being lazy here and just returning any so I don't have to deal
// with thunk types. You can definitely make this much safer!

jaysoo

/*
 * Immutable data patterns without Immutable.js
 */

// 1. Objects
const a = { name: 'Alice', age: 20, email: 'alice@example.com' };

// updating property
const b = { ...x, age: 21 };
b; //=> { name: 'Alice', age: 21, email: 'alice@example.com' }

jaysoo

/*
 * UPDATE: Looked at the blame, turns out the negative bottom is actually for ensuring layout doesn't change during transitions.
 * Still don't know how that works completely, but it has nothing to do with hiding (top: window.height pushes view out of viewport).
 * 
 * I was just looking at Navigator implementation and noticed this line:
 * https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js#L110-L113
 *
 */
import React, {
  Component,

jaysoo

// Example 1: Different ways to resolve the same thing.

var addOne = x => new Promise(resolve => resolve(x + 1));

// Chaining promises by return new promise.
addOne(0).
  then(x => addOne(x)).
  then(x => addOne(x)).
  then(x => console.log(`Got ${x}`));