├── .gitignore ├── README.md ├── build ├── 1.bundle.js ├── 1.bundle.js.map ├── 2.bundle.js ├── 2.bundle.js.map ├── 3.bundle.js ├── 3.bundle.js.map ├── 4.bundle.js ├── 4.bundle.js.map ├── 5.bundle.js ├── 5.bundle.js.map ├── 6.bundle.js ├── 6.bundle.js.map ├── 7.bundle.js ├── 7.bundle.js.map ├── bundle.js ├── bundle.js.map ├── index.html ├── prism.css ├── prism.min.js ├── vendor.bundle.js └── vendor.bundle.js.map ├── demo1 └── demo1.jsx ├── demo2 └── demo2.jsx ├── demo3 └── demo3.jsx ├── demo4 └── demo4.jsx ├── demo5 └── demo5.jsx ├── demo6 ├── demo6.jsx ├── demo6.less ├── item.jsx └── store.jsx ├── demo7 └── demo7.jsx ├── index.jsx ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Primer 2 | ============ 3 | 4 | This little repo is designed to gently introduce developers into the wonderful world of React. Each demo's source is annotated with comments and can be read basically top-to-bottom. 5 | 6 | View the Demos 7 | -------------- 8 | 9 | The demos are [available online](http://binarymuse.github.io/react-primer/build/). 10 | 11 | Running Locally 12 | --------------- 13 | 14 | Clone the repository and open `build/index.html` in your browser; the demos are pre-built and checked in to the repo. 15 | 16 | Building 17 | -------- 18 | 19 | Requires Node.js. 20 | 21 | npm install && npm start 22 | 23 | Then open `build/index.html` in your browser. The Node process will automatically recompile the demos on any change; check your console output for syntax errors. 24 | 25 | Further Reading 26 | --------------- 27 | 28 | The [React site](http://facebook.github.io/react/) has a ton of info, and I recommend checking it out. It also contains more in-depth API documentation. 29 | 30 | The "Top-Down Data Flow & shouldComponentUpdate" demo introduces the idea of a top-level data store that causes an application-wide re-render whenever its data changes; this is a nice stepping stone to the [flux architecture](http://facebook.github.io/flux/docs/overview.html), including flux libraries like [Fluxxor](http://fluxxor.com/). 31 | -------------------------------------------------------------------------------- /build/1.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{3:/*!*************************!*\ 2 | !*** ./demo1/demo1.jsx ***! 3 | \*************************/ 4 | function(e,t,n){var r=n(/*! react */1),a=r.createClass({displayName:"HelloComponent",render:function(){return r.DOM.div(null,"Hello ",this.props.name,r.DOM.strong(null,"!"))}}),o=r.createFactory(a);r.render(o({name:"Minerva"}),document.getElementById("container"))},10:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo1/demo1.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports='var React = require("react");\n\n// Create a ReactComponent class with `React.createClass`. Pass the\n// class to `React.createFactory` to create a function that, when\n// called, creates a `ReactElement` object with that type.\n// React uses ReactElements to create a virtual DOM that determines\n// how the real DOM should look and behave.\nvar HelloComponent = React.createClass({\n // Every component needs a `render` function that returns a\n // ReactNode. A ReactNode is either:\n //\n // * a ReactElement\n // * a string (aka ReactText)\n // * a number (aka ReactText)\n // * an array of ReactNodes (aka ReactFragment)\n //\n // ReactElement factories that produce ReactElements that represent\n // native HTML elements can be found on `React.DOM`.\n render: function() {\n // ReactElement factories take a hash of properties as their\n // first argument and their children as remaining arguments.\n // Here, we utilize `this.props`, which is an object\n // containing the properties passed to this component.\n //\n // Properties should be treated as immutable--you should\n // not try to change them from inside a component; they\n // belong to whoever passed them to you!\n return React.DOM.div(null, "Hello ", this.props.name,\n React.DOM.strong(null, "!")\n );\n }\n});\n\nvar HelloElementFactory = React.createFactory(HelloComponent);\n// ReactElement factories are just a convenience for creating new\n// ReactElements.\n//\n// var element = HelloElementFactory(properties, children...)\n//\n// is the same as\n//\n// var element = React.createElement(HelloComponent, properties, children...)\n\n// We can render a component into a DOM node with `React.render`,\n// which takes a ReactElement and a DOM node to render into.\nReact.render(\n // We pass `"Minerva"` as the `name` property, which is\n // used in `HelloComponent`\'s `render` function.\n HelloElementFactory({name: "Minerva"}),\n document.getElementById("container")\n);\n'}}); 8 | //# sourceMappingURL=1.bundle.js.map -------------------------------------------------------------------------------- /build/1.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///1.bundle.js","webpack:///./demo1/demo1.jsx","webpack:///./demo1/demo1.jsx?9f79"],"names":["webpackJsonp",3,"module","exports","__webpack_require__","React","HelloComponent","createClass","displayName","render","DOM","div","this","props","name","strong","HelloElementFactory","createFactory","document","getElementById",10],"mappings":"AAAAA,cAAc,IAERC;;;AAIA,SAASC,EAAQC,EAASC,GCNhC,GAAIC,GAAQD,cAAQ,GAOhBE,EAAAD,EAAAE,aAAoCC,YAAA,iBAWtCC,OAAQ,WASN,MAAOJ,GAAMK,IAAIC,IAAI,KAAM,SAAUC,KAAKC,MAAMC,KAC9CT,EAAMK,IAAIK,OAAO,KAAM,SAKzBC,EAAsBX,EAAMY,cAAcX,EAY9CD,GAAMI,OAGJO,GAAqBF,KAAM,YAC3BI,SAASC,eAAe,eDcpBC;;;AAIA,SAASlB,GEnEfA,EAAAC,QAAA","file":"1.bundle.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 3:\n/*!*************************!*\\\n !*** ./demo1/demo1.jsx ***!\n \\*************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React = __webpack_require__(/*! react */ 1);\n\t\n\t// Create a ReactComponent class with `React.createClass`. Pass the\n\t// class to `React.createFactory` to create a function that, when\n\t// called, creates a `ReactElement` object with that type.\n\t// React uses ReactElements to create a virtual DOM that determines\n\t// how the real DOM should look and behave.\n\tvar HelloComponent = React.createClass({displayName: 'HelloComponent',\n\t // Every component needs a `render` function that returns a\n\t // ReactNode. A ReactNode is either:\n\t //\n\t // * a ReactElement\n\t // * a string (aka ReactText)\n\t // * a number (aka ReactText)\n\t // * an array of ReactNodes (aka ReactFragment)\n\t //\n\t // ReactElement factories that produce ReactElements that represent\n\t // native HTML elements can be found on `React.DOM`.\n\t render: function() {\n\t // ReactElement factories take a hash of properties as their\n\t // first argument and their children as remaining arguments.\n\t // Here, we utilize `this.props`, which is an object\n\t // containing the properties passed to this component.\n\t //\n\t // Properties should be treated as immutable--you should\n\t // not try to change them from inside a component; they\n\t // belong to whoever passed them to you!\n\t return React.DOM.div(null, \"Hello \", this.props.name,\n\t React.DOM.strong(null, \"!\")\n\t );\n\t }\n\t});\n\t\n\tvar HelloElementFactory = React.createFactory(HelloComponent);\n\t// ReactElement factories are just a convenience for creating new\n\t// ReactElements.\n\t//\n\t// var element = HelloElementFactory(properties, children...)\n\t//\n\t// is the same as\n\t//\n\t// var element = React.createElement(HelloComponent, properties, children...)\n\t\n\t// We can render a component into a DOM node with `React.render`,\n\t// which takes a ReactElement and a DOM node to render into.\n\tReact.render(\n\t // We pass `\"Minerva\"` as the `name` property, which is\n\t // used in `HelloComponent`'s `render` function.\n\t HelloElementFactory({name: \"Minerva\"}),\n\t document.getElementById(\"container\")\n\t);\n\n\n/***/ },\n\n/***/ 10:\n/*!****************************************!*\\\n !*** ./~/raw-loader!./demo1/demo1.jsx ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = \"var React = require(\\\"react\\\");\\n\\n// Create a ReactComponent class with `React.createClass`. Pass the\\n// class to `React.createFactory` to create a function that, when\\n// called, creates a `ReactElement` object with that type.\\n// React uses ReactElements to create a virtual DOM that determines\\n// how the real DOM should look and behave.\\nvar HelloComponent = React.createClass({\\n // Every component needs a `render` function that returns a\\n // ReactNode. A ReactNode is either:\\n //\\n // * a ReactElement\\n // * a string (aka ReactText)\\n // * a number (aka ReactText)\\n // * an array of ReactNodes (aka ReactFragment)\\n //\\n // ReactElement factories that produce ReactElements that represent\\n // native HTML elements can be found on `React.DOM`.\\n render: function() {\\n // ReactElement factories take a hash of properties as their\\n // first argument and their children as remaining arguments.\\n // Here, we utilize `this.props`, which is an object\\n // containing the properties passed to this component.\\n //\\n // Properties should be treated as immutable--you should\\n // not try to change them from inside a component; they\\n // belong to whoever passed them to you!\\n return React.DOM.div(null, \\\"Hello \\\", this.props.name,\\n React.DOM.strong(null, \\\"!\\\")\\n );\\n }\\n});\\n\\nvar HelloElementFactory = React.createFactory(HelloComponent);\\n// ReactElement factories are just a convenience for creating new\\n// ReactElements.\\n//\\n// var element = HelloElementFactory(properties, children...)\\n//\\n// is the same as\\n//\\n// var element = React.createElement(HelloComponent, properties, children...)\\n\\n// We can render a component into a DOM node with `React.render`,\\n// which takes a ReactElement and a DOM node to render into.\\nReact.render(\\n // We pass `\\\"Minerva\\\"` as the `name` property, which is\\n // used in `HelloComponent`'s `render` function.\\n HelloElementFactory({name: \\\"Minerva\\\"}),\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** 1.bundle.js\n **/","var React = require(\"react\");\n\n// Create a ReactComponent class with `React.createClass`. Pass the\n// class to `React.createFactory` to create a function that, when\n// called, creates a `ReactElement` object with that type.\n// React uses ReactElements to create a virtual DOM that determines\n// how the real DOM should look and behave.\nvar HelloComponent = React.createClass({\n // Every component needs a `render` function that returns a\n // ReactNode. A ReactNode is either:\n //\n // * a ReactElement\n // * a string (aka ReactText)\n // * a number (aka ReactText)\n // * an array of ReactNodes (aka ReactFragment)\n //\n // ReactElement factories that produce ReactElements that represent\n // native HTML elements can be found on `React.DOM`.\n render: function() {\n // ReactElement factories take a hash of properties as their\n // first argument and their children as remaining arguments.\n // Here, we utilize `this.props`, which is an object\n // containing the properties passed to this component.\n //\n // Properties should be treated as immutable--you should\n // not try to change them from inside a component; they\n // belong to whoever passed them to you!\n return React.DOM.div(null, \"Hello \", this.props.name,\n React.DOM.strong(null, \"!\")\n );\n }\n});\n\nvar HelloElementFactory = React.createFactory(HelloComponent);\n// ReactElement factories are just a convenience for creating new\n// ReactElements.\n//\n// var element = HelloElementFactory(properties, children...)\n//\n// is the same as\n//\n// var element = React.createElement(HelloComponent, properties, children...)\n\n// We can render a component into a DOM node with `React.render`,\n// which takes a ReactElement and a DOM node to render into.\nReact.render(\n // We pass `\"Minerva\"` as the `name` property, which is\n // used in `HelloComponent`'s `render` function.\n HelloElementFactory({name: \"Minerva\"}),\n document.getElementById(\"container\")\n);\n\n\n\n/** WEBPACK FOOTER **\n ** ./demo1/demo1.jsx\n **/","module.exports = \"var React = require(\\\"react\\\");\\n\\n// Create a ReactComponent class with `React.createClass`. Pass the\\n// class to `React.createFactory` to create a function that, when\\n// called, creates a `ReactElement` object with that type.\\n// React uses ReactElements to create a virtual DOM that determines\\n// how the real DOM should look and behave.\\nvar HelloComponent = React.createClass({\\n // Every component needs a `render` function that returns a\\n // ReactNode. A ReactNode is either:\\n //\\n // * a ReactElement\\n // * a string (aka ReactText)\\n // * a number (aka ReactText)\\n // * an array of ReactNodes (aka ReactFragment)\\n //\\n // ReactElement factories that produce ReactElements that represent\\n // native HTML elements can be found on `React.DOM`.\\n render: function() {\\n // ReactElement factories take a hash of properties as their\\n // first argument and their children as remaining arguments.\\n // Here, we utilize `this.props`, which is an object\\n // containing the properties passed to this component.\\n //\\n // Properties should be treated as immutable--you should\\n // not try to change them from inside a component; they\\n // belong to whoever passed them to you!\\n return React.DOM.div(null, \\\"Hello \\\", this.props.name,\\n React.DOM.strong(null, \\\"!\\\")\\n );\\n }\\n});\\n\\nvar HelloElementFactory = React.createFactory(HelloComponent);\\n// ReactElement factories are just a convenience for creating new\\n// ReactElements.\\n//\\n// var element = HelloElementFactory(properties, children...)\\n//\\n// is the same as\\n//\\n// var element = React.createElement(HelloComponent, properties, children...)\\n\\n// We can render a component into a DOM node with `React.render`,\\n// which takes a ReactElement and a DOM node to render into.\\nReact.render(\\n // We pass `\\\"Minerva\\\"` as the `name` property, which is\\n // used in `HelloComponent`'s `render` function.\\n HelloElementFactory({name: \\\"Minerva\\\"}),\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/raw-loader!./demo1/demo1.jsx\n ** module id = 10\n ** module chunks = 1\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/2.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([2],{4:/*!*************************!*\ 2 | !*** ./demo2/demo2.jsx ***! 3 | \*************************/ 4 | function(e,n,t){var r=t(/*! react */1),a=r.createClass({displayName:"HelloComponent",render:function(){return r.createElement("div",null,"Hello ",this.props.name,r.createElement("strong",null,"!"))}});r.render(r.createElement(a,{name:"Minerva"}),document.getElementById("container"))},11:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo2/demo2.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports='// JSX is an XML-like syntax that simplifies composing React components.\n\nvar React = require("react");\n\n// When using JSX, you don\'t have to worry about creating\n// ReactElements or factories to generate them. JSX handles\n// all these details for you. This demo is functionally\n// identical to Demo 1.\nvar HelloComponent = React.createClass({\n // The JSX transpiler also supports (optional) ES6 features,\n // such as concise method syntax, which we\'re using here.\n render() {\n // Children are composed just like child XML/HTML nodes.\n // `{...}` can be used to interpolate raw JavaScript.\n return
Hello {this.props.name}!
;\n }\n});\n\nReact.render(\n // Properties look like HTML attributes.\n ,\n document.getElementById("container")\n);\n\n// It\'s worth noting that JSX assumes all calls with a\n// refers to an actual HTML element,\n// and all custom components must have an .\n'}}); 8 | //# sourceMappingURL=2.bundle.js.map -------------------------------------------------------------------------------- /build/2.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///2.bundle.js","webpack:///./demo2/demo2.jsx","webpack:///./demo2/demo2.jsx?e438"],"names":["webpackJsonp",4,"module","exports","__webpack_require__","React","HelloComponent","createClass","displayName","render","createElement","this","props","name","document","getElementById",11],"mappings":"AAAAA,cAAc,IAERC;;;AAIA,SAASC,EAAQC,EAASC,GCJhC,GAAIC,GAAQD,cAAQ,GAMhBE,EAAAD,EAAAE,aAAoCC,YAAA,iBAGtCC,OAAM,WAGJ,MAAOJ,GAAAK,cAAA,MAAI,KAAC,SAAOC,KAAKC,MAAMC,KAAKR,EAAAK,cAAA,SAAO,KAAC,QAI/CL,GAAMI,OAEJJ,EAAAK,cAACJ,GAAcO,KAAC,YAChBC,SAASC,eAAe,eDkBpBC;;;AAIA,SAASd,GE3CfA,EAAAC,QAAA","file":"2.bundle.js","sourcesContent":["webpackJsonp([2],{\n\n/***/ 4:\n/*!*************************!*\\\n !*** ./demo2/demo2.jsx ***!\n \\*************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\t// JSX is an XML-like syntax that simplifies composing React components.\n\t\n\tvar React = __webpack_require__(/*! react */ 1);\n\t\n\t// When using JSX, you don't have to worry about creating\n\t// ReactElements or factories to generate them. JSX handles\n\t// all these details for you. This demo is functionally\n\t// identical to Demo 1.\n\tvar HelloComponent = React.createClass({displayName: 'HelloComponent',\n\t // The JSX transpiler also supports (optional) ES6 features,\n\t // such as concise method syntax, which we're using here.\n\t render:function() {\n\t // Children are composed just like child XML/HTML nodes.\n\t // `{...}` can be used to interpolate raw JavaScript.\n\t return React.createElement(\"div\", null, \"Hello \", this.props.name, React.createElement(\"strong\", null, \"!\"));\n\t }\n\t});\n\t\n\tReact.render(\n\t // Properties look like HTML attributes.\n\t React.createElement(HelloComponent, {name: \"Minerva\"}),\n\t document.getElementById(\"container\")\n\t);\n\t\n\t// It's worth noting that JSX assumes all calls with a\n\t// refers to an actual HTML element,\n\t// and all custom components must have an .\n\n\n/***/ },\n\n/***/ 11:\n/*!****************************************!*\\\n !*** ./~/raw-loader!./demo2/demo2.jsx ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = \"// JSX is an XML-like syntax that simplifies composing React components.\\n\\nvar React = require(\\\"react\\\");\\n\\n// When using JSX, you don't have to worry about creating\\n// ReactElements or factories to generate them. JSX handles\\n// all these details for you. This demo is functionally\\n// identical to Demo 1.\\nvar HelloComponent = React.createClass({\\n // The JSX transpiler also supports (optional) ES6 features,\\n // such as concise method syntax, which we're using here.\\n render() {\\n // Children are composed just like child XML/HTML nodes.\\n // `{...}` can be used to interpolate raw JavaScript.\\n return
Hello {this.props.name}!
;\\n }\\n});\\n\\nReact.render(\\n // Properties look like HTML attributes.\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\\n// It's worth noting that JSX assumes all calls with a\\n// refers to an actual HTML element,\\n// and all custom components must have an .\\n\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** 2.bundle.js\n **/","// JSX is an XML-like syntax that simplifies composing React components.\n\nvar React = require(\"react\");\n\n// When using JSX, you don't have to worry about creating\n// ReactElements or factories to generate them. JSX handles\n// all these details for you. This demo is functionally\n// identical to Demo 1.\nvar HelloComponent = React.createClass({\n // The JSX transpiler also supports (optional) ES6 features,\n // such as concise method syntax, which we're using here.\n render() {\n // Children are composed just like child XML/HTML nodes.\n // `{...}` can be used to interpolate raw JavaScript.\n return
Hello {this.props.name}!
;\n }\n});\n\nReact.render(\n // Properties look like HTML attributes.\n ,\n document.getElementById(\"container\")\n);\n\n// It's worth noting that JSX assumes all calls with a\n// refers to an actual HTML element,\n// and all custom components must have an .\n\n\n\n/** WEBPACK FOOTER **\n ** ./demo2/demo2.jsx\n **/","module.exports = \"// JSX is an XML-like syntax that simplifies composing React components.\\n\\nvar React = require(\\\"react\\\");\\n\\n// When using JSX, you don't have to worry about creating\\n// ReactElements or factories to generate them. JSX handles\\n// all these details for you. This demo is functionally\\n// identical to Demo 1.\\nvar HelloComponent = React.createClass({\\n // The JSX transpiler also supports (optional) ES6 features,\\n // such as concise method syntax, which we're using here.\\n render() {\\n // Children are composed just like child XML/HTML nodes.\\n // `{...}` can be used to interpolate raw JavaScript.\\n return
Hello {this.props.name}!
;\\n }\\n});\\n\\nReact.render(\\n // Properties look like HTML attributes.\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\\n// It's worth noting that JSX assumes all calls with a\\n// refers to an actual HTML element,\\n// and all custom components must have an .\\n\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/raw-loader!./demo2/demo2.jsx\n ** module id = 11\n ** module chunks = 2\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/3.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([3],{5:/*!*************************!*\ 2 | !*** ./demo3/demo3.jsx ***! 3 | \*************************/ 4 | function(e,t,n){var a=n(/*! react */1),r=a.createClass({displayName:"Timer",getInitialState:function(){return{time:0}},componentDidMount:function(){this.timer=setInterval(this.tick,1e3)},componentWillUnmount:function(){this.timer&&clearInterval(this.timer)},tick:function(){this.setState({time:this.state.time+1})},render:function(){return a.createElement("div",null,"Time: ",this.state.time)}});a.render(a.createElement(r,null),document.getElementById("container"))},12:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo3/demo3.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports="var React = require(\"react\");\n\nvar Timer = React.createClass({\n // In addition to properties passed from parents, React\n // components can also contain an internal state, referenced\n // by `this.state`. `getInitialState` defines the value of\n // `this.state` when the component is first mounted.\n getInitialState() {\n return {\n time: 0\n };\n },\n\n // React provides lifecycle hooks to set up and tear\n // down components and third-party APIs if necessary.\n // Here, we start a timer when the component mounts...\n componentDidMount() {\n this.timer = setInterval(this.tick, 1000);\n },\n\n // ... and remove the timer when the component unmounts.\n // If we don't do this, we'll leak memory (and the timer\n // will continue to fire).\n componentWillUnmount() {\n this.timer && clearInterval(this.timer);\n },\n\n // Unlike properties, state is owned by the component, and\n // can be changed using a few methods. Note that you should\n // *never* modify `this.state` directly--always use an API\n // method to mutate the state.\n //\n // Our timer calls `setState`, which allows us to update one or\n // more keys in our state. The object passed to `setState` is\n // merged with the current state; we can use `replaceState` instead\n // if we don't want to merge.\n tick() {\n // Note that React auto-binds all top-level methods in the\n // object passed to `createClass` to the component instance.\n // Because of this, `this` inside the `tick` method is\n // automatically the component instance, and we didn't have\n // to use `this.tick.bind(this)` inside the `setInterval` call.\n this.setState({time: this.state.time + 1});\n },\n\n // Render is called automatically when a component's state is\n // updated with `setState`, `replaceState`, or when `forceUpdate`\n // is called. Composed components are automatically re-rendered.\n render() {\n return
Time: {this.state.time}
;\n }\n});\n\nReact.render(\n ,\n document.getElementById(\"container\")\n);\n"}}); 8 | //# sourceMappingURL=3.bundle.js.map -------------------------------------------------------------------------------- /build/3.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///3.bundle.js","webpack:///./demo3/demo3.jsx","webpack:///./demo3/demo3.jsx?1559"],"names":["webpackJsonp",5,"module","exports","__webpack_require__","React","Timer","createClass","displayName","getInitialState","time","componentDidMount","this","timer","setInterval","tick","componentWillUnmount","clearInterval","setState","state","render","createElement","document","getElementById",12],"mappings":"AAAAA,cAAc,IAERC;;;AAIA,SAASC,EAAQC,EAASC,GCNhC,GAAIC,GAAQD,cAAQ,GAEhBE,EAAAD,EAAAE,aAA2BC,YAAA,QAK7BC,gBAAe,WACb,OACEC,KAAM,IAOVC,kBAAiB,WACfC,KAAKC,MAAQC,YAAYF,KAAKG,KAAM,MAMtCC,qBAAoB,WAClBJ,KAAKC,OAASI,cAAcL,KAAKC,QAYnCE,KAAI,WAMFH,KAAKM,UAAUR,KAAME,KAAKO,MAAMT,KAAO,KAMzCU,OAAM,WACJ,MAAOf,GAAAgB,cAAA,MAAI,KAAC,SAAOT,KAAKO,MAAMT,QAIlCL,GAAMe,OACJf,EAAAgB,cAACf,EAAK,MACNgB,SAASC,eAAe,eDcpBC;;;AAIA,SAAStB,GEzEfA,EAAAC,QAAA","file":"3.bundle.js","sourcesContent":["webpackJsonp([3],{\n\n/***/ 5:\n/*!*************************!*\\\n !*** ./demo3/demo3.jsx ***!\n \\*************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React = __webpack_require__(/*! react */ 1);\n\t\n\tvar Timer = React.createClass({displayName: 'Timer',\n\t // In addition to properties passed from parents, React\n\t // components can also contain an internal state, referenced\n\t // by `this.state`. `getInitialState` defines the value of\n\t // `this.state` when the component is first mounted.\n\t getInitialState:function() {\n\t return {\n\t time: 0\n\t };\n\t },\n\t\n\t // React provides lifecycle hooks to set up and tear\n\t // down components and third-party APIs if necessary.\n\t // Here, we start a timer when the component mounts...\n\t componentDidMount:function() {\n\t this.timer = setInterval(this.tick, 1000);\n\t },\n\t\n\t // ... and remove the timer when the component unmounts.\n\t // If we don't do this, we'll leak memory (and the timer\n\t // will continue to fire).\n\t componentWillUnmount:function() {\n\t this.timer && clearInterval(this.timer);\n\t },\n\t\n\t // Unlike properties, state is owned by the component, and\n\t // can be changed using a few methods. Note that you should\n\t // *never* modify `this.state` directly--always use an API\n\t // method to mutate the state.\n\t //\n\t // Our timer calls `setState`, which allows us to update one or\n\t // more keys in our state. The object passed to `setState` is\n\t // merged with the current state; we can use `replaceState` instead\n\t // if we don't want to merge.\n\t tick:function() {\n\t // Note that React auto-binds all top-level methods in the\n\t // object passed to `createClass` to the component instance.\n\t // Because of this, `this` inside the `tick` method is\n\t // automatically the component instance, and we didn't have\n\t // to use `this.tick.bind(this)` inside the `setInterval` call.\n\t this.setState({time: this.state.time + 1});\n\t },\n\t\n\t // Render is called automatically when a component's state is\n\t // updated with `setState`, `replaceState`, or when `forceUpdate`\n\t // is called. Composed components are automatically re-rendered.\n\t render:function() {\n\t return React.createElement(\"div\", null, \"Time: \", this.state.time);\n\t }\n\t});\n\t\n\tReact.render(\n\t React.createElement(Timer, null),\n\t document.getElementById(\"container\")\n\t);\n\n\n/***/ },\n\n/***/ 12:\n/*!****************************************!*\\\n !*** ./~/raw-loader!./demo3/demo3.jsx ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = \"var React = require(\\\"react\\\");\\n\\nvar Timer = React.createClass({\\n // In addition to properties passed from parents, React\\n // components can also contain an internal state, referenced\\n // by `this.state`. `getInitialState` defines the value of\\n // `this.state` when the component is first mounted.\\n getInitialState() {\\n return {\\n time: 0\\n };\\n },\\n\\n // React provides lifecycle hooks to set up and tear\\n // down components and third-party APIs if necessary.\\n // Here, we start a timer when the component mounts...\\n componentDidMount() {\\n this.timer = setInterval(this.tick, 1000);\\n },\\n\\n // ... and remove the timer when the component unmounts.\\n // If we don't do this, we'll leak memory (and the timer\\n // will continue to fire).\\n componentWillUnmount() {\\n this.timer && clearInterval(this.timer);\\n },\\n\\n // Unlike properties, state is owned by the component, and\\n // can be changed using a few methods. Note that you should\\n // *never* modify `this.state` directly--always use an API\\n // method to mutate the state.\\n //\\n // Our timer calls `setState`, which allows us to update one or\\n // more keys in our state. The object passed to `setState` is\\n // merged with the current state; we can use `replaceState` instead\\n // if we don't want to merge.\\n tick() {\\n // Note that React auto-binds all top-level methods in the\\n // object passed to `createClass` to the component instance.\\n // Because of this, `this` inside the `tick` method is\\n // automatically the component instance, and we didn't have\\n // to use `this.tick.bind(this)` inside the `setInterval` call.\\n this.setState({time: this.state.time + 1});\\n },\\n\\n // Render is called automatically when a component's state is\\n // updated with `setState`, `replaceState`, or when `forceUpdate`\\n // is called. Composed components are automatically re-rendered.\\n render() {\\n return
Time: {this.state.time}
;\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** 3.bundle.js\n **/","var React = require(\"react\");\n\nvar Timer = React.createClass({\n // In addition to properties passed from parents, React\n // components can also contain an internal state, referenced\n // by `this.state`. `getInitialState` defines the value of\n // `this.state` when the component is first mounted.\n getInitialState() {\n return {\n time: 0\n };\n },\n\n // React provides lifecycle hooks to set up and tear\n // down components and third-party APIs if necessary.\n // Here, we start a timer when the component mounts...\n componentDidMount() {\n this.timer = setInterval(this.tick, 1000);\n },\n\n // ... and remove the timer when the component unmounts.\n // If we don't do this, we'll leak memory (and the timer\n // will continue to fire).\n componentWillUnmount() {\n this.timer && clearInterval(this.timer);\n },\n\n // Unlike properties, state is owned by the component, and\n // can be changed using a few methods. Note that you should\n // *never* modify `this.state` directly--always use an API\n // method to mutate the state.\n //\n // Our timer calls `setState`, which allows us to update one or\n // more keys in our state. The object passed to `setState` is\n // merged with the current state; we can use `replaceState` instead\n // if we don't want to merge.\n tick() {\n // Note that React auto-binds all top-level methods in the\n // object passed to `createClass` to the component instance.\n // Because of this, `this` inside the `tick` method is\n // automatically the component instance, and we didn't have\n // to use `this.tick.bind(this)` inside the `setInterval` call.\n this.setState({time: this.state.time + 1});\n },\n\n // Render is called automatically when a component's state is\n // updated with `setState`, `replaceState`, or when `forceUpdate`\n // is called. Composed components are automatically re-rendered.\n render() {\n return
Time: {this.state.time}
;\n }\n});\n\nReact.render(\n ,\n document.getElementById(\"container\")\n);\n\n\n\n/** WEBPACK FOOTER **\n ** ./demo3/demo3.jsx\n **/","module.exports = \"var React = require(\\\"react\\\");\\n\\nvar Timer = React.createClass({\\n // In addition to properties passed from parents, React\\n // components can also contain an internal state, referenced\\n // by `this.state`. `getInitialState` defines the value of\\n // `this.state` when the component is first mounted.\\n getInitialState() {\\n return {\\n time: 0\\n };\\n },\\n\\n // React provides lifecycle hooks to set up and tear\\n // down components and third-party APIs if necessary.\\n // Here, we start a timer when the component mounts...\\n componentDidMount() {\\n this.timer = setInterval(this.tick, 1000);\\n },\\n\\n // ... and remove the timer when the component unmounts.\\n // If we don't do this, we'll leak memory (and the timer\\n // will continue to fire).\\n componentWillUnmount() {\\n this.timer && clearInterval(this.timer);\\n },\\n\\n // Unlike properties, state is owned by the component, and\\n // can be changed using a few methods. Note that you should\\n // *never* modify `this.state` directly--always use an API\\n // method to mutate the state.\\n //\\n // Our timer calls `setState`, which allows us to update one or\\n // more keys in our state. The object passed to `setState` is\\n // merged with the current state; we can use `replaceState` instead\\n // if we don't want to merge.\\n tick() {\\n // Note that React auto-binds all top-level methods in the\\n // object passed to `createClass` to the component instance.\\n // Because of this, `this` inside the `tick` method is\\n // automatically the component instance, and we didn't have\\n // to use `this.tick.bind(this)` inside the `setInterval` call.\\n this.setState({time: this.state.time + 1});\\n },\\n\\n // Render is called automatically when a component's state is\\n // updated with `setState`, `replaceState`, or when `forceUpdate`\\n // is called. Composed components are automatically re-rendered.\\n render() {\\n return
Time: {this.state.time}
;\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/raw-loader!./demo3/demo3.jsx\n ** module id = 12\n ** module chunks = 3\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/4.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([4],{6:/*!*************************!*\ 2 | !*** ./demo4/demo4.jsx ***! 3 | \*************************/ 4 | function(e,t,n){var o=n(/*! react */1),a=o.createClass({displayName:"TodoList",propTypes:{items:o.PropTypes.arrayOf(o.PropTypes.string).isRequired},render:function(){return o.createElement("ul",null,this.props.items.map(function(e,t){return o.createElement("li",{key:t},e)}))}}),r=o.createClass({displayName:"TodoForm",propTypes:{onSubmit:o.PropTypes.func.isRequired},getInitialState:function(){return{text:""}},onTextChange:function(e){this.setState({text:e.target.value})},onSubmit:function(e){e.preventDefault(),this.state.text.trim()&&(this.props.onSubmit(this.state.text),this.setState({text:""}))},render:function(){return o.createElement("form",{onSubmit:this.onSubmit},o.createElement("input",{type:"text",value:this.state.text,onChange:this.onTextChange}),o.createElement("input",{type:"submit",value:"Add Todo"}))}}),i=o.createClass({displayName:"Todos",getInitialState:function(){return{items:[]}},onSubmitTodo:function(e){var t=this.state.items.concat([e]);this.setState({items:t})},render:function(){return o.createElement("div",null,o.createElement("h3",null,"TODO"),o.createElement(a,{items:this.state.items}),o.createElement(r,{onSubmit:this.onSubmitTodo}))}});o.render(o.createElement(i,null),document.getElementById("container"))},13:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo4/demo4.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports='var React = require("react");\n\nvar TodoList = React.createClass({\n // `TodoList` takes a prop called `items` which is an array of\n // strings. We can make this requirement "official" using propTypes.\n // If a component doesn\'t get the properties listed in its\n // propTypes, it will warn you in the console (if using a development\n // build of React).\n propTypes: {\n items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired\n },\n\n render() {\n // Every component in an array should have a `key` attribute\n // set so React can uniquely identify the item if it needs\n // to remove it from the middle of the array without iterating\n // over every component in the array.\n // Since our todos can\'t be reordered, we\'ll just use the index.\n //\n // Also notice the use of another ES6 feature in the call to `map`,\n // arrow functions. The bodies of arrow functions are automatically\n // bound to the value of `this` outside of them, so no more calling\n // `.bind(this)` or `var self = this` juggling.\n return (\n
    \n {this.props.items.map((item, index) => {\n return
  • {item}
    • ;\n })}\n
\n );\n }\n});\n\nvar TodoForm = React.createClass({\n // React has PropTypes for most built-in JS types, as well as the\n // ability to define your own validation functions.\n //\n // `TodoForm` requires an `onSubmit` property that we\'ll use to notify\n // our parent component that the form has been submitted; this makes\n // the component more reusable, since the logic for what to do with\n // the submitted form isn\'t hardcoded into the `TodoForm` component.\n propTypes: {\n onSubmit: React.PropTypes.func.isRequired\n },\n\n // `TodoForm` contains a text input with a `value` attribute, which\n // makes the input a "controlled" input. This means that the input\n // will *always* display whatever is passed to its `value` no matter\n // what the user tries to type in the box. The `text` property of\n // our state is the current string to display in the box.\n getInitialState() {\n return {\n text: ""\n };\n },\n\n // The text input has an `onChange` property, which calls a function\n // any time the user interacts with the box. Here, we update our\n // state so the text in the box updates.\n //\n // This is necessary because React components\' `render` functions should\n // *always* describe how the component should look at *any* point and time;\n // if we didn\'t use a controlled input, the text might reset in certain\n // re-rendering situations.\n onTextChange(e) {\n this.setState({text: e.target.value});\n },\n\n // The form also has a handler for `onSubmit`...\n onSubmit(e) {\n e.preventDefault();\n if (this.state.text.trim()) {\n // ... which we\'ll use to indicate to our parent that an\n // item has been submitted...\n this.props.onSubmit(this.state.text);\n // ... and then clear the text box.\n this.setState({text: ""});\n }\n },\n\n render() {\n return (\n
\n \n \n
\n );\n }\n});\n\n// Our `Todos` component is the full application, which very simply composes\n// the `TodoList` and `TodoForm` components.\nvar Todos = React.createClass({\n getInitialState() {\n // It owns the actual items array, so the composed `TodoList`\n // and `TodoForm` can be reused in many contexts (that is, they\n // are not application specific).\n return {\n items: []\n };\n },\n\n // `onSubmitTodo` is the function we pass to `TodoForm`\'s\n // `onSubmit` property; so, it will be called when `TodoForm`\n // calls `this.props.onSubmit(...)`.\n onSubmitTodo(newTodo) {\n var nextItems = this.state.items.concat([newTodo]);\n this.setState({items: nextItems});\n },\n\n render() {\n return (\n
\n

