Ali Hmer kikoanis

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

First couple things I thought about when migrating after reading the docs

So migrating my existing app wasn't as troublesome as I originally thought. First thing I did was take a look at my router and routes and figure try to make a mental model of all the files where I had nested routes in the existing app because those components/containers will contain {this.props.children}. So I need to replace those with the nested <Match /> components.

So just to give an example:

In v2:

<Router history={history}>
  <Route path="/" component={App}>

The approach and the client side code you can find here: https://github.com/yahoo/flux-examples/blob/master/routing/app.js

	import {
	CANCEL_ACTION_REQUESTS,
	CANCEL_ALL_ACTION_REQUESTS
	} from './constants';

	export function cancelActionRequest(actionType) {
	return { type: CANCEL_ACTION_REQUESTS, actionType };
	}

	export function cancelAllActionRequests() {

	// most common approach, using extend(..)

	var defaults = {
	url: "http://some.base.url/api",
	method: "post",
	headers: [
	"Content-Type: text/plain"
	]
	};

	import { matchPath } from 'react-router';

	class MainRouter extends Component {
	static displayName = 'MainRouter';
	static propTypes = {
	store: React.PropTypes.object,
	component: React.PropTypes.oneOfType([
	React.PropTypes.element,
	React.PropTypes.func,
	])

	/*
	https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

	You can copy paste this code in your console on smashingmagazine.com
	in order to have cross-fade transition when change page.
	*/

	var cache = {};
	function loadPage(url) {
	if (cache[url]) {