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:
| ❯ npm uninstall --save-dev webpack | |
| - [email protected] node_modules/acorn | |
| - [email protected] node_modules/amdefine | |
| - [email protected] node_modules/arr-flatten | |
| - [email protected] node_modules/arr-diff | |
| - [email protected] node_modules/array-unique | |
| - [email protected] node_modules/arrify | |
| - [email protected] node_modules/async | |
| - [email protected] node_modules/async-each | |
| - [email protected] node_modules/balanced-match | 
| /** | |
| * Copyright 2004-present Facebook. All Rights Reserved. | |
| * | |
| * @providesModule bsPlatformBuffer | |
| * @flow | |
| * @whateverPragmaHere | |
| */ | |
| 'use strict'; | 
| 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 | 
| ["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" | |
| ] | |
| } | 
| ; (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 | 
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | 
| import React from 'react'; | |
| import {Spring} from '../src/Spring'; | |
| const childVal = 275; | |
| const Demo = React.createClass({ | |
| getInitialState() { | |
| return {open: false}; | |
| }, | 
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} />| '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) { | 
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!