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.
}| var App2 = React.createClass({ | |
| getInitialState: function() { | |
| return { | |
| x: 0, | |
| y: 0 | |
| }; | |
| }, | |
| componentDidMount: function() { | |
| var rect = this.refs.rect.getDOMNode(); |
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!
| '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) { |
key is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:
<Comp key={1} /><Comp key={1} />| 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 |