TODO

\n \n \n
\n );\n }\n});\n\nReact.render(\n ,\n document.getElementById("container")\n);\n'}}); 8 | //# sourceMappingURL=4.bundle.js.map -------------------------------------------------------------------------------- /build/4.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///4.bundle.js","webpack:///./demo4/demo4.jsx","webpack:///./demo4/demo4.jsx?319e"],"names":["webpackJsonp",6,"module","exports","__webpack_require__","React","TodoList","createClass","displayName","propTypes","items","PropTypes","arrayOf","string","isRequired","render","createElement","this","props","map","item","index","key","TodoForm","onSubmit","func","getInitialState","text","onTextChange","e","setState","target","value","preventDefault","state","trim","type","onChange","Todos","onSubmitTodo","newTodo","nextItems","concat","document","getElementById",13],"mappings":"AAAAA,cAAc,IAERC;;;AAIA,SAASC,EAAQC,EAASC,GCNhC,GAAIC,GAAQD,cAAQ,GAEhBE,EAAAD,EAAAE,aAA8BC,YAAA,WAMhCC,WACEC,MAAOL,EAAMM,UAAUC,QAAQP,EAAMM,UAAUE,QAAQC,YAGzDC,OAAM,WAWJ,MACEV,GAAAW,cAAA,KAAG,KACFC,KAAKC,MAAMR,MAAMS,IAAI,SAACC,EAAMC,GAC3B,MAAOhB,GAAAW,cAAA,MAAGM,IAACD,GAAYD,SAO3BG,EAAAlB,EAAAE,aAA8BC,YAAA,WAQhCC,WACEe,SAAUnB,EAAMM,UAAUc,KAAKX,YAQjCY,gBAAe,WACb,OACEC,KAAM,KAYVC,aAAY,SAACC,GACXZ,KAAKa,UAAUH,KAAME,EAAEE,OAAOC,SAIhCR,SAAQ,SAACK,GACPA,EAAEI,iBACEhB,KAAKiB,MAAMP,KAAKQ,SAGlBlB,KAAKC,MAAMM,SAASP,KAAKiB,MAAMP,MAE/BV,KAAKa,UAAUH,KAAM,OAIzBZ,OAAM,WACJ,MACEV,GAAAW,cAAA,QAAKQ,SAACP,KAAUO,UACdnB,EAAAW,cAAA,SAAMoB,KAAC,OAAKJ,MAAOf,KAAOiB,MAAKP,KAAMU,SAAMpB,KAAQW,eACnDvB,EAAAW,cAAA,SAAMoB,KAAC,SAAKJ,MAAS,iBAQzBM,EAAAjC,EAAAE,aAA2BC,YAAA,QAC7BkB,gBAAe,WAIb,OACEhB,WAOJ6B,aAAY,SAACC,GACX,GAAIC,GAAYxB,KAAKiB,MAAMxB,MAAMgC,QAAQF,GACzCvB,MAAKa,UAAUpB,MAAO+B,KAGxB1B,OAAM,WACJ,MACEV,GAAAW,cAAA,MAAI,KACFX,EAAAW,cAAA,KAAG,KAAC,QACJX,EAAAW,cAACV,GAAQI,MAACO,KAAOiB,MAAKxB,QACtBL,EAAAW,cAACO,GAAQC,SAACP,KAAUsB,kBAM5BlC,GAAMU,OACJV,EAAAW,cAACsB,EAAK,MACNK,SAASC,eAAe,eDcpBC;;;AAIA,SAAS3C,GE7IfA,EAAAC,QAAA","file":"4.bundle.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 6:\n/*!*************************!*\\\n !*** ./demo4/demo4.jsx ***!\n \\*************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React = __webpack_require__(/*! react */ 1);\n\t\n\tvar TodoList = React.createClass({displayName: 'TodoList',\n\t // `TodoList` takes a prop called `items` which is an array of\n\t // strings. We can make this requirement \"official\" using propTypes.\n\t // If a component doesn't get the properties listed in its\n\t // propTypes, it will warn you in the console (if using a development\n\t // build of React).\n\t propTypes: {\n\t items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired\n\t },\n\t\n\t render:function() {\n\t // Every component in an array should have a `key` attribute\n\t // set so React can uniquely identify the item if it needs\n\t // to remove it from the middle of the array without iterating\n\t // over every component in the array.\n\t // Since our todos can't be reordered, we'll just use the index.\n\t //\n\t // Also notice the use of another ES6 feature in the call to `map`,\n\t // arrow functions. The bodies of arrow functions are automatically\n\t // bound to the value of `this` outside of them, so no more calling\n\t // `.bind(this)` or `var self = this` juggling.\n\t return (\n\t React.createElement(\"ul\", null, \n\t this.props.items.map(function(item, index) {\n\t return React.createElement(\"li\", {key: index}, item);\n\t })\n\t )\n\t );\n\t }\n\t});\n\t\n\tvar TodoForm = React.createClass({displayName: 'TodoForm',\n\t // React has PropTypes for most built-in JS types, as well as the\n\t // ability to define your own validation functions.\n\t //\n\t // `TodoForm` requires an `onSubmit` property that we'll use to notify\n\t // our parent component that the form has been submitted; this makes\n\t // the component more reusable, since the logic for what to do with\n\t // the submitted form isn't hardcoded into the `TodoForm` component.\n\t propTypes: {\n\t onSubmit: React.PropTypes.func.isRequired\n\t },\n\t\n\t // `TodoForm` contains a text input with a `value` attribute, which\n\t // makes the input a \"controlled\" input. This means that the input\n\t // will *always* display whatever is passed to its `value` no matter\n\t // what the user tries to type in the box. The `text` property of\n\t // our state is the current string to display in the box.\n\t getInitialState:function() {\n\t return {\n\t text: \"\"\n\t };\n\t },\n\t\n\t // The text input has an `onChange` property, which calls a function\n\t // any time the user interacts with the box. Here, we update our\n\t // state so the text in the box updates.\n\t //\n\t // This is necessary because React components' `render` functions should\n\t // *always* describe how the component should look at *any* point and time;\n\t // if we didn't use a controlled input, the text might reset in certain\n\t // re-rendering situations.\n\t onTextChange:function(e) {\n\t this.setState({text: e.target.value});\n\t },\n\t\n\t // The form also has a handler for `onSubmit`...\n\t onSubmit:function(e) {\n\t e.preventDefault();\n\t if (this.state.text.trim()) {\n\t // ... which we'll use to indicate to our parent that an\n\t // item has been submitted...\n\t this.props.onSubmit(this.state.text);\n\t // ... and then clear the text box.\n\t this.setState({text: \"\"});\n\t }\n\t },\n\t\n\t render:function() {\n\t return (\n\t React.createElement(\"form\", {onSubmit: this.onSubmit}, \n\t React.createElement(\"input\", {type: \"text\", value: this.state.text, onChange: this.onTextChange}), \n\t React.createElement(\"input\", {type: \"submit\", value: \"Add Todo\"})\n\t )\n\t );\n\t }\n\t});\n\t\n\t// Our `Todos` component is the full application, which very simply composes\n\t// the `TodoList` and `TodoForm` components.\n\tvar Todos = React.createClass({displayName: 'Todos',\n\t getInitialState:function() {\n\t // It owns the actual items array, so the composed `TodoList`\n\t // and `TodoForm` can be reused in many contexts (that is, they\n\t // are not application specific).\n\t return {\n\t items: []\n\t };\n\t },\n\t\n\t // `onSubmitTodo` is the function we pass to `TodoForm`'s\n\t // `onSubmit` property; so, it will be called when `TodoForm`\n\t // calls `this.props.onSubmit(...)`.\n\t onSubmitTodo:function(newTodo) {\n\t var nextItems = this.state.items.concat([newTodo]);\n\t this.setState({items: nextItems});\n\t },\n\t\n\t render:function() {\n\t return (\n\t React.createElement(\"div\", null, \n\t React.createElement(\"h3\", null, \"TODO\"), \n\t React.createElement(TodoList, {items: this.state.items}), \n\t React.createElement(TodoForm, {onSubmit: this.onSubmitTodo})\n\t )\n\t );\n\t }\n\t});\n\t\n\tReact.render(\n\t React.createElement(Todos, null),\n\t document.getElementById(\"container\")\n\t);\n\n\n/***/ },\n\n/***/ 13:\n/*!****************************************!*\\\n !*** ./~/raw-loader!./demo4/demo4.jsx ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = \"var React = require(\\\"react\\\");\\n\\nvar TodoList = React.createClass({\\n // `TodoList` takes a prop called `items` which is an array of\\n // strings. We can make this requirement \\\"official\\\" using propTypes.\\n // If a component doesn't get the properties listed in its\\n // propTypes, it will warn you in the console (if using a development\\n // build of React).\\n propTypes: {\\n items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired\\n },\\n\\n render() {\\n // Every component in an array should have a `key` attribute\\n // set so React can uniquely identify the item if it needs\\n // to remove it from the middle of the array without iterating\\n // over every component in the array.\\n // Since our todos can't be reordered, we'll just use the index.\\n //\\n // Also notice the use of another ES6 feature in the call to `map`,\\n // arrow functions. The bodies of arrow functions are automatically\\n // bound to the value of `this` outside of them, so no more calling\\n // `.bind(this)` or `var self = this` juggling.\\n return (\\n
    \\n {this.props.items.map((item, index) => {\\n return
  • {item}
    • ;\\n })}\\n
