littlepsylo

How to Elm

This is a basic guide on how to learn Elm rather than actually teach you. I'm going to mostly link to resources that I feel are valuable and try to "teach you how to fish".

The main purpose is to accelerate your learning and save you a lot of googling and weeding through bad explinations.

Essential links

Main website http://elm-lang.org
Elm packages search and docs

Distilling the Essence of Reducers

Redux has brought the notion of reducer back into the awareness of many developers for whom they are a novel concept. In fact they are quite simple, and used all the time in such things as SUM aggregations in databases, where they compute a single value from many.

It's great that Redux has made reducers known to a broader audience, though they are relatively ancient concepts in programming, in fact. But the particular way Redux illustrates a reducer in its documentaion is, in my opinion, with a coding style that is harder to extend and read than it should be. Let's distill reducers down to their essensce, and build up Redux reducers in a way that lowers complexity, and helps separate Redux idioms from your business logic.

The simplest reducer

A reducer is a pure function that accepts more arguments than it returns. That is to say - one whose "arity" is greater than 1. It 'reduces' the two things you pass it down to a single value. Here are two reducers, in a map

Quick Start Guide

https://facebook.github.io/react-native/docs/getting-started.html#content http://facebook.github.io/react-native/docs/android-setup.html

Installing a bunch of deps

We're going to be use io.js because node has a lot of trouble with the react-native cli.

Download io.js - https://iojs.org/en/

	function waitForElement(selector) {
	return new Promise(function(resolve, reject) {
	var element = document.querySelector(selector);

	if(element) {
	resolve(element);
	return;
	}

	var observer = new MutationObserver(function(mutations) {

	function monitorEvents(element) {
	var log = function(e) { console.log(e);};
	var events = [];

	for(var i in element) {
	if(i.startsWith("on")) events.push(i.substr(2));
	}
	events.forEach(function(eventName) {
	element.addEventListener(eventName, log);
	});

	public class MainActivity extends ReactActivity {

	/**
	* Returns the name of the main component registered from JavaScript.
	* This is used to schedule rendering of the component.
	*/
	@Override
	protected String getMainComponentName() {
	return "MyApp";
	}

	.text-center {
	text-align: center;
	}

	.text-left {
	text-align: left;
	}

	.text-right {
	text-align: right;

	import React, { Component } from 'react'
	import Subapp from './subapp/Root'

	class BigApp extends Component {
	render() {
	return (
	<div>
	<Subapp />
	<Subapp />
	<Subapp />

	$columns: 12;

	$grid-breakpoints: (
	xs: 0,
	sm: 544px,
	md: 768px,
	lg: 992px,
	xl: 1200px
	);

	Disclaimer: The instructions are the collective efforts from a few places online.
	Nothing here is my original. But I want to put them together in one place to save people from spending the same time as I did.

	First off, bundle.
	==================

	1. cd to the project directory
	2. Start the react-native packager if not started
	3. Download the bundle to the asset folder:
	curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"