Cheng Lou chenglou

While I was experimenting with animation, I had to make a few basic prototypes for a layout system and see how they intertwine. Here's the API in conjunction with React:

var MyComp = React.createClass({
  registerLayoutValues: function() {
    return {
      self: {
        width: 30,
        left: (get('parent', 'width') - get('self', 'width')) / 2 // Center.
 }

If you have no experience with setting up your environment for web development, and don't feel like doing it, just go to the React docs page and play with the live editors on it.

If you're serious about this and want to use React in your app:

npm install react or bower install react

Or you have no idea what that means, then just following the few lines of instructions here

Have fun!

key is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:

Clone state

<Comp key={1} /><Comp key={1} />

Preserve component state across different parents:

	var App2 = React.createClass({
	getInitialState: function() {
	return {
	x: 0,
	y: 0
	};
	},

	componentDidMount: function() {
	var rect = this.refs.rect.getDOMNode();

	'use strict';

	var transit = require('transit-js');
	var I = require('immutable');

	var wCache = I.Map();
	var wid = 0;

	var listHandler = transit.makeWriteHandler({
	tag: function(v) {

	import React from 'react';
	import {Spring} from '../src/Spring';

	const childVal = 275;

	const Demo = React.createClass({
	getInitialState() {
	return {open: false};
	},

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	padding: 0;
	margin: 0;

	; (group-by f list): call f on each item in list. The return value becomes a key
	; of the resulting map, whose keys map to the list of items for which f returned
	; that key.
	; (vals map): returns a list of the values of the map.
	(defn anagram [words] (vals (group-by sort words)))

	(= (anagram ["star" "rats" "car" "arc" "stars"])
	[["star" "rats"] ["car" "arc"] ["stars"]]) ; true

	["path","add","source", ["/Users/chenglou/Desktop/test/hello.ml", "/Users/chenglou/Desktop/test/goodbye.ml"]]
	["path","list","source"]
	{
	"query": ["tell","start","end","let f x = x let () = ()"],
	"context": [
	"auto",
	"/Users/chenglou/Desktop/test/hello.ml"
	]
	}

	echo "open C\n let a = InC.x" > Main.ml
	echo "module InC = struct let x = 5 end" > C.ml
	ocamldep -I ./ -modules Main.ml