\\n );\\n }\\n});\\n\\nvar TodoForm = React.createClass({\\n // React has PropTypes for most built-in JS types, as well as the\\n // ability to define your own validation functions.\\n //\\n // `TodoForm` requires an `onSubmit` property that we'll use to notify\\n // our parent component that the form has been submitted; this makes\\n // the component more reusable, since the logic for what to do with\\n // the submitted form isn't hardcoded into the `TodoForm` component.\\n propTypes: {\\n onSubmit: React.PropTypes.func.isRequired\\n },\\n\\n // `TodoForm` contains a text input with a `value` attribute, which\\n // makes the input a \\\"controlled\\\" input. This means that the input\\n // will *always* display whatever is passed to its `value` no matter\\n // what the user tries to type in the box. The `text` property of\\n // our state is the current string to display in the box.\\n getInitialState() {\\n return {\\n text: \\\"\\\"\\n };\\n },\\n\\n // The text input has an `onChange` property, which calls a function\\n // any time the user interacts with the box. Here, we update our\\n // state so the text in the box updates.\\n //\\n // This is necessary because React components' `render` functions should\\n // *always* describe how the component should look at *any* point and time;\\n // if we didn't use a controlled input, the text might reset in certain\\n // re-rendering situations.\\n onTextChange(e) {\\n this.setState({text: e.target.value});\\n },\\n\\n // The form also has a handler for `onSubmit`...\\n onSubmit(e) {\\n e.preventDefault();\\n if (this.state.text.trim()) {\\n // ... which we'll use to indicate to our parent that an\\n // item has been submitted...\\n this.props.onSubmit(this.state.text);\\n // ... and then clear the text box.\\n this.setState({text: \\\"\\\"});\\n }\\n },\\n\\n render() {\\n return (\\n
\\n \\n \\n
\\n );\\n }\\n});\\n\\n// Our `Todos` component is the full application, which very simply composes\\n// the `TodoList` and `TodoForm` components.\\nvar Todos = React.createClass({\\n getInitialState() {\\n // It owns the actual items array, so the composed `TodoList`\\n // and `TodoForm` can be reused in many contexts (that is, they\\n // are not application specific).\\n return {\\n items: []\\n };\\n },\\n\\n // `onSubmitTodo` is the function we pass to `TodoForm`'s\\n // `onSubmit` property; so, it will be called when `TodoForm`\\n // calls `this.props.onSubmit(...)`.\\n onSubmitTodo(newTodo) {\\n var nextItems = this.state.items.concat([newTodo]);\\n this.setState({items: nextItems});\\n },\\n\\n render() {\\n return (\\n
\\n

TODO

\\n \\n \\n
\\n );\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** 4.bundle.js\n **/","var React = require(\"react\");\n\nvar TodoList = React.createClass({\n // `TodoList` takes a prop called `items` which is an array of\n // strings. We can make this requirement \"official\" using propTypes.\n // If a component doesn't get the properties listed in its\n // propTypes, it will warn you in the console (if using a development\n // build of React).\n propTypes: {\n items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired\n },\n\n render() {\n // Every component in an array should have a `key` attribute\n // set so React can uniquely identify the item if it needs\n // to remove it from the middle of the array without iterating\n // over every component in the array.\n // Since our todos can't be reordered, we'll just use the index.\n //\n // Also notice the use of another ES6 feature in the call to `map`,\n // arrow functions. The bodies of arrow functions are automatically\n // bound to the value of `this` outside of them, so no more calling\n // `.bind(this)` or `var self = this` juggling.\n return (\n
    \n {this.props.items.map((item, index) => {\n return
  • {item}
    • ;\n })}\n
\n );\n }\n});\n\nvar TodoForm = React.createClass({\n // React has PropTypes for most built-in JS types, as well as the\n // ability to define your own validation functions.\n //\n // `TodoForm` requires an `onSubmit` property that we'll use to notify\n // our parent component that the form has been submitted; this makes\n // the component more reusable, since the logic for what to do with\n // the submitted form isn't hardcoded into the `TodoForm` component.\n propTypes: {\n onSubmit: React.PropTypes.func.isRequired\n },\n\n // `TodoForm` contains a text input with a `value` attribute, which\n // makes the input a \"controlled\" input. This means that the input\n // will *always* display whatever is passed to its `value` no matter\n // what the user tries to type in the box. The `text` property of\n // our state is the current string to display in the box.\n getInitialState() {\n return {\n text: \"\"\n };\n },\n\n // The text input has an `onChange` property, which calls a function\n // any time the user interacts with the box. Here, we update our\n // state so the text in the box updates.\n //\n // This is necessary because React components' `render` functions should\n // *always* describe how the component should look at *any* point and time;\n // if we didn't use a controlled input, the text might reset in certain\n // re-rendering situations.\n onTextChange(e) {\n this.setState({text: e.target.value});\n },\n\n // The form also has a handler for `onSubmit`...\n onSubmit(e) {\n e.preventDefault();\n if (this.state.text.trim()) {\n // ... which we'll use to indicate to our parent that an\n // item has been submitted...\n this.props.onSubmit(this.state.text);\n // ... and then clear the text box.\n this.setState({text: \"\"});\n }\n },\n\n render() {\n return (\n
\n \n \n
\n );\n }\n});\n\n// Our `Todos` component is the full application, which very simply composes\n// the `TodoList` and `TodoForm` components.\nvar Todos = React.createClass({\n getInitialState() {\n // It owns the actual items array, so the composed `TodoList`\n // and `TodoForm` can be reused in many contexts (that is, they\n // are not application specific).\n return {\n items: []\n };\n },\n\n // `onSubmitTodo` is the function we pass to `TodoForm`'s\n // `onSubmit` property; so, it will be called when `TodoForm`\n // calls `this.props.onSubmit(...)`.\n onSubmitTodo(newTodo) {\n var nextItems = this.state.items.concat([newTodo]);\n this.setState({items: nextItems});\n },\n\n render() {\n return (\n
\n

TODO

\n \n \n
\n );\n }\n});\n\nReact.render(\n ,\n document.getElementById(\"container\")\n);\n\n\n\n/** WEBPACK FOOTER **\n ** ./demo4/demo4.jsx\n **/","module.exports = \"var React = require(\\\"react\\\");\\n\\nvar TodoList = React.createClass({\\n // `TodoList` takes a prop called `items` which is an array of\\n // strings. We can make this requirement \\\"official\\\" using propTypes.\\n // If a component doesn't get the properties listed in its\\n // propTypes, it will warn you in the console (if using a development\\n // build of React).\\n propTypes: {\\n items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired\\n },\\n\\n render() {\\n // Every component in an array should have a `key` attribute\\n // set so React can uniquely identify the item if it needs\\n // to remove it from the middle of the array without iterating\\n // over every component in the array.\\n // Since our todos can't be reordered, we'll just use the index.\\n //\\n // Also notice the use of another ES6 feature in the call to `map`,\\n // arrow functions. The bodies of arrow functions are automatically\\n // bound to the value of `this` outside of them, so no more calling\\n // `.bind(this)` or `var self = this` juggling.\\n return (\\n
    \\n {this.props.items.map((item, index) => {\\n return
  • {item}
    • ;\\n })}\\n
\\n );\\n }\\n});\\n\\nvar TodoForm = React.createClass({\\n // React has PropTypes for most built-in JS types, as well as the\\n // ability to define your own validation functions.\\n //\\n // `TodoForm` requires an `onSubmit` property that we'll use to notify\\n // our parent component that the form has been submitted; this makes\\n // the component more reusable, since the logic for what to do with\\n // the submitted form isn't hardcoded into the `TodoForm` component.\\n propTypes: {\\n onSubmit: React.PropTypes.func.isRequired\\n },\\n\\n // `TodoForm` contains a text input with a `value` attribute, which\\n // makes the input a \\\"controlled\\\" input. This means that the input\\n // will *always* display whatever is passed to its `value` no matter\\n // what the user tries to type in the box. The `text` property of\\n // our state is the current string to display in the box.\\n getInitialState() {\\n return {\\n text: \\\"\\\"\\n };\\n },\\n\\n // The text input has an `onChange` property, which calls a function\\n // any time the user interacts with the box. Here, we update our\\n // state so the text in the box updates.\\n //\\n // This is necessary because React components' `render` functions should\\n // *always* describe how the component should look at *any* point and time;\\n // if we didn't use a controlled input, the text might reset in certain\\n // re-rendering situations.\\n onTextChange(e) {\\n this.setState({text: e.target.value});\\n },\\n\\n // The form also has a handler for `onSubmit`...\\n onSubmit(e) {\\n e.preventDefault();\\n if (this.state.text.trim()) {\\n // ... which we'll use to indicate to our parent that an\\n // item has been submitted...\\n this.props.onSubmit(this.state.text);\\n // ... and then clear the text box.\\n this.setState({text: \\\"\\\"});\\n }\\n },\\n\\n render() {\\n return (\\n
\\n \\n \\n
\\n );\\n }\\n});\\n\\n// Our `Todos` component is the full application, which very simply composes\\n// the `TodoList` and `TodoForm` components.\\nvar Todos = React.createClass({\\n getInitialState() {\\n // It owns the actual items array, so the composed `TodoList`\\n // and `TodoForm` can be reused in many contexts (that is, they\\n // are not application specific).\\n return {\\n items: []\\n };\\n },\\n\\n // `onSubmitTodo` is the function we pass to `TodoForm`'s\\n // `onSubmit` property; so, it will be called when `TodoForm`\\n // calls `this.props.onSubmit(...)`.\\n onSubmitTodo(newTodo) {\\n var nextItems = this.state.items.concat([newTodo]);\\n this.setState({items: nextItems});\\n },\\n\\n render() {\\n return (\\n
\\n

TODO

\\n \\n \\n
\\n );\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/raw-loader!./demo4/demo4.jsx\n ** module id = 13\n ** module chunks = 4\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/5.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([5],{7:/*!*************************!*\ 2 | !*** ./demo5/demo5.jsx ***! 3 | \*************************/ 4 | function(e,t,n){var o=n(/*! react */1),a={componentWillMount:function(){this.intervals=[]},setInterval:function(){this.intervals.push(setInterval.apply(null,arguments))},componentWillUnmount:function(){this.intervals.forEach(clearInterval)}},i=o.createClass({displayName:"Timer",mixins:[a],getInitialState:function(){return{time:0}},componentDidMount:function(){this.setInterval(this.tick,1e3)},tick:function(){this.setState({time:this.state.time+1})},render:function(){return o.createElement("div",null,"Time: ",this.state.time)}});o.render(o.createElement(i,null),document.getElementById("container"))},14:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo5/demo5.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports='var React = require("react");\n\n// While composition is the best technique for using components\n// together, sometimes it\'s desirable to have cross-cutting concerns\n// that are shared between multiple components. React uses mixins\n// to solve this problem.\n\n// A mixin is simply an object that defines certain component\n// lifecycle hooks and properties. Here\'s a mixin we\'ll use\n// to reimplement the Timer demo.\nvar SetIntervalMixin = {\n // Many lifecycle hooks are automatically merged with the\n // same hook defined in other mixins or the component itself.\n componentWillMount() {\n this.intervals = [];\n },\n\n // Mixins can also define other methods to make available\n // to the component.\n setInterval() {\n this.intervals.push(setInterval.apply(null, arguments));\n },\n\n componentWillUnmount() {\n this.intervals.forEach(clearInterval);\n }\n};\n\nvar Timer = React.createClass({\n // Use a mixin by adding it to the `mixins` array for a component.\n mixins: [SetIntervalMixin],\n\n getInitialState() {\n return {\n time: 0\n };\n },\n\n // Now we can use the mixin to set the interval without worrying\n // about setting our own `componentWillUnmount` hook.\n componentDidMount() {\n this.setInterval(this.tick, 1000);\n },\n\n tick() {\n this.setState({time: this.state.time + 1});\n },\n\n render() {\n return
Time: {this.state.time}
;\n }\n});\n\nReact.render(\n ,\n document.getElementById("container")\n);\n'}}); 8 | //# sourceMappingURL=5.bundle.js.map -------------------------------------------------------------------------------- /build/5.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///5.bundle.js","webpack:///./demo5/demo5.jsx","webpack:///./demo5/demo5.jsx?b0b1"],"names":["webpackJsonp",7,"module","exports","__webpack_require__","React","SetIntervalMixin","componentWillMount","this","intervals","setInterval","push","apply","arguments","componentWillUnmount","forEach","clearInterval","Timer","createClass","displayName","mixins","getInitialState","time","componentDidMount","tick","setState","state","render","createElement","document","getElementById",14],"mappings":"AAAAA,cAAc,IAERC;;;AAIA,SAASC,EAAQC,EAASC,GCNhC,GAAIC,GAAQD,cAAQ,GAUhBE,GAGFC,mBAAkB,WAChBC,KAAKC,cAKPC,YAAW,WACTF,KAAKC,UAAUE,KAAKD,YAAYE,MAAM,KAAMC,aAG9CC,qBAAoB,WAClBN,KAAKC,UAAUM,QAAQC,iBAIvBC,EAAAZ,EAAAa,aAA2BC,YAAA,QAE7BC,QAASd,GAETe,gBAAe,WACb,OACEC,KAAM,IAMVC,kBAAiB,WACff,KAAKE,YAAYF,KAAKgB,KAAM,MAG9BA,KAAI,WACFhB,KAAKiB,UAAUH,KAAMd,KAAKkB,MAAMJ,KAAO,KAGzCK,OAAM,WACJ,MAAOtB,GAAAuB,cAAA,MAAI,KAAC,SAAOpB,KAAKkB,MAAMJ,QAIlCjB,GAAMsB,OACJtB,EAAAuB,cAACX,EAAK,MACNY,SAASC,eAAe,eDcpBC;;;AAIA,SAAS7B,GEzEfA,EAAAC,QAAA","file":"5.bundle.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 7:\n/*!*************************!*\\\n !*** ./demo5/demo5.jsx ***!\n \\*************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React = __webpack_require__(/*! react */ 1);\n\t\n\t// While composition is the best technique for using components\n\t// together, sometimes it's desirable to have cross-cutting concerns\n\t// that are shared between multiple components. React uses mixins\n\t// to solve this problem.\n\t\n\t// A mixin is simply an object that defines certain component\n\t// lifecycle hooks and properties. Here's a mixin we'll use\n\t// to reimplement the Timer demo.\n\tvar SetIntervalMixin = {\n\t // Many lifecycle hooks are automatically merged with the\n\t // same hook defined in other mixins or the component itself.\n\t componentWillMount:function() {\n\t this.intervals = [];\n\t },\n\t\n\t // Mixins can also define other methods to make available\n\t // to the component.\n\t setInterval:function() {\n\t this.intervals.push(setInterval.apply(null, arguments));\n\t },\n\t\n\t componentWillUnmount:function() {\n\t this.intervals.forEach(clearInterval);\n\t }\n\t};\n\t\n\tvar Timer = React.createClass({displayName: 'Timer',\n\t // Use a mixin by adding it to the `mixins` array for a component.\n\t mixins: [SetIntervalMixin],\n\t\n\t getInitialState:function() {\n\t return {\n\t time: 0\n\t };\n\t },\n\t\n\t // Now we can use the mixin to set the interval without worrying\n\t // about setting our own `componentWillUnmount` hook.\n\t componentDidMount:function() {\n\t this.setInterval(this.tick, 1000);\n\t },\n\t\n\t tick:function() {\n\t this.setState({time: this.state.time + 1});\n\t },\n\t\n\t render:function() {\n\t return React.createElement(\"div\", null, \"Time: \", this.state.time);\n\t }\n\t});\n\t\n\tReact.render(\n\t React.createElement(Timer, null),\n\t document.getElementById(\"container\")\n\t);\n\n\n/***/ },\n\n/***/ 14:\n/*!****************************************!*\\\n !*** ./~/raw-loader!./demo5/demo5.jsx ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = \"var React = require(\\\"react\\\");\\n\\n// While composition is the best technique for using components\\n// together, sometimes it's desirable to have cross-cutting concerns\\n// that are shared between multiple components. React uses mixins\\n// to solve this problem.\\n\\n// A mixin is simply an object that defines certain component\\n// lifecycle hooks and properties. Here's a mixin we'll use\\n// to reimplement the Timer demo.\\nvar SetIntervalMixin = {\\n // Many lifecycle hooks are automatically merged with the\\n // same hook defined in other mixins or the component itself.\\n componentWillMount() {\\n this.intervals = [];\\n },\\n\\n // Mixins can also define other methods to make available\\n // to the component.\\n setInterval() {\\n this.intervals.push(setInterval.apply(null, arguments));\\n },\\n\\n componentWillUnmount() {\\n this.intervals.forEach(clearInterval);\\n }\\n};\\n\\nvar Timer = React.createClass({\\n // Use a mixin by adding it to the `mixins` array for a component.\\n mixins: [SetIntervalMixin],\\n\\n getInitialState() {\\n return {\\n time: 0\\n };\\n },\\n\\n // Now we can use the mixin to set the interval without worrying\\n // about setting our own `componentWillUnmount` hook.\\n componentDidMount() {\\n this.setInterval(this.tick, 1000);\\n },\\n\\n tick() {\\n this.setState({time: this.state.time + 1});\\n },\\n\\n render() {\\n return
Time: {this.state.time}
;\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** 5.bundle.js\n **/","var React = require(\"react\");\n\n// While composition is the best technique for using components\n// together, sometimes it's desirable to have cross-cutting concerns\n// that are shared between multiple components. React uses mixins\n// to solve this problem.\n\n// A mixin is simply an object that defines certain component\n// lifecycle hooks and properties. Here's a mixin we'll use\n// to reimplement the Timer demo.\nvar SetIntervalMixin = {\n // Many lifecycle hooks are automatically merged with the\n // same hook defined in other mixins or the component itself.\n componentWillMount() {\n this.intervals = [];\n },\n\n // Mixins can also define other methods to make available\n // to the component.\n setInterval() {\n this.intervals.push(setInterval.apply(null, arguments));\n },\n\n componentWillUnmount() {\n this.intervals.forEach(clearInterval);\n }\n};\n\nvar Timer = React.createClass({\n // Use a mixin by adding it to the `mixins` array for a component.\n mixins: [SetIntervalMixin],\n\n getInitialState() {\n return {\n time: 0\n };\n },\n\n // Now we can use the mixin to set the interval without worrying\n // about setting our own `componentWillUnmount` hook.\n componentDidMount() {\n this.setInterval(this.tick, 1000);\n },\n\n tick() {\n this.setState({time: this.state.time + 1});\n },\n\n render() {\n return
Time: {this.state.time}
;\n }\n});\n\nReact.render(\n ,\n document.getElementById(\"container\")\n);\n\n\n\n/** WEBPACK FOOTER **\n ** ./demo5/demo5.jsx\n **/","module.exports = \"var React = require(\\\"react\\\");\\n\\n// While composition is the best technique for using components\\n// together, sometimes it's desirable to have cross-cutting concerns\\n// that are shared between multiple components. React uses mixins\\n// to solve this problem.\\n\\n// A mixin is simply an object that defines certain component\\n// lifecycle hooks and properties. Here's a mixin we'll use\\n// to reimplement the Timer demo.\\nvar SetIntervalMixin = {\\n // Many lifecycle hooks are automatically merged with the\\n // same hook defined in other mixins or the component itself.\\n componentWillMount() {\\n this.intervals = [];\\n },\\n\\n // Mixins can also define other methods to make available\\n // to the component.\\n setInterval() {\\n this.intervals.push(setInterval.apply(null, arguments));\\n },\\n\\n componentWillUnmount() {\\n this.intervals.forEach(clearInterval);\\n }\\n};\\n\\nvar Timer = React.createClass({\\n // Use a mixin by adding it to the `mixins` array for a component.\\n mixins: [SetIntervalMixin],\\n\\n getInitialState() {\\n return {\\n time: 0\\n };\\n },\\n\\n // Now we can use the mixin to set the interval without worrying\\n // about setting our own `componentWillUnmount` hook.\\n componentDidMount() {\\n this.setInterval(this.tick, 1000);\\n },\\n\\n tick() {\\n this.setState({time: this.state.time + 1});\\n },\\n\\n render() {\\n return
Time: {this.state.time}
;\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/raw-loader!./demo5/demo5.jsx\n ** module id = 14\n ** module chunks = 5\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/6.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([6],{8:/*!*************************!*\ 2 | !*** ./demo6/demo6.jsx ***! 3 | \*************************/ 4 | function(e,t,n){function r(){for(var e=Math.floor(16777215*Math.random()).toString(16);e.length<6;)e="0"+e;return"#"+e}var i=n(/*! react */1),o=n(/*! ./store.jsx */29),s=n(/*! ./item.jsx */30);n(/*! ./demo6.less */68);var a=new o,c=function(e,t){return a.addItem(e,t)},l=function(e){return a.removeItem(e)},u=function(e,t,n){return a.changeItem(e,t,n)},h=function(){return a.clearItems()},d=i.createClass({displayName:"Application",handleItemChange:function(e,t,n){u(e,t,n)},handleRemoveItem:function(e){l(e)},addItem:function(){c(r(),Math.floor(800*Math.random()+200))},addManyItems:function(){for(var e=0;1e3>e;e++)this.addItem()},clearItems:function(){h()},render:function(){return i.createElement("div",null,i.createElement("div",null,i.createElement("button",{onClick:this.addItem},"Add New Item"),i.createElement("button",{onClick:this.addManyItems},"Add Many Items"),i.createElement("button",{onClick:this.clearItems},"Remove All Items")),this.props.items.map(function(e){return i.createElement(s,{color:e.color,width:e.width,id:e.id,key:e.id,onChange:this.handleItemChange,onRemove:this.handleRemoveItem})}.bind(this)))}}),m=function(){i.render(i.createElement(d,{items:a.items}),document.getElementById("container"))};a.on("change",m),m()},15:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo6/demo6.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports='var React = require("react"),\n Store = require("./store.jsx"),\n Item = require("./item.jsx");\n\nrequire("./demo6.less");\n\n// This demo introduces the idea of a top-level data store\n// that the main application uses to get data from;\n// any time the store updates, it triggers a "change"\n// event and the `Application` component gets re-rendered.\n//\n// Because React uses a fast virtual DOM under the hood, the\n// actual DOM doesn\'t get changed unless the output of the `render`\n// function for a component actually results in different output.\n\n// Take a look at `store.jsx` for details on the Store class;\n// then, continue reading.\nvar store = new Store();\n\n// Here are a few utility functions which help us abstract away\n// the store API from the `Application` component.\nvar addItem = (color, width) => store.addItem(color, width);\nvar removeItem = (itemId) => store.removeItem(itemId);\nvar changeItem = (itemId, color, width) => store.changeItem(itemId, color, width);\nvar clearItems = () => store.clearItems();\n\nfunction randomColor() {\n var hex = Math.floor(Math.random() * 16777215).toString(16);\n while (hex.length < 6) {\n hex = "0" + hex;\n }\n return "#" + hex;\n}\n\nvar Application = React.createClass({\n handleItemChange(itemId, color, width) {\n changeItem(itemId, color, width);\n },\n\n handleRemoveItem(itemId) {\n removeItem(itemId);\n },\n\n addItem() {\n addItem(randomColor(), Math.floor(Math.random() * 800 + 200));\n },\n\n addManyItems() {\n for (var i = 0; i < 1000; i++) {\n this.addItem();\n }\n },\n\n clearItems() {\n clearItems();\n },\n\n render() {\n // For each item in the `items` property, we render\n // an `Item` component. Notice each one has a `key` of the item\'s\n // ID, since the items can be removed from inside the middle\n // of the array.\n //\n // Take a look at `item.jsx` to see how the Item component\n // is implemented, including the ability to do fast updates\n // via `shouldComponentUpdate`.\n return (\n
\n
\n \n \n \n
\n {this.props.items.map((item) => {\n return \n })}\n
\n );\n }\n});\n\nvar renderApp = () => {\n // When we render the application, we pass the store\'s\n // data via the `items` property.\n React.render(\n ,\n document.getElementById("container")\n );\n}\n\n// Any time the store emits a change event, we re-render\n// the application; React is smart enough to reuse the existing\n// component and simply pass it the new properties.\nstore.on("change", renderApp);\nrenderApp();\n'},16:/*!****************************************!*\ 8 | !*** ./~/raw-loader!./demo6/store.jsx ***! 9 | \****************************************/ 10 | function(e){e.exports='var EventEmitter = require("events").EventEmitter,\n util = require("util");\n\nvar id = 1;\n\n// The store simply keeps track of an array of items. Each item\n// has an id, a color, and a width.\n//\n// Notice we\'re using another ES6 feature, classes.\nclass Store extends EventEmitter {\n constructor() {\n super();\n this.items = [];\n this.itemsById = {};\n this.addItem("red", 300);\n }\n\n // Any time an item is added, removed, or changed,\n // we emit a "change" event, which is used in the React component.\n addItem(color, width) {\n var item = {id: ++id, color: color, width: width};\n this.items.push(item);\n this.itemsById[id] = item;\n this.emit("change");\n }\n\n removeItem(itemId) {\n var item = this.itemsById[itemId],\n index = this.items.indexOf(item);\n if (index > -1) {\n this.items.splice(index, 1);\n delete this.itemsById[itemId];\n this.emit("change");\n }\n }\n\n changeItem(itemId, color, width) {\n var item = this.itemsById[itemId];\n item.color = color;\n item.width = width;\n this.emit("change");\n }\n\n clearItems() {\n this.items = [];\n this.itemsById = {};\n this.emit("change");\n }\n}\n\nmodule.exports = Store;\n'},17:/*!***************************************!*\ 11 | !*** ./~/raw-loader!./demo6/item.jsx ***! 12 | \***************************************/ 13 | function(e){e.exports='var React = require("react");\n\nvar Item = React.createClass({\n propTypes: {\n onChange: React.PropTypes.func,\n onRemove: React.PropTypes.func,\n id: React.PropTypes.number.isRequired,\n color: React.PropTypes.string.isRequired,\n width: React.PropTypes.number.isRequired\n },\n\n // If any properties are not required, you can specify\n // default properties for them with `getDefaultProps`.\n // Note this function is only evaluated once when the ReactComponent class\n // is defined (and is cached for future instances of that same component).\n getDefaultProps() {\n return {\n onChange: function() {},\n onRemove: function() {}\n };\n },\n\n // React provides a `shouldComponentUpdate` hook that allows\n // you to return `false` if you know for sure your component\n // (and its children) will not need to be updated. You can use\n // the current and incoming state and props to make this decision.\n // For example, to only re-render if the props or state have changed\n // (based on a shallow check), you could use:\n //\n // shouldComponentUpdate(nextProps, nextState) {\n // return !shallowEqual(this.props, nextProps) ||\n // !shallowEqual(this.state, nextState);\n // },\n //\n // If a component doesn\'t re-render due to `shouldComponentUpdate`\n // returning false, none of its children will re-render either.\n\n // `PureRenderMixin` is an implementation of the `shallowEqual`\n // example above. Comment this line out to see how much slower\n // editing items in the UI is with a large number of items;\n // that\'s because React is calling `render` on every `Item`\n // component to figure out if it needs to update; it\'s much\n // faster to use `shouldComponentUpdate` (or this mixin).\n mixins: [React.addons.PureRenderMixin],\n\n // All changes to the item are delegated to the parent via properties.\n handleColorChange(e) {\n this.props.onChange(this.props.id, e.target.value, this.props.width);\n },\n\n handleWidthChange(e) {\n var width = ~~e.target.value;\n this.props.onChange(this.props.id, this.props.color, width);\n },\n\n handleRemoveClick() {\n this.props.onRemove(this.props.id);\n },\n\n render() {\n // The special `style` property on React.DOM-based ReactElements\n // allows you to specify styles as a hash. Another common property\n // is `className`, which allows you to specify a string to use\n // for the element\'s `class` attribute.\n var style = {\n background: this.props.color,\n width: this.props.width\n };\n\n // Notice all inputs are controlled inputs; that is to say,\n // their value is "locked in" to whatever `this.props.color`\n // or `this.props.width` is. It\'s only because the\n // `onChange` handlers delegate to functions that cause a\n // re-render with different properties that the inputs\n // are actually editable.\n return (\n
\n
\n \n
\n
\n \n
\n
{this.props.width}
\n
\n \n
\n
\n );\n }\n});\n\nmodule.exports = Item;\n'},29:/*!*************************!*\ 14 | !*** ./demo6/store.jsx ***! 15 | \*************************/ 16 | function(e,t,n){function r(){"use strict";i.call(this),this.items=[],this.itemsById={},this.addItem("red",300)}var i=n(/*! events */71).EventEmitter,o=(n(/*! util */72),1);for(var s in i)i.hasOwnProperty(s)&&(r[s]=i[s]);var a=null===i?null:i.prototype;r.prototype=Object.create(a),r.prototype.constructor=r,r.__superConstructor__=i,r.prototype.addItem=function(e,t){"use strict";var n={id:++o,color:e,width:t};this.items.push(n),this.itemsById[o]=n,this.emit("change")},r.prototype.removeItem=function(e){"use strict";var t=this.itemsById[e],n=this.items.indexOf(t);n>-1&&(this.items.splice(n,1),delete this.itemsById[e],this.emit("change"))},r.prototype.changeItem=function(e,t,n){"use strict";var r=this.itemsById[e];r.color=t,r.width=n,this.emit("change")},r.prototype.clearItems=function(){"use strict";this.items=[],this.itemsById={},this.emit("change")},e.exports=r},30:/*!************************!*\ 17 | !*** ./demo6/item.jsx ***! 18 | \************************/ 19 | function(e,t,n){var r=n(/*! react */1),i=r.createClass({displayName:"Item",propTypes:{onChange:r.PropTypes.func,onRemove:r.PropTypes.func,id:r.PropTypes.number.isRequired,color:r.PropTypes.string.isRequired,width:r.PropTypes.number.isRequired},getDefaultProps:function(){return{onChange:function(){},onRemove:function(){}}},mixins:[r.addons.PureRenderMixin],handleColorChange:function(e){this.props.onChange(this.props.id,e.target.value,this.props.width)},handleWidthChange:function(e){var t=~~e.target.value;this.props.onChange(this.props.id,this.props.color,t)},handleRemoveClick:function(){this.props.onRemove(this.props.id)},render:function(){var e={background:this.props.color,width:this.props.width};return r.createElement("div",{style:e,className:"item"},r.createElement("div",null,r.createElement("input",{type:"text",value:this.props.color,onChange:this.handleColorChange})),r.createElement("div",null,r.createElement("input",{type:"range",min:200,max:1e3,value:this.props.width,onChange:this.handleWidthChange})),r.createElement("div",null,this.props.width),r.createElement("div",null,r.createElement("button",{onClick:this.handleRemoveClick},"Remove")))}});e.exports=i},68:/*!**************************!*\ 20 | !*** ./demo6/demo6.less ***! 21 | \**************************/ 22 | function(e,t,n){var r=n(/*! !./~/css-loader!./~/less-loader!./demo6/demo6.less */69);"string"==typeof r&&(r=[[e.id,r,""]]);n(/*! ./~/style-loader/addStyles.js */70)(r)},69:/*!*********************************************************!*\ 23 | !*** ./~/css-loader!./~/less-loader!./demo6/demo6.less ***! 24 | \*********************************************************/ 25 | function(e,t,n){t=e.exports=n(/*! ./~/css-loader/cssToString.js */127)(),t.push([e.id,".item{border:1px solid #000;height:70px;display:block;padding:20px;margin:10px 0}",""])},70:/*!*************************************!*\ 26 | !*** ./~/style-loader/addStyles.js ***! 27 | \*************************************/ 28 | function(e){function t(e){for(var t=0;te||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},t.prototype.emit=function(e){var t,r,s,a,c,l;if(this._events||(this._events={}),"error"===e&&(!this._events.error||i(this._events.error)&&!this._events.error.length)){if(t=arguments[1],t instanceof Error)throw t;throw TypeError('Uncaught, unspecified "error" event.')}if(r=this._events[e],o(r))return!1;if(n(r))switch(arguments.length){case 1:r.call(this);break;case 2:r.call(this,arguments[1]);break;case 3:r.call(this,arguments[1],arguments[2]);break;default:for(s=arguments.length,a=new Array(s-1),c=1;s>c;c++)a[c-1]=arguments[c];r.apply(this,a)}else if(i(r)){for(s=arguments.length,a=new Array(s-1),c=1;s>c;c++)a[c-1]=arguments[c];for(l=r.slice(),s=l.length,c=0;s>c;c++)l[c].apply(this,a)}return!0},t.prototype.addListener=function(e,r){var s;if(!n(r))throw TypeError("listener must be a function");if(this._events||(this._events={}),this._events.newListener&&this.emit("newListener",e,n(r.listener)?r.listener:r),this._events[e]?i(this._events[e])?this._events[e].push(r):this._events[e]=[this._events[e],r]:this._events[e]=r,i(this._events[e])&&!this._events[e].warned){var s;s=o(this._maxListeners)?t.defaultMaxListeners:this._maxListeners,s&&s>0&&this._events[e].length>s&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace())}return this},t.prototype.on=t.prototype.addListener,t.prototype.once=function(e,t){function r(){this.removeListener(e,r),i||(i=!0,t.apply(this,arguments))}if(!n(t))throw TypeError("listener must be a function");var i=!1;return r.listener=t,this.on(e,r),this},t.prototype.removeListener=function(e,t){var r,o,s,a;if(!n(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(r=this._events[e],s=r.length,o=-1,r===t||n(r.listener)&&r.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(i(r)){for(a=s;a-->0;)if(r[a]===t||r[a].listener&&r[a].listener===t){o=a;break}if(0>o)return this;1===r.length?(r.length=0,delete this._events[e]):r.splice(o,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},t.prototype.removeAllListeners=function(e){var t,r;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(r=this._events[e],n(r))this.removeListener(e,r);else for(;r.length;)this.removeListener(e,r[r.length-1]);return delete this._events[e],this},t.prototype.listeners=function(e){var t;return t=this._events&&this._events[e]?n(this._events[e])?[this._events[e]]:this._events[e].slice():[]},t.listenerCount=function(e,t){var r;return r=e._events&&e._events[t]?n(e._events[t])?1:e._events[t].length:0}},72:/*!****************************************************!*\ 32 | !*** (webpack)/~/node-libs-browser/~/util/util.js ***! 33 | \****************************************************/ 34 | function(e,t,n){(function(e,r){function i(e,n){var r={seen:[],stylize:s};return arguments.length>=3&&(r.depth=arguments[2]),arguments.length>=4&&(r.colors=arguments[3]),f(n)?r.showHidden=n:n&&t._extend(r,n),x(r.showHidden)&&(r.showHidden=!1),x(r.depth)&&(r.depth=2),x(r.colors)&&(r.colors=!1),x(r.customInspect)&&(r.customInspect=!0),r.colors&&(r.stylize=o),c(r,e,r.depth)}function o(e,t){var n=i.styles[t];return n?"["+i.colors[n][0]+"m"+e+"["+i.colors[n][1]+"m":e}function s(e){return e}function a(e){var t={};return e.forEach(function(e){t[e]=!0}),t}function c(e,n,r){if(e.customInspect&&n&&T(n.inspect)&&n.inspect!==t.inspect&&(!n.constructor||n.constructor.prototype!==n)){var i=n.inspect(r,e);return w(i)||(i=c(e,i,r)),i}var o=l(e,n);if(o)return o;var s=Object.keys(n),f=a(s);if(e.showHidden&&(s=Object.getOwnPropertyNames(n)),R(n)&&(s.indexOf("message")>=0||s.indexOf("description")>=0))return u(n);if(0===s.length){if(T(n)){var v=n.name?": "+n.name:"";return e.stylize("[Function"+v+"]","special")}if(I(n))return e.stylize(RegExp.prototype.toString.call(n),"regexp");if(C(n))return e.stylize(Date.prototype.toString.call(n),"date");if(R(n))return u(n)}var y="",g=!1,b=["{","}"];if(p(n)&&(g=!0,b=["[","]"]),T(n)){var x=n.name?": "+n.name:"";y=" [Function"+x+"]"}if(I(n)&&(y=" "+RegExp.prototype.toString.call(n)),C(n)&&(y=" "+Date.prototype.toUTCString.call(n)),R(n)&&(y=" "+u(n)),0===s.length&&(!g||0==n.length))return b[0]+y+b[1];if(0>r)return I(n)?e.stylize(RegExp.prototype.toString.call(n),"regexp"):e.stylize("[Object]","special");e.seen.push(n);var E;return E=g?h(e,n,r,f,s):s.map(function(t){return d(e,n,r,f,t,g)}),e.seen.pop(),m(E,y,b)}function l(e,t){if(x(t))return e.stylize("undefined","undefined");if(w(t)){var n="'"+JSON.stringify(t).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return e.stylize(n,"string")}return g(t)?e.stylize(""+t,"number"):f(t)?e.stylize(""+t,"boolean"):v(t)?e.stylize("null","null"):void 0}function u(e){return"["+Error.prototype.toString.call(e)+"]"}function h(e,t,n,r,i){for(var o=[],s=0,a=t.length;a>s;++s)o.push(j(t,String(s))?d(e,t,n,r,String(s),!0):"");return i.forEach(function(i){i.match(/^\d+$/)||o.push(d(e,t,n,r,i,!0))}),o}function d(e,t,n,r,i,o){var s,a,l;if(l=Object.getOwnPropertyDescriptor(t,i)||{value:t[i]},l.get?a=l.set?e.stylize("[Getter/Setter]","special"):e.stylize("[Getter]","special"):l.set&&(a=e.stylize("[Setter]","special")),j(r,i)||(s="["+i+"]"),a||(e.seen.indexOf(l.value)<0?(a=v(n)?c(e,l.value,null):c(e,l.value,n-1),a.indexOf("\n")>-1&&(a=o?a.split("\n").map(function(e){return" "+e}).join("\n").substr(2):"\n"+a.split("\n").map(function(e){return" "+e}).join("\n"))):a=e.stylize("[Circular]","special")),x(s)){if(o&&i.match(/^\d+$/))return a;s=JSON.stringify(""+i),s.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(s=s.substr(1,s.length-2),s=e.stylize(s,"name")):(s=s.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),s=e.stylize(s,"string"))}return s+": "+a}function m(e,t,n){var r=0,i=e.reduce(function(e,t){return r++,t.indexOf("\n")>=0&&r++,e+t.replace(/\u001b\[\d\d?m/g,"").length+1},0);return i>60?n[0]+(""===t?"":t+"\n ")+" "+e.join(",\n ")+" "+n[1]:n[0]+t+" "+e.join(", ")+" "+n[1]}function p(e){return Array.isArray(e)}function f(e){return"boolean"==typeof e}function v(e){return null===e}function y(e){return null==e}function g(e){return"number"==typeof e}function w(e){return"string"==typeof e}function b(e){return"symbol"==typeof e}function x(e){return void 0===e}function I(e){return E(e)&&"[object RegExp]"===k(e)}function E(e){return"object"==typeof e&&null!==e}function C(e){return E(e)&&"[object Date]"===k(e)}function R(e){return E(e)&&("[object Error]"===k(e)||e instanceof Error)}function T(e){return"function"==typeof e}function S(e){return null===e||"boolean"==typeof e||"number"==typeof e||"string"==typeof e||"symbol"==typeof e||"undefined"==typeof e}function k(e){return Object.prototype.toString.call(e)}function _(e){return 10>e?"0"+e.toString(10):e.toString(10)}function M(){var e=new Date,t=[_(e.getHours()),_(e.getMinutes()),_(e.getSeconds())].join(":");return[e.getDate(),L[e.getMonth()],t].join(" ")}function j(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var O=/%[sdj%]/g;t.format=function(e){if(!w(e)){for(var t=[],n=0;n=o)return e;switch(e){case"%s":return String(r[n++]);case"%d":return Number(r[n++]);case"%j":try{return JSON.stringify(r[n++])}catch(t){return"[Circular]"}default:return e}}),a=r[n];o>n;a=r[++n])s+=v(a)||!E(a)?" "+a:" "+i(a);return s},t.deprecate=function(n,i){function o(){if(!s){if(r.throwDeprecation)throw new Error(i);r.traceDeprecation?console.trace(i):console.error(i),s=!0}return n.apply(this,arguments)}if(x(e.process))return function(){return t.deprecate(n,i).apply(this,arguments)};if(r.noDeprecation===!0)return n;var s=!1;return o};var P,N={};t.debuglog=function(e){if(x(P)&&(P={NODE_ENV:"production"}.NODE_DEBUG||""),e=e.toUpperCase(),!N[e])if(new RegExp("\\b"+e+"\\b","i").test(P)){var n=r.pid;N[e]=function(){var r=t.format.apply(t,arguments);console.error("%s %d: %s",e,n,r)}}else N[e]=function(){};return N[e]},t.inspect=i,i.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},i.styles={special:"cyan",number:"yellow","boolean":"yellow",undefined:"grey","null":"bold",string:"green",date:"magenta",regexp:"red"},t.isArray=p,t.isBoolean=f,t.isNull=v,t.isNullOrUndefined=y,t.isNumber=g,t.isString=w,t.isSymbol=b,t.isUndefined=x,t.isRegExp=I,t.isObject=E,t.isDate=C,t.isError=R,t.isFunction=T,t.isPrimitive=S,t.isBuffer=n(/*! ./support/isBuffer */167);var L=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];t.log=function(){console.log("%s - %s",M(),t.format.apply(t,arguments))},t.inherits=n(/*! inherits */169),t._extend=function(e,t){if(!t||!E(t))return e;for(var n=Object.keys(t),r=n.length;r--;)e[n[r]]=t[n[r]];return e}}).call(t,function(){return this}(),n(/*! (webpack)/~/node-libs-browser/~/process/browser.js */168))},127:/*!*************************************!*\ 35 | !*** ./~/css-loader/cssToString.js ***! 36 | \*************************************/ 37 | function(e){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t0)){var r=n.shift();r()}},!0),function(e){n.push(e),window.postMessage("process-tick","*")}}return function(e){setTimeout(e,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.on=t,n.addListener=t,n.once=t,n.off=t,n.removeListener=t,n.removeAllListeners=t,n.emit=t,n.binding=function(){throw new Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw new Error("process.chdir is not supported")}},169:/*!***************************************************************************!*\ 44 | !*** (webpack)/~/node-libs-browser/~/util/~/inherits/inherits_browser.js ***! 45 | \***************************************************************************/ 46 | function(e){e.exports="function"==typeof Object.create?function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}}}); 47 | //# sourceMappingURL=6.bundle.js.map -------------------------------------------------------------------------------- /build/7.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([7],{9:/*!*************************!*\ 2 | !*** ./demo7/demo7.jsx ***! 3 | \*************************/ 4 | function(e,t,n){var r=n(/*! react */1),i=r.createClass({displayName:"CodeListing",propTypes:{filename:r.PropTypes.string},getDefaultProps:function(){return{filename:"unnamed file"}},render:function(){var e={backgroundColor:"black",color:"white",padding:5,fontFamily:"monospace"};return r.createElement("div",{style:{border:"1px solid black"}},r.createElement("div",{style:e},this.props.filename),r.createElement("pre",{style:{margin:5}},this.props.children))}}),o=r.createClass({displayName:"Application",render:function(){var e=["React.render(",' // We pass `"Minerva"` as the `name` property, which is'," // used in `HelloComponent`'s `render` function.",' HelloElementFactory({name: "Minerva"}),',' document.getElementById("container")',");"].join("\n");return r.createElement("div",null,r.createElement("p",null,"Here is some code:"),r.createElement(i,{filename:"simple.jsx"},e),r.createElement("p",null,"And some more:"),r.createElement(i,null,'CodeListing with no "filename" property'))}});r.render(r.createElement(o,null),document.getElementById("container"))},18:/*!****************************************!*\ 5 | !*** ./~/raw-loader!./demo7/demo7.jsx ***! 6 | \****************************************/ 7 | function(e){e.exports='var React = require("react");\n\n// Sometimes it\'s useful have a component that can\n// wrap other arbitrary ReactElements. React provides\n// `this.props.children` for this purpose.\n//\n// For example, given the following JSX:\n//\n// Inner text\n//\n// Inside `Component`, `this.props.children` provides:\n//\n// Inner text\n//\n// In this example, we\'ll create a component that provides\n// a code listing with preformatted text and a label for\n// the filename.\n\nvar CodeListing = React.createClass({\n propTypes: {\n filename: React.PropTypes.string\n },\n\n getDefaultProps() {\n return {\n filename: "unnamed file"\n };\n },\n\n render() {\n var filenameStyle = {\n backgroundColor: "black",\n color: "white",\n padding: 5,\n fontFamily: "monospace"\n };\n\n return (\n
\n
{this.props.filename}
\n 
{this.props.children}
\n
\n );\n }\n});\n\nvar Application = React.createClass({\n render() {\n var code = [\n \'React.render(\',\n \' // We pass `"Minerva"` as the `name` property, which is\',\n \' // used in `HelloComponent`\\\'s `render` function.\',\n \' HelloElementFactory({name: "Minerva"}),\',\n \' document.getElementById("container")\',\n \');\'\n ].join("\\n");\n\n // We simply wrap whatever we want to show up in the code listing\n // in a `` element, and it\'s provided as\n // `this.props.children` in the `CodeListing` component.\n return (\n
\n

Here is some code:

\n {code}\n

And some more:

\n CodeListing with no "filename" property\n
\n );\n }\n});\n\nReact.render(\n ,\n document.getElementById("container")\n);\n'}}); 8 | //# sourceMappingURL=7.bundle.js.map -------------------------------------------------------------------------------- /build/7.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///7.bundle.js","webpack:///./demo7/demo7.jsx","webpack:///./demo7/demo7.jsx?39ff"],"names":["webpackJsonp",9,"module","exports","__webpack_require__","React","CodeListing","createClass","displayName","propTypes","filename","PropTypes","string","getDefaultProps","render","filenameStyle","backgroundColor","color","padding","fontFamily","createElement","style","border","this","props","margin","children","Application","code","join","document","getElementById",18],"mappings":"AAAAA,cAAc,IAERC;;;AAIA,SAASC,EAAQC,EAASC,GCNhC,GAAIC,GAAQD,cAAQ,GAkBhBE,EAAAD,EAAAE,aAAiCC,YAAA,cACnCC,WACEC,SAAUL,EAAMM,UAAUC,QAG5BC,gBAAe,WACb,OACEH,SAAU,iBAIdI,OAAM,WACJ,GAAIC,IACFC,gBAAiB,QACjBC,MAAO,QACPC,QAAS,EACTC,WAAY,YAGd,OACEd,GAAAe,cAAA,OAAIC,OAAMC,OAAS,oBACjBjB,EAAAe,cAAA,OAAIC,MAACN,GAAsBQ,KAACC,MAAKd,UACjCL,EAAAe,cAAA,OAAIC,OAAMI,OAAS,IAAMF,KAACC,MAAKE,cAMnCC,EAAAtB,EAAAE,aAAiCC,YAAA,cACnCM,OAAM,WACF,GAAIc,IACF,gBACA,4DACA,qDACA,4CACA,yCACA,MACAC,KAAK,KAKT,OACExB,GAAAe,cAAA,MAAI,KACFf,EAAAe,cAAA,IAAE,KAAC,sBACHf,EAAAe,cAACd,GAAWI,SAAC,cAAsBkB,GACnCvB,EAAAe,cAAA,IAAE,KAAC,kBACHf,EAAAe,cAACd,EAAW,KAAC,8CAMrBD,GAAMS,OACJT,EAAAe,cAACO,EAAW,MACZG,SAASC,eAAe,eDcpBC;;;AAIA,SAAS9B,GE3FfA,EAAAC,QAAA","file":"7.bundle.js","sourcesContent":["webpackJsonp([7],{\n\n/***/ 9:\n/*!*************************!*\\\n !*** ./demo7/demo7.jsx ***!\n \\*************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React = __webpack_require__(/*! react */ 1);\n\t\n\t// Sometimes it's useful have a component that can\n\t// wrap other arbitrary ReactElements. React provides\n\t// `this.props.children` for this purpose.\n\t//\n\t// For example, given the following JSX:\n\t//\n\t// Inner text\n\t//\n\t// Inside `Component`, `this.props.children` provides:\n\t//\n\t// Inner text\n\t//\n\t// In this example, we'll create a component that provides\n\t// a code listing with preformatted text and a label for\n\t// the filename.\n\t\n\tvar CodeListing = React.createClass({displayName: 'CodeListing',\n\t propTypes: {\n\t filename: React.PropTypes.string\n\t },\n\t\n\t getDefaultProps:function() {\n\t return {\n\t filename: \"unnamed file\"\n\t };\n\t },\n\t\n\t render:function() {\n\t var filenameStyle = {\n\t backgroundColor: \"black\",\n\t color: \"white\",\n\t padding: 5,\n\t fontFamily: \"monospace\"\n\t };\n\t\n\t return (\n\t React.createElement(\"div\", {style: {border: \"1px solid black\"}}, \n\t React.createElement(\"div\", {style: filenameStyle}, this.props.filename), \n\t React.createElement(\"pre\", {style: {margin: 5}}, this.props.children)\n\t )\n\t );\n\t }\n\t});\n\t\n\tvar Application = React.createClass({displayName: 'Application',\n\t render:function() {\n\t var code = [\n\t 'React.render(',\n\t ' // We pass `\"Minerva\"` as the `name` property, which is',\n\t ' // used in `HelloComponent`\\'s `render` function.',\n\t ' HelloElementFactory({name: \"Minerva\"}),',\n\t ' document.getElementById(\"container\")',\n\t ');'\n\t ].join(\"\\n\");\n\t\n\t // We simply wrap whatever we want to show up in the code listing\n\t // in a `` element, and it's provided as\n\t // `this.props.children` in the `CodeListing` component.\n\t return (\n\t React.createElement(\"div\", null, \n\t React.createElement(\"p\", null, \"Here is some code:\"), \n\t React.createElement(CodeListing, {filename: \"simple.jsx\"}, code), \n\t React.createElement(\"p\", null, \"And some more:\"), \n\t React.createElement(CodeListing, null, \"CodeListing with no \\\"filename\\\" property\")\n\t )\n\t );\n\t }\n\t});\n\t\n\tReact.render(\n\t React.createElement(Application, null),\n\t document.getElementById(\"container\")\n\t);\n\n\n/***/ },\n\n/***/ 18:\n/*!****************************************!*\\\n !*** ./~/raw-loader!./demo7/demo7.jsx ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = \"var React = require(\\\"react\\\");\\n\\n// Sometimes it's useful have a component that can\\n// wrap other arbitrary ReactElements. React provides\\n// `this.props.children` for this purpose.\\n//\\n// For example, given the following JSX:\\n//\\n// Inner text\\n//\\n// Inside `Component`, `this.props.children` provides:\\n//\\n// Inner text\\n//\\n// In this example, we'll create a component that provides\\n// a code listing with preformatted text and a label for\\n// the filename.\\n\\nvar CodeListing = React.createClass({\\n propTypes: {\\n filename: React.PropTypes.string\\n },\\n\\n getDefaultProps() {\\n return {\\n filename: \\\"unnamed file\\\"\\n };\\n },\\n\\n render() {\\n var filenameStyle = {\\n backgroundColor: \\\"black\\\",\\n color: \\\"white\\\",\\n padding: 5,\\n fontFamily: \\\"monospace\\\"\\n };\\n\\n return (\\n
\\n
{this.props.filename}
\\n 
{this.props.children}
\\n
\\n );\\n }\\n});\\n\\nvar Application = React.createClass({\\n render() {\\n var code = [\\n 'React.render(',\\n ' // We pass `\\\"Minerva\\\"` as the `name` property, which is',\\n ' // used in `HelloComponent`\\\\'s `render` function.',\\n ' HelloElementFactory({name: \\\"Minerva\\\"}),',\\n ' document.getElementById(\\\"container\\\")',\\n ');'\\n ].join(\\\"\\\\n\\\");\\n\\n // We simply wrap whatever we want to show up in the code listing\\n // in a `` element, and it's provided as\\n // `this.props.children` in the `CodeListing` component.\\n return (\\n
\\n

Here is some code:

\\n {code}\\n

And some more:

\\n CodeListing with no \\\"filename\\\" property\\n
\\n );\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** 7.bundle.js\n **/","var React = require(\"react\");\n\n// Sometimes it's useful have a component that can\n// wrap other arbitrary ReactElements. React provides\n// `this.props.children` for this purpose.\n//\n// For example, given the following JSX:\n//\n// Inner text\n//\n// Inside `Component`, `this.props.children` provides:\n//\n// Inner text\n//\n// In this example, we'll create a component that provides\n// a code listing with preformatted text and a label for\n// the filename.\n\nvar CodeListing = React.createClass({\n propTypes: {\n filename: React.PropTypes.string\n },\n\n getDefaultProps() {\n return {\n filename: \"unnamed file\"\n };\n },\n\n render() {\n var filenameStyle = {\n backgroundColor: \"black\",\n color: \"white\",\n padding: 5,\n fontFamily: \"monospace\"\n };\n\n return (\n
\n
{this.props.filename}
\n 
{this.props.children}
\n
\n );\n }\n});\n\nvar Application = React.createClass({\n render() {\n var code = [\n 'React.render(',\n ' // We pass `\"Minerva\"` as the `name` property, which is',\n ' // used in `HelloComponent`\\'s `render` function.',\n ' HelloElementFactory({name: \"Minerva\"}),',\n ' document.getElementById(\"container\")',\n ');'\n ].join(\"\\n\");\n\n // We simply wrap whatever we want to show up in the code listing\n // in a `` element, and it's provided as\n // `this.props.children` in the `CodeListing` component.\n return (\n
\n

Here is some code:

\n {code}\n

And some more:

\n CodeListing with no \"filename\" property\n
\n );\n }\n});\n\nReact.render(\n ,\n document.getElementById(\"container\")\n);\n\n\n\n/** WEBPACK FOOTER **\n ** ./demo7/demo7.jsx\n **/","module.exports = \"var React = require(\\\"react\\\");\\n\\n// Sometimes it's useful have a component that can\\n// wrap other arbitrary ReactElements. React provides\\n// `this.props.children` for this purpose.\\n//\\n// For example, given the following JSX:\\n//\\n// Inner text\\n//\\n// Inside `Component`, `this.props.children` provides:\\n//\\n// Inner text\\n//\\n// In this example, we'll create a component that provides\\n// a code listing with preformatted text and a label for\\n// the filename.\\n\\nvar CodeListing = React.createClass({\\n propTypes: {\\n filename: React.PropTypes.string\\n },\\n\\n getDefaultProps() {\\n return {\\n filename: \\\"unnamed file\\\"\\n };\\n },\\n\\n render() {\\n var filenameStyle = {\\n backgroundColor: \\\"black\\\",\\n color: \\\"white\\\",\\n padding: 5,\\n fontFamily: \\\"monospace\\\"\\n };\\n\\n return (\\n
\\n
{this.props.filename}
\\n 
{this.props.children}
\\n
\\n );\\n }\\n});\\n\\nvar Application = React.createClass({\\n render() {\\n var code = [\\n 'React.render(',\\n ' // We pass `\\\"Minerva\\\"` as the `name` property, which is',\\n ' // used in `HelloComponent`\\\\'s `render` function.',\\n ' HelloElementFactory({name: \\\"Minerva\\\"}),',\\n ' document.getElementById(\\\"container\\\")',\\n ');'\\n ].join(\\\"\\\\n\\\");\\n\\n // We simply wrap whatever we want to show up in the code listing\\n // in a `` element, and it's provided as\\n // `this.props.children` in the `CodeListing` component.\\n return (\\n
\\n

Here is some code:

\\n {code}\\n

And some more:

\\n CodeListing with no \\\"filename\\\" property\\n
\\n );\\n }\\n});\\n\\nReact.render(\\n ,\\n document.getElementById(\\\"container\\\")\\n);\\n\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/raw-loader!./demo7/demo7.jsx\n ** module id = 18\n ** module chunks = 7\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{0:/*!*******************!*\ 2 | !*** ./index.jsx ***! 3 | \*******************/ 4 | function(e,t,n){function r(e,t){a.render(a.createElement("h1",null,"Demo "+e+": "+i[e-1]),document.getElementById("demo-title")),a.render(a.createElement(l,{demo:e}),document.getElementById("source-link")),t&&t.length&&a.render(a.createElement(d,{files:t}),document.getElementById("source-files"))}function o(){var e=a.createClass({displayName:"App",render:function(){return a.createElement("ul",null,i.map(function(e,t){var n=t+1;return a.createElement("li",{key:n},a.createElement("a",{href:"index.html?"+n},"Demo ",n,": ",e))}))}});a.render(a.createElement(e,null),document.getElementById("container")),a.render(a.createElement(l,null),document.getElementById("source-link"))}var a=n(/*! react */1),s=n(/*! react-prism */28).PrismCode;a.initializeTouchEvents(!0);var i=["Components & Properties","JSX","State","Composition, PropTypes, & Event Handlers","Mixins","Top-Down Data Flow & shouldComponentUpdate","Wrapping Children with this.props.children"],c=a.createClass({displayName:"DemoSourceLink",render:function(){var e="https://github.com/BinaryMuse/react-primer",t=e+"/tree/gh-pages/demo"+this.props.demo+"/demo"+this.props.demo+".jsx";return a.createElement("a",a.__spread({},this.props,{href:t}),this.props.children)}}),l=a.createClass({displayName:"LinkComponent",render:function(){if(this.props.demo){{var e="https://github.com/BinaryMuse/react-primer";e+"/tree/gh-pages/demo"+this.props.demo+"/demo"+this.props.demo+".jsx"}return a.createElement("p",null,a.createElement("a",{href:"index.html"},"Back to demo list"),"  ·  ",a.createElement(c,{demo:this.props.demo},"View on GitHub"))}return a.createElement("p",null,"Source code for each demo is available from the root of the ",a.createElement("a",{href:"https://github.com/BinaryMuse/react-primer"},"project repository")," and at the bottom of each demo page.")}}),d=a.createClass({displayName:"SourceCode",propTypes:{files:a.PropTypes.arrayOf(a.PropTypes.shape({name:a.PropTypes.string.isRequired,code:a.PropTypes.string.isRequired}).isRequired)},getInitialState:function(){return{selectedIndex:0}},render:function(){var e={listStyle:"none",paddingLeft:0,marginTop:0};return a.createElement("div",null,a.createElement("h2",null,"Demo Source"),a.createElement("ol",{style:e},this.props.files.map(this.renderSelector)),a.createElement("div",null,this.props.files.map(this.renderFile)))},renderSelector:function(e,t){var n={"float":"left",padding:10,cursor:"pointer",color:this.state.selectedIndex===t?"black":"#999"};return a.createElement("li",{key:e.name,style:n,onClick:this.handleSelectorClick.bind(null,t)},e.name)},renderFile:function(e,t){var n={display:this.state.selectedIndex===t?"block":"none",clear:"both"};return a.createElement("pre",{key:e.name,className:"line-numbers",style:n},a.createElement(s,{className:"language-javascript"},e.code))},handleSelectorClick:function(e){this.setState({selectedIndex:e})}}),m=~~window.location.search.replace(/\?/,"");switch(m){case 1:n.e(1,function(){n(/*! ./demo1/demo1.jsx */3),r(m,[{name:"demo1.jsx",code:n(/*! !raw!./demo1/demo1.jsx */10)}])});break;case 2:n.e(2,function(){n(/*! ./demo2/demo2.jsx */4),r(m,[{name:"demo2.jsx",code:n(/*! !raw!./demo2/demo2.jsx */11)}])});break;case 3:n.e(3,function(){n(/*! ./demo3/demo3.jsx */5),r(m,[{name:"demo3.jsx",code:n(/*! !raw!./demo3/demo3.jsx */12)}])});break;case 4:n.e(4,function(){n(/*! ./demo4/demo4.jsx */6),r(m,[{name:"demo4.jsx",code:n(/*! !raw!./demo4/demo4.jsx */13)}])});break;case 5:n.e(5,function(){n(/*! ./demo5/demo5.jsx */7),r(m,[{name:"demo5.jsx",code:n(/*! !raw!./demo5/demo5.jsx */14)}])});break;case 6:n.e(6,function(){n(/*! ./demo6/demo6.jsx */8);var e=[{name:"demo6.jsx",code:n(/*! !raw!./demo6/demo6.jsx */15)},{name:"store.jsx",code:n(/*! !raw!./demo6/store.jsx */16)},{name:"item.jsx",code:n(/*! !raw!./demo6/item.jsx */17)}];r(m,e)});break;case 7:n.e(7,function(){n(/*! ./demo7/demo7.jsx */9),r(m,[{name:"demo7.jsx",code:n(/*! !raw!./demo7/demo7.jsx */18)}])});break;default:o()}},28:/*!************************************!*\ 5 | !*** ./~/react-prism/lib/index.js ***! 6 | \************************************/ 7 | function(e,t,n){"use strict";t.PrismCode=n(/*! ./PrismCode */67)},67:/*!****************************************!*\ 8 | !*** ./~/react-prism/lib/PrismCode.js ***! 9 | \****************************************/ 10 | function(e,t,n){"use strict";{var r=n(/*! react/addons */1),o=r.addons;o.update}e.exports=r.createClass({displayName:"PrismCode",mixins:[r.addons.PureRenderMixin],propTypes:{async:r.PropTypes.bool},getDefaultProps:function(){return{async:!0}},componentDidMount:function(){this._hightlight()},componentDidUpdate:function(){this._hightlight()},_hightlight:function(){Prism.highlightElement(this.refs.code.getDOMNode(),this.props.async)},render:function(){return this._render(this.props,this.state)},_render:function(e){return r.createElement("code",{ref:"code",className:e.className},e.children)}})}}); 11 | //# sourceMappingURL=bundle.js.map -------------------------------------------------------------------------------- /build/bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///bundle.js","webpack:///./index.jsx","webpack:///./~/react-prism/lib/index.js","webpack:///./~/react-prism/lib/PrismCode.js"],"names":["webpackJsonp","module","exports","__webpack_require__","showDemoLink","num","files","React","render","createElement","DEMOS","document","getElementById","LinkComponent","demo","length","SourceCode","loadIndex","App","createClass","displayName","map","name","idx","key","href","ReactPrism","PrismCode","initializeTouchEvents","DemoSourceLink","hrefRoot","this","props","__spread","children","propTypes","PropTypes","arrayOf","shape","string","isRequired","code","getInitialState","selectedIndex","olStyle","listStyle","paddingLeft","marginTop","style","renderSelector","renderFile","file","liStyle","float","padding","cursor","color","state","onClick","handleSelectorClick","bind","display","clear","className","setState","window","location","search","replace","e",28,67,"$__0","addons","update","mixins","PureRenderMixin","async","bool","getDefaultProps","componentDidMount","_hightlight","componentDidUpdate","Prism","highlightElement","refs","getDOMNode","_render","ref"],"mappings":"AAAAA,cAAc,IAER;;;AAIA,SAASC,EAAQC,EAASC,GCqKhC,QAASC,GAAaC,EAAKC,GACzBC,EAAMC,OAAOD,EAAME,cAAc,KAAM,KAAM,QAAAJ,EAAA,KAAWK,EAAAL,EAAA,IAC3CM,SAASC,eAAe,eACrCL,EAAMC,OAAOD,EAAAE,cAACI,GAAaC,KAACT,IACfM,SAASC,eAAe,gBAEjCN,GAASA,EAAMS,QACjBR,EAAMC,OAAOD,EAAAE,cAACO,GAAUV,MAACA,IACZK,SAASC,eAAe,iBAIzC,QAASK,KACP,GAAIC,GAAAX,EAAAY,aAAyBC,YAAA,MAC3BZ,OAAQ,WACN,MACED,GAAAE,cAAA,KAAG,KACFC,EAAMW,IAAI,SAACC,EAAMC,GAChB,GAAIlB,GAAMkB,EAAM,CAChB,OACEhB,GAAAE,cAAA,MAAGe,IAACnB,GACFE,EAAAE,cAAA,KAAEgB,KAAC,cAAmBpB,GAAQ,QAAAA,EAAS,KAACiB,SASpDf,GAAMC,OAAOD,EAAAE,cAACS,EAAG,MAAGP,SAAUC,eAAe,cAC7CL,EAAMC,OAAOD,EAAAE,cAACI,EAAa,MAAGF,SAAUC,eAAe,gBA1MzD,GAAIL,GAAQJ,cAAQ,GAChBuB,EAAavB,oBAAQ,IAAewB,SAExCpB,GAAMqB,uBAAsB,EAE5B,IAAIlB,IACF,0BACA,MACA,QACA,2CACA,SACA,6CACA,8CAGEmB,EAAAtB,EAAAY,aAAoCC,YAAA,iBACtCZ,OAAM,WACJ,GAAIsB,GAAW,6CACXL,EAAOK,EAAW,sBACXC,KAAKC,MAAMlB,KAAO,QAAUiB,KAAKC,MAAMlB,KAAO,MAEzD,OAAOP,GAAAE,cAAA,IAAEF,EAAA0B,YAAEF,KAAGC,OAAUP,KAAEA,IAAMM,KAAOC,MAAKE,aAI5CrB,EAAAN,EAAAY,aAAmCC,YAAA,gBACrCZ,OAAM,WACJ,GAAIuB,KAAKC,MAAMlB,KAAM,CACnB,IAAIgB,GAAW,4CACJA,GAAW,sBACXC,KAAKC,MAAMlB,KAAO,QAAUiB,KAAKC,MAAMlB,KAAO,OACzD,MACEP,GAAAE,cAAA,IAAE,KACFF,EAAAE,cAAA,KAAEgB,KAAC,cAAkB,qBAAqB,QAE1ClB,EAAAE,cAACoB,GAAcf,KAACiB,KAAMC,MAAKlB,MAAY,mBAIzC,MACEP,GAAAE,cAAA,IAAE,KAAC,+DACCF,EAAAE,cAAA,KAAEgB,KAAC,8CAAkD,sBAAsB,4CAOnFT,EAAAT,EAAAY,aAAgCC,YAAA,aAClCe,WACE7B,MAAOC,EAAM6B,UAAUC,QACrB9B,EAAM6B,UAAUE,OACdhB,KAAMf,EAAM6B,UAAUG,OAAOC,WAC7BC,KAAMlC,EAAM6B,UAAUG,OAAOC,aAC5BA,aAIPE,gBAAe,WACb,OACEC,cAAe,IAInBnC,OAAM,WACJ,GAAIoC,IACFC,UAAW,OACXC,YAAa,EACbC,UAAW,EAGb,OACExC,GAAAE,cAAA,MAAI,KACFF,EAAAE,cAAA,KAAG,KAAC,eACJF,EAAAE,cAAA,MAAGuC,MAACJ,GAAgBb,KAACC,MAAK1B,MAAMe,IAAMU,KAAIkB,iBAC1C1C,EAAAE,cAAA,MAAI,KAAEsB,KAAKC,MAAM1B,MAAMe,IAAIU,KAAKmB,eAKtCD,eAAc,SAACE,EAAM5B,GACnB,GAAI6B,IACFC,QAAO,OACPC,QAAS,GACTC,OAAQ,UACRC,MAAOzB,KAAK0B,MAAMd,gBAAkBpB,EAAM,QAAU,OAGtD,OACEhB,GAAAE,cAAA,MAAGe,IAAC2B,EAAK7B,KAAS0B,MAAEI,EAAOM,QAAS3B,KAAO4B,oBAAOC,KAAmB,KAAMrC,IACxE4B,EAAK7B,OAKZ4B,WAAU,SAACC,EAAM5B,GACf,GAAIyB,IACFa,QAAS9B,KAAK0B,MAAMd,gBAAkBpB,EAAM,QAAU,OACtDuC,MAAO,OAGT,OACEvD,GAAAE,cAAA,OAAIe,IAAC2B,EAAK7B,KAASyC,UAAE,eAAUf,MAAeA,GAC5CzC,EAAAE,cAACiB,GAAUqC,UAAC,uBAAgCZ,EAACV,QAKnDkB,oBAAmB,SAACpC,GAClBQ,KAAKiC,UACHrB,cAAepB,OAKjBT,IAASmD,OAAOC,SAASC,OAAOC,QAAQ,KAAM,GAIlD,QAAQtD,GACN,IAAK,GACHX,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,GACRC,EAAaU,IAASQ,KAAM,YAAamB,KAAMtC,+BAAQ,QAEzD,MACF,KAAK,GACHA,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,GACRC,EAAaU,IAAQQ,KAAM,YAAamB,KAAMtC,+BAAQ,QAExD,MACF,KAAK,GACHA,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,GACRC,EAAaU,IAAQQ,KAAM,YAAamB,KAAMtC,+BAAQ,QAExD,MACF,KAAK,GACHA,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,GACRC,EAAaU,IAAQQ,KAAM,YAAamB,KAAMtC,+BAAQ,QAExD,MACF,KAAK,GACHA,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,GACRC,EAAaU,IAAQQ,KAAM,YAAamB,KAAMtC,+BAAQ,QAExD,MACF,KAAK,GACHA,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,EACR,IAAIsC,KACAnB,KAAM,YAAamB,KAAMtC,+BAAQ,MACjCmB,KAAM,YAAamB,KAAMtC,+BAAQ,MACjCmB,KAAM,WAAYmB,KAAMtC,8BAAQ,KAEpCC,GAAaU,EAAM2B,IAErB,MACF,KAAK,GACHtC,EAAAkE,EAAe,EAAI,WACjBlE,0BAAQ,GACRC,EAAaU,IAAQQ,KAAM,YAAamB,KAAMtC,+BAAQ,QAExD,MACF,SACEc,MDgDEqD;;;AAIA,SAASrE,EAAQC,EAASC,GE5NhC,YACAD,GAAAyB,UAAAxB,oBAAA,KFmOMoE;;;AAIA,SAAStE,EAAQC,EAASC,GGxOhC,YACA,KAAAI,GAAAJ,qBAAA,GACAqE,EAAAjE,EAAAkE,MAAAD,GAAAE,OAEAzE,EAAAC,QAAAK,EAAAY,aACAC,YAAA,YAEAuD,QAAApE,EAAAkE,OAAAG,iBAEAzC,WACA0C,MAAAtE,EAAA6B,UAAA0C,MAGAC,gBAAA,WACA,OACAF,OAAA,IAIAG,kBAAA,WACAjD,KAAAkD,eAGAC,mBAAA,WACAnD,KAAAkD,eAGAA,YAAA,WACAE,MAAAC,iBAAArD,KAAAsD,KAAA5C,KAAA6C,aAAAvD,KAAAC,MAAA6C,QAGArE,OAAA,WACA,MAAAuB,MAAAwD,QAAAxD,KAAAC,MAAAD,KAAA0B,QAGA8B,QAAA,SAAAvD,GACA,MAAAzB,GAAAE,cAAA,QAAwC+E,IAAA,OAAAzB,UAAA/B,EAAA+B,WAAwC/B,EAAAE","file":"bundle.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 0:\n/*!*******************!*\\\n !*** ./index.jsx ***!\n \\*******************/\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React = __webpack_require__(/*! react */ 1),\n\t ReactPrism = __webpack_require__(/*! react-prism */ 28).PrismCode;\n\t\n\tReact.initializeTouchEvents(true);\n\t\n\tvar DEMOS = [\n\t \"Components & Properties\",\n\t \"JSX\",\n\t \"State\",\n\t \"Composition, PropTypes, & Event Handlers\",\n\t \"Mixins\",\n\t \"Top-Down Data Flow & shouldComponentUpdate\",\n\t \"Wrapping Children with this.props.children\"\n\t];\n\t\n\tvar DemoSourceLink = React.createClass({displayName: 'DemoSourceLink',\n\t render:function() {\n\t var hrefRoot = \"https://github.com/BinaryMuse/react-primer\",\n\t href = hrefRoot + \"/tree/gh-pages/demo\" +\n\t this.props.demo + \"/demo\" + this.props.demo + \".jsx\";\n\t\n\t return React.createElement(\"a\", React.__spread({}, this.props, {href: href}), this.props.children);\n\t }\n\t});\n\t\n\tvar LinkComponent = React.createClass({displayName: 'LinkComponent',\n\t render:function() {\n\t if (this.props.demo) {\n\t var hrefRoot = \"https://github.com/BinaryMuse/react-primer\",\n\t href = hrefRoot + \"/tree/gh-pages/demo\" +\n\t this.props.demo + \"/demo\" + this.props.demo + \".jsx\";\n\t return (\n\t React.createElement(\"p\", null, \n\t React.createElement(\"a\", {href: \"index.html\"}, \"Back to demo list\"), \n\t \"  ·  \", \n\t React.createElement(DemoSourceLink, {demo: this.props.demo}, \"View on GitHub\")\n\t )\n\t );\n\t } else {\n\t return (\n\t React.createElement(\"p\", null, \"Source code for each demo is available from the root of\" + ' ' +\n\t \"the \", React.createElement(\"a\", {href: \"https://github.com/BinaryMuse/react-primer\"}, \"project repository\"), \" and\" + ' ' +\n\t \"at the bottom of each demo page.\")\n\t );\n\t }\n\t }\n\t});\n\t\n\tvar SourceCode = React.createClass({displayName: 'SourceCode',\n\t propTypes: {\n\t files: React.PropTypes.arrayOf(\n\t React.PropTypes.shape({\n\t name: React.PropTypes.string.isRequired,\n\t code: React.PropTypes.string.isRequired\n\t }).isRequired\n\t )\n\t },\n\t\n\t getInitialState:function() {\n\t return {\n\t selectedIndex: 0\n\t };\n\t },\n\t\n\t render:function() {\n\t var olStyle = {\n\t listStyle: \"none\",\n\t paddingLeft: 0,\n\t marginTop: 0\n\t };\n\t\n\t return (\n\t React.createElement(\"div\", null, \n\t React.createElement(\"h2\", null, \"Demo Source\"), \n\t React.createElement(\"ol\", {style: olStyle}, this.props.files.map(this.renderSelector)), \n\t React.createElement(\"div\", null, this.props.files.map(this.renderFile))\n\t )\n\t );\n\t },\n\t\n\t renderSelector:function(file, idx) {\n\t var liStyle = {\n\t float: \"left\",\n\t padding: 10,\n\t cursor: \"pointer\",\n\t color: this.state.selectedIndex === idx ? \"black\" : \"#999\"\n\t };\n\t\n\t return (\n\t React.createElement(\"li\", {key: file.name, style: liStyle, onClick: this.handleSelectorClick.bind(null, idx)}, \n\t file.name\n\t )\n\t );\n\t },\n\t\n\t renderFile:function(file, idx) {\n\t var style = {\n\t display: this.state.selectedIndex === idx ? \"block\" : \"none\",\n\t clear: \"both\"\n\t };\n\t\n\t return (\n\t React.createElement(\"pre\", {key: file.name, className: \"line-numbers\", style: style}, \n\t React.createElement(ReactPrism, {className: \"language-javascript\"}, file.code)\n\t )\n\t )\n\t },\n\t\n\t handleSelectorClick:function(idx) {\n\t this.setState({\n\t selectedIndex: idx\n\t });\n\t }\n\t});\n\t\n\tvar demo = ~~window.location.search.replace(/\\?/, \"\");\n\t\n\t// webpack must be able to statically analyze these,\n\t// so we can't generate them programmatically\n\tswitch (demo) {\n\t case 1:\n\t __webpack_require__.e/*nsure*/(1, function() {\n\t __webpack_require__(/*! ./demo1/demo1.jsx */ 3);\n\t showDemoLink(demo, [{ name: \"demo1.jsx\", code: __webpack_require__(/*! !raw!./demo1/demo1.jsx */ 10)}]);\n\t });\n\t break;\n\t case 2:\n\t __webpack_require__.e/*nsure*/(2, function() {\n\t __webpack_require__(/*! ./demo2/demo2.jsx */ 4);\n\t showDemoLink(demo, [{name: 'demo2.jsx', code: __webpack_require__(/*! !raw!./demo2/demo2.jsx */ 11)}]);\n\t });\n\t break;\n\t case 3:\n\t __webpack_require__.e/*nsure*/(3, function() {\n\t __webpack_require__(/*! ./demo3/demo3.jsx */ 5);\n\t showDemoLink(demo, [{name: 'demo3.jsx', code: __webpack_require__(/*! !raw!./demo3/demo3.jsx */ 12)}]);\n\t });\n\t break;\n\t case 4:\n\t __webpack_require__.e/*nsure*/(4, function() {\n\t __webpack_require__(/*! ./demo4/demo4.jsx */ 6);\n\t showDemoLink(demo, [{name: 'demo4.jsx', code: __webpack_require__(/*! !raw!./demo4/demo4.jsx */ 13)}]);\n\t });\n\t break;\n\t case 5:\n\t __webpack_require__.e/*nsure*/(5, function() {\n\t __webpack_require__(/*! ./demo5/demo5.jsx */ 7);\n\t showDemoLink(demo, [{name: 'demo5.jsx', code: __webpack_require__(/*! !raw!./demo5/demo5.jsx */ 14)}]);\n\t });\n\t break;\n\t case 6:\n\t __webpack_require__.e/*nsure*/(6, function() {\n\t __webpack_require__(/*! ./demo6/demo6.jsx */ 8);\n\t var code = [\n\t { name: \"demo6.jsx\", code: __webpack_require__(/*! !raw!./demo6/demo6.jsx */ 15) },\n\t { name: \"store.jsx\", code: __webpack_require__(/*! !raw!./demo6/store.jsx */ 16) },\n\t { name: \"item.jsx\", code: __webpack_require__(/*! !raw!./demo6/item.jsx */ 17) }\n\t ];\n\t showDemoLink(demo, code);\n\t });\n\t break;\n\t case 7:\n\t __webpack_require__.e/*nsure*/(7, function() {\n\t __webpack_require__(/*! ./demo7/demo7.jsx */ 9);\n\t showDemoLink(demo, [{name: 'demo7.jsx', code: __webpack_require__(/*! !raw!./demo7/demo7.jsx */ 18)}]);\n\t });\n\t break;\n\t default:\n\t loadIndex();\n\t}\n\t\n\tfunction showDemoLink(num, files) {\n\t React.render(React.createElement(\"h1\", null, (\"Demo \" + num + \": \" + DEMOS[num - 1])),\n\t document.getElementById(\"demo-title\"));\n\t React.render(React.createElement(LinkComponent, {demo: num}),\n\t document.getElementById(\"source-link\"));\n\t\n\t if (files && files.length) {\n\t React.render(React.createElement(SourceCode, {files: files}),\n\t document.getElementById(\"source-files\"));\n\t }\n\t}\n\t\n\tfunction loadIndex() {\n\t var App = React.createClass({displayName: 'App',\n\t render: function() {\n\t return (\n\t React.createElement(\"ul\", null, \n\t DEMOS.map(function(name, idx) {\n\t var num = idx + 1;\n\t return (\n\t React.createElement(\"li\", {key: num}, \n\t React.createElement(\"a\", {href: \"index.html?\" + num}, \"Demo \", num, \": \", name)\n\t )\n\t );\n\t })\n\t )\n\t )\n\t }\n\t });\n\t\n\t React.render(React.createElement(App, null), document.getElementById(\"container\"));\n\t React.render(React.createElement(LinkComponent, null), document.getElementById(\"source-link\"));\n\t}\n\n\n/***/ },\n\n/***/ 28:\n/*!************************************!*\\\n !*** ./~/react-prism/lib/index.js ***!\n \\************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\texports.PrismCode = __webpack_require__(/*! ./PrismCode */ 67);\n\n\n/***/ },\n\n/***/ 67:\n/*!****************************************!*\\\n !*** ./~/react-prism/lib/PrismCode.js ***!\n \\****************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar React = __webpack_require__(/*! react/addons */ 1),\n\t $__0= React.addons,update=$__0.update;\n\t\n\tmodule.exports = React.createClass({\n\t displayName: \"PrismCode\",\n\t\n\t mixins: [React.addons.PureRenderMixin],\n\t\n\t propTypes: {\n\t async: React.PropTypes.bool\n\t },\n\t\n\t getDefaultProps:function () {\n\t return {\n\t async: true\n\t };\n\t },\n\t\n\t componentDidMount:function () {\n\t this._hightlight();\n\t },\n\t\n\t componentDidUpdate:function () {\n\t this._hightlight();\n\t },\n\t\n\t _hightlight:function () {\n\t Prism.highlightElement(this.refs.code.getDOMNode(), this.props.async);\n\t },\n\t\n\t render:function () {\n\t return this._render(this.props, this.state);\n\t },\n\t\n\t _render:function (props, state) {\n\t return React.createElement(\"code\", {ref: \"code\", className: props.className}, props.children);\n\t }\n\t});\n\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** bundle.js\n **/","var React = require(\"react\"),\n ReactPrism = require(\"react-prism\").PrismCode;\n\nReact.initializeTouchEvents(true);\n\nvar DEMOS = [\n \"Components & Properties\",\n \"JSX\",\n \"State\",\n \"Composition, PropTypes, & Event Handlers\",\n \"Mixins\",\n \"Top-Down Data Flow & shouldComponentUpdate\",\n \"Wrapping Children with this.props.children\"\n];\n\nvar DemoSourceLink = React.createClass({\n render() {\n var hrefRoot = \"https://github.com/BinaryMuse/react-primer\",\n href = hrefRoot + \"/tree/gh-pages/demo\" +\n this.props.demo + \"/demo\" + this.props.demo + \".jsx\";\n\n return {this.props.children};\n }\n});\n\nvar LinkComponent = React.createClass({\n render() {\n if (this.props.demo) {\n var hrefRoot = \"https://github.com/BinaryMuse/react-primer\",\n href = hrefRoot + \"/tree/gh-pages/demo\" +\n this.props.demo + \"/demo\" + this.props.demo + \".jsx\";\n return (\n

\n Back to demo list\n   ·  \n View on GitHub\n

\n );\n } else {\n return (\n

Source code for each demo is available from the root of\n the project repository and\n at the bottom of each demo page.

\n );\n }\n }\n});\n\nvar SourceCode = React.createClass({\n propTypes: {\n files: React.PropTypes.arrayOf(\n React.PropTypes.shape({\n name: React.PropTypes.string.isRequired,\n code: React.PropTypes.string.isRequired\n }).isRequired\n )\n },\n\n getInitialState() {\n return {\n selectedIndex: 0\n };\n },\n\n render() {\n var olStyle = {\n listStyle: \"none\",\n paddingLeft: 0,\n marginTop: 0\n };\n\n return (\n
\n

Demo Source

\n
    {this.props.files.map(this.renderSelector)}
\n
{this.props.files.map(this.renderFile)}
\n
\n );\n },\n\n renderSelector(file, idx) {\n var liStyle = {\n float: \"left\",\n padding: 10,\n cursor: \"pointer\",\n color: this.state.selectedIndex === idx ? \"black\" : \"#999\"\n };\n\n return (\n
  • \n {file.name}\n
    • \n );\n },\n\n renderFile(file, idx) {\n var style = {\n display: this.state.selectedIndex === idx ? \"block\" : \"none\",\n clear: \"both\"\n };\n\n return (\n 
    \n        {file.code}\n
    \n )\n },\n\n handleSelectorClick(idx) {\n this.setState({\n selectedIndex: idx\n });\n }\n});\n\nvar demo = ~~window.location.search.replace(/\\?/, \"\");\n\n// webpack must be able to statically analyze these,\n// so we can't generate them programmatically\nswitch (demo) {\n case 1:\n require.ensure([], () => {\n require(\"./demo1/demo1.jsx\");\n showDemoLink(demo, [{ name: \"demo1.jsx\", code: require(\"!!raw!./demo1/demo1.jsx\")}]);\n });\n break;\n case 2:\n require.ensure([], () => {\n require(\"./demo2/demo2.jsx\");\n showDemoLink(demo, [{name: 'demo2.jsx', code: require(\"!!raw!./demo2/demo2.jsx\")}]);\n });\n break;\n case 3:\n require.ensure([], () => {\n require(\"./demo3/demo3.jsx\");\n showDemoLink(demo, [{name: 'demo3.jsx', code: require(\"!!raw!./demo3/demo3.jsx\")}]);\n });\n break;\n case 4:\n require.ensure([], () => {\n require(\"./demo4/demo4.jsx\");\n showDemoLink(demo, [{name: 'demo4.jsx', code: require(\"!!raw!./demo4/demo4.jsx\")}]);\n });\n break;\n case 5:\n require.ensure([], () => {\n require(\"./demo5/demo5.jsx\");\n showDemoLink(demo, [{name: 'demo5.jsx', code: require(\"!!raw!./demo5/demo5.jsx\")}]);\n });\n break;\n case 6:\n require.ensure([], () => {\n require(\"./demo6/demo6.jsx\");\n var code = [\n { name: \"demo6.jsx\", code: require(\"!!raw!./demo6/demo6.jsx\") },\n { name: \"store.jsx\", code: require(\"!!raw!./demo6/store.jsx\") },\n { name: \"item.jsx\", code: require(\"!!raw!./demo6/item.jsx\") }\n ];\n showDemoLink(demo, code);\n });\n break;\n case 7:\n require.ensure([], () => {\n require(\"./demo7/demo7.jsx\");\n showDemoLink(demo, [{name: 'demo7.jsx', code: require(\"!!raw!./demo7/demo7.jsx\")}]);\n });\n break;\n default:\n loadIndex();\n}\n\nfunction showDemoLink(num, files) {\n React.render(React.createElement(\"h1\", null, `Demo ${num}: ${DEMOS[num - 1]}`),\n document.getElementById(\"demo-title\"));\n React.render(,\n document.getElementById(\"source-link\"));\n\n if (files && files.length) {\n React.render(,\n document.getElementById(\"source-files\"));\n }\n}\n\nfunction loadIndex() {\n var App = React.createClass({\n render: function() {\n return (\n
      \n {DEMOS.map((name, idx) => {\n var num = idx + 1;\n return (\n
    • \n Demo {num}: {name}\n
      • \n );\n })}\n
    \n )\n }\n });\n\n React.render(, document.getElementById(\"container\"));\n React.render(, document.getElementById(\"source-link\"));\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./index.jsx\n **/","\"use strict\";\nexports.PrismCode = require(\"./PrismCode\");\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/react-prism/lib/index.js\n ** module id = 28\n ** module chunks = 0\n **/","\"use strict\";\nvar React = require(\"react/addons\"),\n $__0= React.addons,update=$__0.update;\n\nmodule.exports = React.createClass({\n displayName: \"PrismCode\",\n\n mixins: [React.addons.PureRenderMixin],\n\n propTypes: {\n async: React.PropTypes.bool\n },\n\n getDefaultProps:function () {\n return {\n async: true\n };\n },\n\n componentDidMount:function () {\n this._hightlight();\n },\n\n componentDidUpdate:function () {\n this._hightlight();\n },\n\n _hightlight:function () {\n Prism.highlightElement(this.refs.code.getDOMNode(), this.props.async);\n },\n\n render:function () {\n return this._render(this.props, this.state);\n },\n\n _render:function (props, state) {\n return React.createElement(\"code\", {ref: \"code\", className: props.className}, props.children);\n }\n});\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/react-prism/lib/PrismCode.js\n ** module id = 67\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | React Primer 4 | 5 | 6 | 7 | 27 | 28 |
    29 |
    30 | 31 |
    32 | 33 | 34 |

    35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /build/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=clike+javascript&plugins=line-numbers */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important { 127 | font-weight: bold; 128 | } 129 | 130 | .token.entity { 131 | cursor: help; 132 | } 133 | 134 | pre.line-numbers { 135 | position: relative; 136 | padding-left: 3.8em; 137 | counter-reset: linenumber; 138 | } 139 | 140 | pre.line-numbers > code { 141 | position: relative; 142 | } 143 | 144 | .line-numbers .line-numbers-rows { 145 | position: absolute; 146 | pointer-events: none; 147 | top: 0; 148 | font-size: 100%; 149 | left: -3.8em; 150 | width: 3em; /* works for line-numbers below 1000 lines */ 151 | letter-spacing: -1px; 152 | border-right: 1px solid #999; 153 | 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | 159 | } 160 | 161 | .line-numbers-rows > span { 162 | pointer-events: none; 163 | display: block; 164 | counter-increment: linenumber; 165 | } 166 | 167 | .line-numbers-rows > span:before { 168 | content: counter(linenumber); 169 | color: #999; 170 | display: block; 171 | padding-right: 0.8em; 172 | text-align: right; 173 | } 174 | -------------------------------------------------------------------------------- /build/prism.min.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=clike+javascript&plugins=line-numbers */ 2 | self=typeof window!="undefined"?window:typeof WorkerGlobalScope!="undefined"&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(m instanceof i)continue;l.lastIndex=0;var g=l.exec(m);if(g){h&&(p=g[1].length);var y=g.index-1+p,g=g[0].slice(p),b=g.length,w=y+b,E=m.slice(0,y+1),S=m.slice(w+1),x=[v,1];E&&x.push(E);var T=new i(u,c?t.tokenize(g,c):g,d);x.push(T);S&&x.push(S);Array.prototype.splice.apply(s,x)}}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t,n){this.type=e;this.content=t;this.alias=n};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");if(e.alias){var o=t.util.type(e.alias)==="Array"?e.alias:[e.alias];Array.prototype.push.apply(s.classes,o)}t.hooks.run("wrap",s);var u="";for(var a in s.attributes)u+=a+'="'+(s.attributes[a]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+u+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(i,t.languages[r]))));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 4 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});; 5 | Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join(""),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});; 6 | -------------------------------------------------------------------------------- /demo1/demo1.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | // Create a ReactComponent class with `React.createClass`. Pass the 4 | // class to `React.createFactory` to create a function that, when 5 | // called, creates a `ReactElement` object with that type. 6 | // React uses ReactElements to create a virtual DOM that determines 7 | // how the real DOM should look and behave. 8 | var HelloComponent = React.createClass({ 9 | // Every component needs a `render` function that returns a 10 | // ReactNode. A ReactNode is either: 11 | // 12 | // * a ReactElement 13 | // * a string (aka ReactText) 14 | // * a number (aka ReactText) 15 | // * an array of ReactNodes (aka ReactFragment) 16 | // 17 | // ReactElement factories that produce ReactElements that represent 18 | // native HTML elements can be found on `React.DOM`. 19 | render: function() { 20 | // ReactElement factories take a hash of properties as their 21 | // first argument and their children as remaining arguments. 22 | // Here, we utilize `this.props`, which is an object 23 | // containing the properties passed to this component. 24 | // 25 | // Properties should be treated as immutable--you should 26 | // not try to change them from inside a component; they 27 | // belong to whoever passed them to you! 28 | return React.DOM.div(null, "Hello ", this.props.name, 29 | React.DOM.strong(null, "!") 30 | ); 31 | } 32 | }); 33 | 34 | var HelloElementFactory = React.createFactory(HelloComponent); 35 | // ReactElement factories are just a convenience for creating new 36 | // ReactElements. 37 | // 38 | // var element = HelloElementFactory(properties, children...) 39 | // 40 | // is the same as 41 | // 42 | // var element = React.createElement(HelloComponent, properties, children...) 43 | 44 | // We can render a component into a DOM node with `React.render`, 45 | // which takes a ReactElement and a DOM node to render into. 46 | React.render( 47 | // We pass `"Minerva"` as the `name` property, which is 48 | // used in `HelloComponent`'s `render` function. 49 | HelloElementFactory({name: "Minerva"}), 50 | document.getElementById("container") 51 | ); 52 | -------------------------------------------------------------------------------- /demo2/demo2.jsx: -------------------------------------------------------------------------------- 1 | // JSX is an XML-like syntax that simplifies composing React components. 2 | 3 | var React = require("react"); 4 | 5 | // When using JSX, you don't have to worry about creating 6 | // ReactElements or factories to generate them. JSX handles 7 | // all these details for you. This demo is functionally 8 | // identical to Demo 1. 9 | var HelloComponent = React.createClass({ 10 | // The JSX transpiler also supports (optional) ES6 features, 11 | // such as concise method syntax, which we're using here. 12 | render() { 13 | // Children are composed just like child XML/HTML nodes. 14 | // `{...}` can be used to interpolate raw JavaScript. 15 | return
    Hello {this.props.name}!
    ; 16 | } 17 | }); 18 | 19 | React.render( 20 | // Properties look like HTML attributes. 21 | , 22 | document.getElementById("container") 23 | ); 24 | 25 | // It's worth noting that JSX assumes all calls with a 26 | // refers to an actual HTML element, 27 | // and all custom components must have an . 28 | -------------------------------------------------------------------------------- /demo3/demo3.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | var Timer = React.createClass({ 4 | // In addition to properties passed from parents, React 5 | // components can also contain an internal state, referenced 6 | // by `this.state`. `getInitialState` defines the value of 7 | // `this.state` when the component is first mounted. 8 | getInitialState() { 9 | return { 10 | time: 0 11 | }; 12 | }, 13 | 14 | // React provides lifecycle hooks to set up and tear 15 | // down components and third-party APIs if necessary. 16 | // Here, we start a timer when the component mounts... 17 | componentDidMount() { 18 | this.timer = setInterval(this.tick, 1000); 19 | }, 20 | 21 | // ... and remove the timer when the component unmounts. 22 | // If we don't do this, we'll leak memory (and the timer 23 | // will continue to fire). 24 | componentWillUnmount() { 25 | this.timer && clearInterval(this.timer); 26 | }, 27 | 28 | // Unlike properties, state is owned by the component, and 29 | // can be changed using a few methods. Note that you should 30 | // *never* modify `this.state` directly--always use an API 31 | // method to mutate the state. 32 | // 33 | // Our timer calls `setState`, which allows us to update one or 34 | // more keys in our state. The object passed to `setState` is 35 | // merged with the current state; we can use `replaceState` instead 36 | // if we don't want to merge. 37 | tick() { 38 | // Note that React auto-binds all top-level methods in the 39 | // object passed to `createClass` to the component instance. 40 | // Because of this, `this` inside the `tick` method is 41 | // automatically the component instance, and we didn't have 42 | // to use `this.tick.bind(this)` inside the `setInterval` call. 43 | this.setState({time: this.state.time + 1}); 44 | }, 45 | 46 | // Render is called automatically when a component's state is 47 | // updated with `setState`, `replaceState`, or when `forceUpdate` 48 | // is called. Composed components are automatically re-rendered. 49 | render() { 50 | return
    Time: {this.state.time}
    ; 51 | } 52 | }); 53 | 54 | React.render( 55 | , 56 | document.getElementById("container") 57 | ); 58 | -------------------------------------------------------------------------------- /demo4/demo4.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | var TodoList = React.createClass({ 4 | // `TodoList` takes a prop called `items` which is an array of 5 | // strings. We can make this requirement "official" using propTypes. 6 | // If a component doesn't get the properties listed in its 7 | // propTypes, it will warn you in the console (if using a development 8 | // build of React). 9 | propTypes: { 10 | items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired 11 | }, 12 | 13 | render() { 14 | // Every component in an array should have a `key` attribute 15 | // set so React can uniquely identify the item if it needs 16 | // to remove it from the middle of the array without iterating 17 | // over every component in the array. 18 | // Since our todos can't be reordered, we'll just use the index. 19 | // 20 | // Also notice the use of another ES6 feature in the call to `map`, 21 | // arrow functions. The bodies of arrow functions are automatically 22 | // bound to the value of `this` outside of them, so no more calling 23 | // `.bind(this)` or `var self = this` juggling. 24 | return ( 25 |
      26 | {this.props.items.map((item, index) => { 27 | return
    • {item}
      • ; 28 | })} 29 |
    30 | ); 31 | } 32 | }); 33 | 34 | var TodoForm = React.createClass({ 35 | // React has PropTypes for most built-in JS types, as well as the 36 | // ability to define your own validation functions. 37 | // 38 | // `TodoForm` requires an `onSubmit` property that we'll use to notify 39 | // our parent component that the form has been submitted; this makes 40 | // the component more reusable, since the logic for what to do with 41 | // the submitted form isn't hardcoded into the `TodoForm` component. 42 | propTypes: { 43 | onSubmit: React.PropTypes.func.isRequired 44 | }, 45 | 46 | // `TodoForm` contains a text input with a `value` attribute, which 47 | // makes the input a "controlled" input. This means that the input 48 | // will *always* display whatever is passed to its `value` no matter 49 | // what the user tries to type in the box. The `text` property of 50 | // our state is the current string to display in the box. 51 | getInitialState() { 52 | return { 53 | text: "" 54 | }; 55 | }, 56 | 57 | // The text input has an `onChange` property, which calls a function 58 | // any time the user interacts with the box. Here, we update our 59 | // state so the text in the box updates. 60 | // 61 | // This is necessary because React components' `render` functions should 62 | // *always* describe how the component should look at *any* point and time; 63 | // if we didn't use a controlled input, the text might reset in certain 64 | // re-rendering situations. 65 | onTextChange(e) { 66 | this.setState({text: e.target.value}); 67 | }, 68 | 69 | // The form also has a handler for `onSubmit`... 70 | onSubmit(e) { 71 | e.preventDefault(); 72 | if (this.state.text.trim()) { 73 | // ... which we'll use to indicate to our parent that an 74 | // item has been submitted... 75 | this.props.onSubmit(this.state.text); 76 | // ... and then clear the text box. 77 | this.setState({text: ""}); 78 | } 79 | }, 80 | 81 | render() { 82 | return ( 83 |
    84 | 85 | 86 |
    87 | ); 88 | } 89 | }); 90 | 91 | // Our `Todos` component is the full application, which very simply composes 92 | // the `TodoList` and `TodoForm` components. 93 | var Todos = React.createClass({ 94 | getInitialState() { 95 | // It owns the actual items array, so the composed `TodoList` 96 | // and `TodoForm` can be reused in many contexts (that is, they 97 | // are not application specific). 98 | return { 99 | items: [] 100 | }; 101 | }, 102 | 103 | // `onSubmitTodo` is the function we pass to `TodoForm`'s 104 | // `onSubmit` property; so, it will be called when `TodoForm` 105 | // calls `this.props.onSubmit(...)`. 106 | onSubmitTodo(newTodo) { 107 | var nextItems = this.state.items.concat([newTodo]); 108 | this.setState({items: nextItems}); 109 | }, 110 | 111 | render() { 112 | return ( 113 |
    114 |

    TODO

    115 | 116 | 117 |
    118 | ); 119 | } 120 | }); 121 | 122 | React.render( 123 | , 124 | document.getElementById("container") 125 | ); 126 | -------------------------------------------------------------------------------- /demo5/demo5.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | // While composition is the best technique for using components 4 | // together, sometimes it's desirable to have cross-cutting concerns 5 | // that are shared between multiple components. React uses mixins 6 | // to solve this problem. 7 | 8 | // A mixin is simply an object that defines certain component 9 | // lifecycle hooks and properties. Here's a mixin we'll use 10 | // to reimplement the Timer demo. 11 | var SetIntervalMixin = { 12 | // Many lifecycle hooks are automatically merged with the 13 | // same hook defined in other mixins or the component itself. 14 | componentWillMount() { 15 | this.intervals = []; 16 | }, 17 | 18 | // Mixins can also define other methods to make available 19 | // to the component. 20 | setInterval() { 21 | this.intervals.push(setInterval.apply(null, arguments)); 22 | }, 23 | 24 | componentWillUnmount() { 25 | this.intervals.forEach(clearInterval); 26 | } 27 | }; 28 | 29 | var Timer = React.createClass({ 30 | // Use a mixin by adding it to the `mixins` array for a component. 31 | mixins: [SetIntervalMixin], 32 | 33 | getInitialState() { 34 | return { 35 | time: 0 36 | }; 37 | }, 38 | 39 | // Now we can use the mixin to set the interval without worrying 40 | // about setting our own `componentWillUnmount` hook. 41 | componentDidMount() { 42 | this.setInterval(this.tick, 1000); 43 | }, 44 | 45 | tick() { 46 | this.setState({time: this.state.time + 1}); 47 | }, 48 | 49 | render() { 50 | return
    Time: {this.state.time}
    ; 51 | } 52 | }); 53 | 54 | React.render( 55 | , 56 | document.getElementById("container") 57 | ); 58 | -------------------------------------------------------------------------------- /demo6/demo6.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | Store = require("./store.jsx"), 3 | Item = require("./item.jsx"); 4 | 5 | require("./demo6.less"); 6 | 7 | // This demo introduces the idea of a top-level data store 8 | // that the main application uses to get data from; 9 | // any time the store updates, it triggers a "change" 10 | // event and the `Application` component gets re-rendered. 11 | // 12 | // Because React uses a fast virtual DOM under the hood, the 13 | // actual DOM doesn't get changed unless the output of the `render` 14 | // function for a component actually results in different output. 15 | 16 | // Take a look at `store.jsx` for details on the Store class; 17 | // then, continue reading. 18 | var store = new Store(); 19 | 20 | // Here are a few utility functions which help us abstract away 21 | // the store API from the `Application` component. 22 | var addItem = (color, width) => store.addItem(color, width); 23 | var removeItem = (itemId) => store.removeItem(itemId); 24 | var changeItem = (itemId, color, width) => store.changeItem(itemId, color, width); 25 | var clearItems = () => store.clearItems(); 26 | 27 | function randomColor() { 28 | var hex = Math.floor(Math.random() * 16777215).toString(16); 29 | while (hex.length < 6) { 30 | hex = "0" + hex; 31 | } 32 | return "#" + hex; 33 | } 34 | 35 | var Application = React.createClass({ 36 | handleItemChange(itemId, color, width) { 37 | changeItem(itemId, color, width); 38 | }, 39 | 40 | handleRemoveItem(itemId) { 41 | removeItem(itemId); 42 | }, 43 | 44 | addItem() { 45 | addItem(randomColor(), Math.floor(Math.random() * 800 + 200)); 46 | }, 47 | 48 | addManyItems() { 49 | for (var i = 0; i < 1000; i++) { 50 | this.addItem(); 51 | } 52 | }, 53 | 54 | clearItems() { 55 | clearItems(); 56 | }, 57 | 58 | render() { 59 | // For each item in the `items` property, we render 60 | // an `Item` component. Notice each one has a `key` of the item's 61 | // ID, since the items can be removed from inside the middle 62 | // of the array. 63 | // 64 | // Take a look at `item.jsx` to see how the Item component 65 | // is implemented, including the ability to do fast updates 66 | // via `shouldComponentUpdate`. 67 | return ( 68 |
    69 |
    70 | 71 | 72 | 73 |
    74 | {this.props.items.map((item) => { 75 | return 79 | })} 80 |
    81 | ); 82 | } 83 | }); 84 | 85 | var renderApp = () => { 86 | // When we render the application, we pass the store's 87 | // data via the `items` property. 88 | React.render( 89 | , 90 | document.getElementById("container") 91 | ); 92 | } 93 | 94 | // Any time the store emits a change event, we re-render 95 | // the application; React is smart enough to reuse the existing 96 | // component and simply pass it the new properties. 97 | store.on("change", renderApp); 98 | renderApp(); 99 | -------------------------------------------------------------------------------- /demo6/demo6.less: -------------------------------------------------------------------------------- 1 | .item { 2 | border: 1px solid black; 3 | height: 70px; 4 | display: block; 5 | padding: 20px; 6 | margin: 10px 0; 7 | } 8 | -------------------------------------------------------------------------------- /demo6/item.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | var Item = React.createClass({ 4 | propTypes: { 5 | onChange: React.PropTypes.func, 6 | onRemove: React.PropTypes.func, 7 | id: React.PropTypes.number.isRequired, 8 | color: React.PropTypes.string.isRequired, 9 | width: React.PropTypes.number.isRequired 10 | }, 11 | 12 | // If any properties are not required, you can specify 13 | // default properties for them with `getDefaultProps`. 14 | // Note this function is only evaluated once when the ReactComponent class 15 | // is defined (and is cached for future instances of that same component). 16 | getDefaultProps() { 17 | return { 18 | onChange: function() {}, 19 | onRemove: function() {} 20 | }; 21 | }, 22 | 23 | // React provides a `shouldComponentUpdate` hook that allows 24 | // you to return `false` if you know for sure your component 25 | // (and its children) will not need to be updated. You can use 26 | // the current and incoming state and props to make this decision. 27 | // For example, to only re-render if the props or state have changed 28 | // (based on a shallow check), you could use: 29 | // 30 | // shouldComponentUpdate(nextProps, nextState) { 31 | // return !shallowEqual(this.props, nextProps) || 32 | // !shallowEqual(this.state, nextState); 33 | // }, 34 | // 35 | // If a component doesn't re-render due to `shouldComponentUpdate` 36 | // returning false, none of its children will re-render either. 37 | 38 | // `PureRenderMixin` is an implementation of the `shallowEqual` 39 | // example above. Comment this line out to see how much slower 40 | // editing items in the UI is with a large number of items; 41 | // that's because React is calling `render` on every `Item` 42 | // component to figure out if it needs to update; it's much 43 | // faster to use `shouldComponentUpdate` (or this mixin). 44 | mixins: [React.addons.PureRenderMixin], 45 | 46 | // All changes to the item are delegated to the parent via properties. 47 | handleColorChange(e) { 48 | this.props.onChange(this.props.id, e.target.value, this.props.width); 49 | }, 50 | 51 | handleWidthChange(e) { 52 | var width = ~~e.target.value; 53 | this.props.onChange(this.props.id, this.props.color, width); 54 | }, 55 | 56 | handleRemoveClick() { 57 | this.props.onRemove(this.props.id); 58 | }, 59 | 60 | render() { 61 | // The special `style` property on React.DOM-based ReactElements 62 | // allows you to specify styles as a hash. Another common property 63 | // is `className`, which allows you to specify a string to use 64 | // for the element's `class` attribute. 65 | var style = { 66 | background: this.props.color, 67 | width: this.props.width 68 | }; 69 | 70 | // Notice all inputs are controlled inputs; that is to say, 71 | // their value is "locked in" to whatever `this.props.color` 72 | // or `this.props.width` is. It's only because the 73 | // `onChange` handlers delegate to functions that cause a 74 | // re-render with different properties that the inputs 75 | // are actually editable. 76 | return ( 77 |
    78 |
    79 | 81 |
    82 |
    83 | 86 |
    87 |
    {this.props.width}
    88 |
    89 | 90 |
    91 |
    92 | ); 93 | } 94 | }); 95 | 96 | module.exports = Item; 97 | -------------------------------------------------------------------------------- /demo6/store.jsx: -------------------------------------------------------------------------------- 1 | var EventEmitter = require("events").EventEmitter, 2 | util = require("util"); 3 | 4 | var id = 1; 5 | 6 | // The store simply keeps track of an array of items. Each item 7 | // has an id, a color, and a width. 8 | // 9 | // Notice we're using another ES6 feature, classes. 10 | class Store extends EventEmitter { 11 | constructor() { 12 | super(); 13 | this.items = []; 14 | this.itemsById = {}; 15 | this.addItem("red", 300); 16 | } 17 | 18 | // Any time an item is added, removed, or changed, 19 | // we emit a "change" event, which is used in the React component. 20 | addItem(color, width) { 21 | var item = {id: ++id, color: color, width: width}; 22 | this.items.push(item); 23 | this.itemsById[id] = item; 24 | this.emit("change"); 25 | } 26 | 27 | removeItem(itemId) { 28 | var item = this.itemsById[itemId], 29 | index = this.items.indexOf(item); 30 | if (index > -1) { 31 | this.items.splice(index, 1); 32 | delete this.itemsById[itemId]; 33 | this.emit("change"); 34 | } 35 | } 36 | 37 | changeItem(itemId, color, width) { 38 | var item = this.itemsById[itemId]; 39 | item.color = color; 40 | item.width = width; 41 | this.emit("change"); 42 | } 43 | 44 | clearItems() { 45 | this.items = []; 46 | this.itemsById = {}; 47 | this.emit("change"); 48 | } 49 | } 50 | 51 | module.exports = Store; 52 | -------------------------------------------------------------------------------- /demo7/demo7.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | // Sometimes it's useful have a component that can 4 | // wrap other arbitrary ReactElements. React provides 5 | // `this.props.children` for this purpose. 6 | // 7 | // For example, given the following JSX: 8 | // 9 | // Inner text 10 | // 11 | // Inside `Component`, `this.props.children` provides: 12 | // 13 | // Inner text 14 | // 15 | // In this example, we'll create a component that provides 16 | // a code listing with preformatted text and a label for 17 | // the filename. 18 | 19 | var CodeListing = React.createClass({ 20 | propTypes: { 21 | filename: React.PropTypes.string 22 | }, 23 | 24 | getDefaultProps() { 25 | return { 26 | filename: "unnamed file" 27 | }; 28 | }, 29 | 30 | render() { 31 | var filenameStyle = { 32 | backgroundColor: "black", 33 | color: "white", 34 | padding: 5, 35 | fontFamily: "monospace" 36 | }; 37 | 38 | return ( 39 |
    40 |
    {this.props.filename}
    41 | 
    {this.props.children}
    42 |
    43 | ); 44 | } 45 | }); 46 | 47 | var Application = React.createClass({ 48 | render() { 49 | var code = [ 50 | 'React.render(', 51 | ' // We pass `"Minerva"` as the `name` property, which is', 52 | ' // used in `HelloComponent`\'s `render` function.', 53 | ' HelloElementFactory({name: "Minerva"}),', 54 | ' document.getElementById("container")', 55 | ');' 56 | ].join("\n"); 57 | 58 | // We simply wrap whatever we want to show up in the code listing 59 | // in a `` element, and it's provided as 60 | // `this.props.children` in the `CodeListing` component. 61 | return ( 62 |
    63 |

    Here is some code:

    64 | {code} 65 |

    And some more:

    66 | CodeListing with no "filename" property 67 |
    68 | ); 69 | } 70 | }); 71 | 72 | React.render( 73 | , 74 | document.getElementById("container") 75 | ); 76 | -------------------------------------------------------------------------------- /index.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | ReactPrism = require("react-prism").PrismCode; 3 | 4 | React.initializeTouchEvents(true); 5 | 6 | var DEMOS = [ 7 | "Components & Properties", 8 | "JSX", 9 | "State", 10 | "Composition, PropTypes, & Event Handlers", 11 | "Mixins", 12 | "Top-Down Data Flow & shouldComponentUpdate", 13 | "Wrapping Children with this.props.children" 14 | ]; 15 | 16 | var DemoSourceLink = React.createClass({ 17 | render() { 18 | var hrefRoot = "https://github.com/BinaryMuse/react-primer", 19 | href = hrefRoot + "/tree/gh-pages/demo" + 20 | this.props.demo + "/demo" + this.props.demo + ".jsx"; 21 | 22 | return {this.props.children}; 23 | } 24 | }); 25 | 26 | var LinkComponent = React.createClass({ 27 | render() { 28 | if (this.props.demo) { 29 | var hrefRoot = "https://github.com/BinaryMuse/react-primer", 30 | href = hrefRoot + "/tree/gh-pages/demo" + 31 | this.props.demo + "/demo" + this.props.demo + ".jsx"; 32 | return ( 33 |

    34 | Back to demo list 35 |   ·   36 | View on GitHub 37 |

    38 | ); 39 | } else { 40 | return ( 41 |

    Source code for each demo is available from the root of 42 | the project repository and 43 | at the bottom of each demo page.

    44 | ); 45 | } 46 | } 47 | }); 48 | 49 | var SourceCode = React.createClass({ 50 | propTypes: { 51 | files: React.PropTypes.arrayOf( 52 | React.PropTypes.shape({ 53 | name: React.PropTypes.string.isRequired, 54 | code: React.PropTypes.string.isRequired 55 | }).isRequired 56 | ) 57 | }, 58 | 59 | getInitialState() { 60 | return { 61 | selectedIndex: 0 62 | }; 63 | }, 64 | 65 | render() { 66 | var olStyle = { 67 | listStyle: "none", 68 | paddingLeft: 0, 69 | marginTop: 0 70 | }; 71 | 72 | return ( 73 |
    74 |

    Demo Source

    75 |
      {this.props.files.map(this.renderSelector)}
    76 |
    {this.props.files.map(this.renderFile)}
    77 |
    78 | ); 79 | }, 80 | 81 | renderSelector(file, idx) { 82 | var liStyle = { 83 | float: "left", 84 | padding: 10, 85 | cursor: "pointer", 86 | color: this.state.selectedIndex === idx ? "black" : "#999" 87 | }; 88 | 89 | return ( 90 |
  • 91 | {file.name} 92 |
    • 93 | ); 94 | }, 95 | 96 | renderFile(file, idx) { 97 | var style = { 98 | display: this.state.selectedIndex === idx ? "block" : "none", 99 | clear: "both" 100 | }; 101 | 102 | return ( 103 | 
    104 |         {file.code}
105 |
    106 | ) 107 | }, 108 | 109 | handleSelectorClick(idx) { 110 | this.setState({ 111 | selectedIndex: idx 112 | }); 113 | } 114 | }); 115 | 116 | var demo = ~~window.location.search.replace(/\?/, ""); 117 | 118 | // webpack must be able to statically analyze these, 119 | // so we can't generate them programmatically 120 | switch (demo) { 121 | case 1: 122 | require.ensure([], () => { 123 | require("./demo1/demo1.jsx"); 124 | showDemoLink(demo, [{ name: "demo1.jsx", code: require("!!raw!./demo1/demo1.jsx")}]); 125 | }); 126 | break; 127 | case 2: 128 | require.ensure([], () => { 129 | require("./demo2/demo2.jsx"); 130 | showDemoLink(demo, [{name: 'demo2.jsx', code: require("!!raw!./demo2/demo2.jsx")}]); 131 | }); 132 | break; 133 | case 3: 134 | require.ensure([], () => { 135 | require("./demo3/demo3.jsx"); 136 | showDemoLink(demo, [{name: 'demo3.jsx', code: require("!!raw!./demo3/demo3.jsx")}]); 137 | }); 138 | break; 139 | case 4: 140 | require.ensure([], () => { 141 | require("./demo4/demo4.jsx"); 142 | showDemoLink(demo, [{name: 'demo4.jsx', code: require("!!raw!./demo4/demo4.jsx")}]); 143 | }); 144 | break; 145 | case 5: 146 | require.ensure([], () => { 147 | require("./demo5/demo5.jsx"); 148 | showDemoLink(demo, [{name: 'demo5.jsx', code: require("!!raw!./demo5/demo5.jsx")}]); 149 | }); 150 | break; 151 | case 6: 152 | require.ensure([], () => { 153 | require("./demo6/demo6.jsx"); 154 | var code = [ 155 | { name: "demo6.jsx", code: require("!!raw!./demo6/demo6.jsx") }, 156 | { name: "store.jsx", code: require("!!raw!./demo6/store.jsx") }, 157 | { name: "item.jsx", code: require("!!raw!./demo6/item.jsx") } 158 | ]; 159 | showDemoLink(demo, code); 160 | }); 161 | break; 162 | case 7: 163 | require.ensure([], () => { 164 | require("./demo7/demo7.jsx"); 165 | showDemoLink(demo, [{name: 'demo7.jsx', code: require("!!raw!./demo7/demo7.jsx")}]); 166 | }); 167 | break; 168 | default: 169 | loadIndex(); 170 | } 171 | 172 | function showDemoLink(num, files) { 173 | React.render(React.createElement("h1", null, `Demo ${num}: ${DEMOS[num - 1]}`), 174 | document.getElementById("demo-title")); 175 | React.render(, 176 | document.getElementById("source-link")); 177 | 178 | if (files && files.length) { 179 | React.render(, 180 | document.getElementById("source-files")); 181 | } 182 | } 183 | 184 | function loadIndex() { 185 | var App = React.createClass({ 186 | render: function() { 187 | return ( 188 |
      189 | {DEMOS.map((name, idx) => { 190 | var num = idx + 1; 191 | return ( 192 |
    • 193 | Demo {num}: {name} 194 |
      • 195 | ); 196 | })} 197 |
    198 | ) 199 | } 200 | }); 201 | 202 | React.render(, document.getElementById("container")); 203 | React.render(, document.getElementById("source-link")); 204 | } 205 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-demos", 3 | "version": "1.0.0", 4 | "description": "Some explanatory React demos", 5 | "scripts": { 6 | "start": "webpack -w -d", 7 | "build": "NODE_ENV=production webpack -d" 8 | }, 9 | "author": "Michelle Tilley ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "css-loader": "^0.9.0", 13 | "jsx-loader": "^0.12.0", 14 | "less": "^1.7.5", 15 | "less-loader": "^0.7.7", 16 | "raw-loader": "^0.5.1", 17 | "react": "^0.12.0", 18 | "react-prism": "^1.2.1", 19 | "style-loader": "^0.8.1", 20 | "webpack": "^1.4.7", 21 | "webpack-dev-server": "^1.6.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | 3 | var plugins = [ 4 | // require 'react/addons' when we require 'react' 5 | new webpack.NormalModuleReplacementPlugin(/^react$/, 'react/addons'), 6 | new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"), 7 | ]; 8 | 9 | if (process.env.NODE_ENV === "production") { 10 | plugins.push(new webpack.optimize.UglifyJsPlugin()); 11 | plugins.push(new webpack.optimize.DedupePlugin()); 12 | plugins.push(new webpack.DefinePlugin({ 13 | "process.env": { 14 | NODE_ENV: JSON.stringify("production") 15 | } 16 | })); 17 | } 18 | 19 | module.exports = { 20 | cache: true, 21 | entry: { 22 | app: "./index.jsx", 23 | vendor: ["react/addons"] 24 | }, 25 | output: { 26 | path: __dirname + "/build", 27 | filename: "bundle.js" 28 | }, 29 | devtool: "inline-source-map", 30 | module: { 31 | loaders: [ 32 | { test: /\.less$/, loader: "style!css!less" }, 33 | { test: /\.jsx$/, loader: "jsx?harmony&sourceMap" } 34 | ] 35 | }, 36 | plugins: plugins 37 | }; 38 | --------------------------------------------------------------------------------