├── .gitignore ├── LICENSE ├── README.md ├── build ├── react-dom.min.js └── react.min.js ├── examples ├── README.md ├── ballmer-peak │ ├── ballmer_peak.png │ ├── example.js │ └── index.html ├── basic-commonjs │ ├── README.md │ ├── index.html │ ├── index.js │ └── package.json ├── basic-jsx-external │ ├── example.js │ └── index.html ├── basic-jsx-harmony │ └── index.html ├── basic-jsx-precompile │ ├── example.js │ └── index.html ├── basic-jsx │ └── index.html ├── basic │ └── index.html ├── jquery-bootstrap │ ├── css │ │ └── example.css │ ├── index.html │ ├── js │ │ └── app.js │ └── thirdparty │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.js ├── jquery-mobile │ ├── README.md │ ├── index.html │ └── js │ │ └── app.js ├── requirejs │ └── build │ │ ├── app.js │ │ └── example-component.js ├── server-rendering │ ├── README.md │ ├── jsapp │ │ ├── package.json │ │ └── src │ │ │ └── App.js │ ├── reactserver │ │ ├── package.json │ │ └── server.js │ └── webapp │ │ ├── index.php │ │ └── static │ │ └── bundle.js ├── shared │ ├── css │ │ └── base.css │ └── thirdparty │ │ ├── console-polyfill.js │ │ ├── es5-sham.min.js │ │ ├── es5-shim.min.js │ │ └── jquery.min.js └── transitions │ ├── index.html │ └── transition.css ├── hello_world.R ├── react-0.12.2.Rproj ├── react_tutorial_in_R.Rproj ├── tutorial1.R ├── tutorial10.R ├── tutorial11.R ├── tutorial12.R ├── tutorial13.R ├── tutorial14.R ├── tutorial2.R ├── tutorial3.R ├── tutorial4.R ├── tutorial5.R ├── tutorial6.R ├── tutorial7.R ├── tutorial8.R └── tutorial9.R /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | ======= 5 | # History files 6 | .Rhistory 7 | 8 | # Example code in package build process 9 | *-Ex.R 10 | 11 | # R data files from past sessions 12 | .Rdata 13 | 14 | # RStudio files 15 | .Rproj.user/ 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | React is [BSD licensed](https://github.com/facebook/react/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/facebook/react/blob/master/PATENTS). 2 | 3 | React documentation is [Creative Commons licensed](https://github.com/facebook/react/blob/master/LICENSE-docs). 4 | 5 | Examples provided in this repository and in the documentation are [separately licensed](https://github.com/facebook/react/blob/master/LICENSE-examples). 6 | 7 | 8 | For the bits/pieces/translations to R, The MIT License (MIT) applies. 9 | 10 | Copyright (c) 2015 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy 13 | of this software and associated documentation files (the "Software"), to deal 14 | in the Software without restriction, including without limitation the rights 15 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 16 | copies of the Software, and to permit persons to whom the Software is 17 | furnished to do so, subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in all 20 | copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 24 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 25 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 26 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 27 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 28 | SOFTWARE. 29 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## React Tutorial in R with htmltools 2 | 3 | Complete the tutorial [Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html) in R using the [`htmltools`](https://github.com/rstudio/htmltools) package. Please note that most of this is copied and pasted from the tutorial, so nearly all attribution belongs to the original authors from the Facebook React Team and is [BSD licensed](./LICENSE). Content regarding licensing has been retained below. For the tiny bits/pieces/translations that I have added, the [MIT license](./LICENSE) applies. 4 | 5 | 6 | ## Original Important Contents of Facebook Readme.md 7 | ### License 8 | 9 | React is [BSD licensed](https://github.com/facebook/react/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/facebook/react/blob/master/PATENTS). 10 | 11 | React documentation is [Creative Commons licensed](https://github.com/facebook/react/blob/master/LICENSE-docs). 12 | 13 | Examples provided in this repository and in the documentation are [separately licensed](https://github.com/facebook/react/blob/master/LICENSE-examples). 14 | 15 | -------------------------------------------------------------------------------- /build/react-dom.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ReactDOM v0.14.8 3 | * 4 | * Copyright 2013-2015, Facebook, Inc. 5 | * All rights reserved. 6 | * 7 | * This source code is licensed under the BSD-style license found in the 8 | * LICENSE file in the root directory of this source tree. An additional grant 9 | * of patent rights can be found in the PATENTS file in the same directory. 10 | * 11 | */ 12 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var f;f="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,f.ReactDOM=e(f.React)}}(function(e){return e.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED}); -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # React Examples 2 | 3 | Here are some small React demos. Some use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration. 4 | 5 | For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/architecture-examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/labs/architecture-examples/react-backbone/). 6 | -------------------------------------------------------------------------------- /examples/ballmer-peak/ballmer_peak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timelyportfolio/react_tutorial_in_R/5a45b5d65246e6c3d05ed94bea43ac743f0a2917/examples/ballmer-peak/ballmer_peak.png -------------------------------------------------------------------------------- /examples/ballmer-peak/example.js: -------------------------------------------------------------------------------- 1 | function computeBallmerPeak(x) { 2 | // see: http://ask.metafilter.com/76859/Make-a-function-of-this-graph-Thats-like-an-antigraph 3 | x = x * 100; 4 | return ( 5 | 1-1/(1+Math.exp(-(x-6)))*.5 + Math.exp(-Math.pow(Math.abs(x-10), 2)*10) 6 | ) / 1.6; 7 | } 8 | 9 | function percentage(x) { 10 | return isNaN(x) ? 'N/A' : (100 - Math.round(x * 100)) + '%'; 11 | } 12 | 13 | var BallmerPeakCalculator = React.createClass({ 14 | getInitialState: function() { 15 | return {bac: 0}; 16 | }, 17 | handleChange: function(event) { 18 | this.setState({bac: event.target.value}); 19 | }, 20 | render: function() { 21 | var pct = percentage(computeBallmerPeak(this.state.bac)); 22 | return ( 23 |
24 | 25 |

Credit due to xkcd.

26 |

Compute your Ballmer Peak:

27 |

28 | If your BAC is{' '} 29 | 30 | {', '}then {pct} of your lines of code will be bug free. 31 |

32 |
33 | ); 34 | } 35 | }); 36 | 37 | React.render( 38 | , 39 | document.getElementById('container') 40 | ); 41 | -------------------------------------------------------------------------------- /examples/ballmer-peak/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ballmer Peak Calculator 6 | 7 | 8 | 9 |

Ballmer Peak Calculator

10 |
11 |

12 | If you can see this, React is not working right. This is probably because you're viewing 13 | this on your file system instead of a web server. Try running 14 | 

15 |           python -m SimpleHTTPServer
16 |
17 | and going to http://localhost:8000/. 18 |

19 |
20 |

Example Details

21 |

This is written with JSX in a separate file and transformed in the browser.

22 |

23 | Learn more about React at 24 | facebook.github.io/react. 25 |

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/basic-commonjs/README.md: -------------------------------------------------------------------------------- 1 | # Basic example of using React with Browserify 2 | 3 | Run `npm install` in the directory to install React from npm. Then run: 4 | 5 | ./node_modules/.bin/browserify --debug --transform reactify ./index.js > ./bundle.js 6 | 7 | to produce `bundle.js` with example code and React. 8 | -------------------------------------------------------------------------------- /examples/basic-commonjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CommonJS Example with Browserify 6 | 7 | 8 | 9 |

Basic CommonJS Example with Browserify

10 |
11 |

12 | To install React, follow the instructions on 13 | GitHub. 14 |

15 |

16 | If you can see this, React is not working right. 17 | If you checked out the source from GitHub make sure to run grunt. 18 |

19 |
20 |

Example Details

21 |

This is written with JSX in a CommonJS module and precompiled to vanilla JS by running:

22 | 
browserify --debug --transform reactify index.js > bundle.js
23 |

24 | Learn more about React at 25 | facebook.github.io/react. 26 |

27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/basic-commonjs/index.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var ExampleApplication = React.createClass({ 4 | render: function() { 5 | var elapsed = Math.round(this.props.elapsed / 100); 6 | var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); 7 | var message = 8 | 'React has been successfully running for ' + seconds + ' seconds.'; 9 | 10 | return

{message}

; 11 | } 12 | }); 13 | 14 | var start = new Date().getTime(); 15 | 16 | setInterval(function() { 17 | React.render( 18 | , 19 | document.getElementById('container') 20 | ); 21 | }, 50); 22 | -------------------------------------------------------------------------------- /examples/basic-commonjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-basic-commonjs-example", 3 | "description": "Basic example of using React with CommonJS", 4 | "main": "index.js", 5 | "devDependencies": { 6 | "browserify": "^6.3.3", 7 | "envify": "^3.2.0", 8 | "react": "^0.12.0", 9 | "reactify": "^0.17.1" 10 | }, 11 | "scripts": { 12 | "build": "browserify --debug --transform reactify index.js > bundle.js" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/basic-jsx-external/example.js: -------------------------------------------------------------------------------- 1 | var ExampleApplication = React.createClass({ 2 | render: function() { 3 | var elapsed = Math.round(this.props.elapsed / 100); 4 | var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); 5 | var message = 6 | 'React has been successfully running for ' + seconds + ' seconds.'; 7 | 8 | return

{message}

; 9 | } 10 | }); 11 | 12 | var start = new Date().getTime(); 13 | 14 | setInterval(function() { 15 | React.render( 16 | , 17 | document.getElementById('container') 18 | ); 19 | }, 50); 20 | -------------------------------------------------------------------------------- /examples/basic-jsx-external/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Example with External JSX 6 | 7 | 8 | 9 | 10 |

Basic Example with External JSX

11 |
12 |

13 | If you can see this, React is not working right. This is probably because you're viewing 14 | this on your file system instead of a web server. Try running 15 | 

16 |           python -m SimpleHTTPServer
17 |
18 | and going to http://localhost:8000/. 19 |

20 |
21 |

Example Details

22 |

This is written with JSX in a separate file and transformed in the browser.

23 |

24 | Learn more about React at 25 | facebook.github.io/react. 26 |

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /examples/basic-jsx-harmony/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Example with JSX with Harmony 6 | 7 | 8 | 9 |

Basic Example with JSX with Harmony

10 |
11 |

12 | To install React, follow the instructions on 13 | GitHub. 14 |

15 |

16 | If you can see this, React is not working right. 17 | If you checked out the source from GitHub make sure to run grunt. 18 |

19 |
20 |

Example Details

21 |

This is written with JSX with Harmony (ES6) syntax and transformed in the browser.

22 |

23 | Learn more about React at 24 | facebook.github.io/react. 25 |

26 | 27 | 28 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /examples/basic-jsx-precompile/example.js: -------------------------------------------------------------------------------- 1 | var ExampleApplication = React.createClass({ 2 | render: function() { 3 | var elapsed = Math.round(this.props.elapsed / 100); 4 | var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); 5 | var message = 6 | 'React has been successfully running for ' + seconds + ' seconds.'; 7 | 8 | return

{message}

; 9 | } 10 | }); 11 | 12 | var start = new Date().getTime(); 13 | 14 | setInterval(function() { 15 | React.render( 16 | , 17 | document.getElementById('container') 18 | ); 19 | }, 50); 20 | -------------------------------------------------------------------------------- /examples/basic-jsx-precompile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Example with Precompiled JSX 6 | 7 | 8 | 9 |

Basic Example with Precompiled JSX

10 |
11 |

12 | If you can see this, React is not running. Try running: 13 |

14 | 
npm install -g react-tools
15 | cd examples/basic-jsx-precompile/
16 | jsx . build/
17 |
18 |

Example Details

19 |

This is written with JSX in a separate file and precompiled to vanilla JS by running:

20 | 
npm install -g react-tools
21 | cd examples/basic-jsx-precompile/
22 | jsx . build/
23 |

24 | Learn more about React at 25 | facebook.github.io/react. 26 |

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/basic-jsx/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Example with JSX 6 | 7 | 8 | 9 |

Basic Example with JSX

10 |
11 |

12 | To install React, follow the instructions on 13 | GitHub. 14 |

15 |

16 | If you can see this, React is not working right. 17 | If you checked out the source from GitHub make sure to run grunt. 18 |

19 |
20 |

Example Details

21 |

This is written with JSX and transformed in the browser.

22 |

23 | Learn more about React at 24 | facebook.github.io/react. 25 |

26 | 27 | 28 | 29 | 30 | 31 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Example 6 | 7 | 8 | 9 |

Basic Example

10 |
11 |

12 | To install React, follow the instructions on 13 | GitHub. 14 |

15 |

16 | If you can see this, React is not working right. 17 | If you checked out the source from GitHub make sure to run grunt. 18 |

19 |
20 |

Example Details

21 |

This is written in vanilla JavaScript (without JSX) and transformed in the browser.

22 |

23 | Learn more about React at 24 | facebook.github.io/react. 25 |

26 | 27 | 28 | 29 | 30 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /examples/jquery-bootstrap/css/example.css: -------------------------------------------------------------------------------- 1 | .example { 2 | margin: 20px; 3 | } -------------------------------------------------------------------------------- /examples/jquery-bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery Integration 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /examples/jquery-bootstrap/js/app.js: -------------------------------------------------------------------------------- 1 | // Simple pure-React component so we don't have to remember 2 | // Bootstrap's classes 3 | var BootstrapButton = React.createClass({ 4 | render: function() { 5 | // transferPropsTo() is smart enough to merge classes provided 6 | // to this component. 7 | return this.transferPropsTo( 8 | 9 | {this.props.children} 10 | 11 | ); 12 | } 13 | }); 14 | 15 | var BootstrapModal = React.createClass({ 16 | // The following two methods are the only places we need to 17 | // integrate with Bootstrap or jQuery! 18 | componentDidMount: function() { 19 | // When the component is added, turn it into a modal 20 | $(this.getDOMNode()) 21 | .modal({backdrop: 'static', keyboard: false, show: false}) 22 | }, 23 | componentWillUnmount: function() { 24 | $(this.getDOMNode()).off('hidden', this.handleHidden); 25 | }, 26 | close: function() { 27 | $(this.getDOMNode()).modal('hide'); 28 | }, 29 | open: function() { 30 | $(this.getDOMNode()).modal('show'); 31 | }, 32 | render: function() { 33 | var confirmButton = null; 34 | var cancelButton = null; 35 | 36 | if (this.props.confirm) { 37 | confirmButton = ( 38 | 41 | {this.props.confirm} 42 | 43 | ); 44 | } 45 | if (this.props.cancel) { 46 | cancelButton = ( 47 | 48 | {this.props.cancel} 49 | 50 | ); 51 | } 52 | 53 | return ( 54 |
55 |
56 |
57 |
58 | 64 |

{this.props.title}

65 |
66 |
67 | {this.props.children} 68 |
69 |
70 | {cancelButton} 71 | {confirmButton} 72 |
73 |
74 |
75 |
76 | ); 77 | }, 78 | handleCancel: function() { 79 | if (this.props.onCancel) { 80 | this.props.onCancel(); 81 | } 82 | }, 83 | handleConfirm: function() { 84 | if (this.props.onConfirm) { 85 | this.props.onConfirm(); 86 | } 87 | } 88 | }); 89 | 90 | var Example = React.createClass({ 91 | handleCancel: function() { 92 | if (confirm('Are you sure you want to cancel?')) { 93 | this.refs.modal.close(); 94 | } 95 | }, 96 | render: function() { 97 | var modal = null; 98 | modal = ( 99 | 106 | This is a React component powered by jQuery and Bootstrap! 107 | 108 | ); 109 | return ( 110 |
111 | {modal} 112 | 113 | Open modal 114 | 115 |
116 | ); 117 | }, 118 | openModal: function() { 119 | this.refs.modal.open(); 120 | }, 121 | closeModal: function() { 122 | this.refs.modal.close(); 123 | } 124 | }); 125 | 126 | React.render(, document.getElementById('jqueryexample')); 127 | -------------------------------------------------------------------------------- /examples/jquery-bootstrap/thirdparty/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.2.0 (http://getbootstrap.com) 3 | * Copyright 2011-2014 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.2.0",d.prototype.close=function(b){function c(){f.detach().trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one("bsTransitionEnd",c).emulateTransitionEnd(150):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.2.0",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),d[e](null==f[b]?this.options[b]:f[b]),setTimeout(a.proxy(function(){"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target);d.hasClass("btn")||(d=d.closest(".btn")),b.call(d,"toggle"),c.preventDefault()})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b).on("keydown.bs.carousel",a.proxy(this.keydown,this)),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.2.0",c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},c.prototype.keydown=function(a){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.to=function(b){var c=this,d=this.getItemIndex(this.$active=this.$element.find(".item.active"));return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){return this.sliding?void 0:this.slide("next")},c.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},c.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}if(e.hasClass("active"))return this.sliding=!1;var j=e[0],k=a.Event("slide.bs.carousel",{relatedTarget:j,direction:g});if(this.$element.trigger(k),!k.isDefaultPrevented()){if(this.sliding=!0,f&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var l=a(this.$indicators.children()[this.getItemIndex(e)]);l&&l.addClass("active")}var m=a.Event("slid.bs.carousel",{relatedTarget:j,direction:g});return a.support.transition&&this.$element.hasClass("slide")?(e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one("bsTransitionEnd",function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger(m)},0)}).emulateTransitionEnd(1e3*d.css("transition-duration").slice(0,-1))):(d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger(m)),f&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b);!e&&f.toggle&&"show"==b&&(b=!b),e||d.data("bs.collapse",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};c.VERSION="3.2.0",c.DEFAULTS={toggle:!0},c.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},c.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var c=a.Event("show.bs.collapse");if(this.$element.trigger(c),!c.isDefaultPrevented()){var d=this.$parent&&this.$parent.find("> .panel > .in");if(d&&d.length){var e=d.data("bs.collapse");if(e&&e.transitioning)return;b.call(d,"hide"),e||d.data("bs.collapse",null)}var f=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[f](0),this.transitioning=1;var g=function(){this.$element.removeClass("collapsing").addClass("collapse in")[f](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return g.call(this);var h=a.camelCase(["scroll",f].join("-"));this.$element.one("bsTransitionEnd",a.proxy(g,this)).emulateTransitionEnd(350)[f](this.$element[0][h])}}},c.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(d,this)).emulateTransitionEnd(350):d.call(this)}}},c.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var d=a.fn.collapse;a.fn.collapse=b,a.fn.collapse.Constructor=c,a.fn.collapse.noConflict=function(){return a.fn.collapse=d,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(c){var d,e=a(this),f=e.attr("data-target")||c.preventDefault()||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),g=a(f),h=g.data("bs.collapse"),i=h?"toggle":e.data(),j=e.attr("data-parent"),k=j&&a(j);h&&h.transitioning||(k&&k.find('[data-toggle="collapse"][data-parent="'+j+'"]').not(e).addClass("collapsed"),e[g.hasClass("in")?"addClass":"removeClass"]("collapsed")),b.call(g,i)})}(jQuery),+function(a){"use strict";function b(b){b&&3===b.which||(a(e).remove(),a(f).each(function(){var d=c(a(this)),e={relatedTarget:this};d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown",e)),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown",e))}))}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.2.0",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('
').insertAfter(a(this)).on("click",b);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus"),f.toggleClass("open").trigger("shown.bs.dropdown",h)}return!1}},g.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var e=c(d),g=e.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.divider):visible a",i=e.find('[role="menu"]'+h+', [role="listbox"]'+h);if(i.length){var j=i.index(i.filter(":focus"));38==b.keyCode&&j>0&&j--,40==b.keyCode&&j').appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;e?this.$backdrop.one("bsTransitionEnd",b).emulateTransitionEnd(150):b()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var f=function(){c.removeBackdrop(),b&&b()};a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",f).emulateTransitionEnd(150):f()}else b&&b()},c.prototype.checkScrollbar=function(){document.body.clientWidth>=window.innerWidth||(this.scrollbarWidth=this.scrollbarWidth||this.measureScrollbar())},c.prototype.setScrollbar=function(){var a=parseInt(this.$body.css("padding-right")||0,10);this.scrollbarWidth&&this.$body.css("padding-right",a+this.scrollbarWidth)},c.prototype.resetScrollbar=function(){this.$body.css("padding-right","")},c.prototype.measureScrollbar=function(){var a=document.createElement("div");a.className="modal-scrollbar-measure",this.$body.append(a);var b=a.offsetWidth-a.clientWidth;return this.$body[0].removeChild(a),b};var d=a.fn.modal;a.fn.modal=b,a.fn.modal.Constructor=c,a.fn.modal.noConflict=function(){return a.fn.modal=d,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(c){var d=a(this),e=d.attr("href"),f=a(d.attr("data-target")||e&&e.replace(/.*(?=#[^\s]+$)/,"")),g=f.data("bs.modal")?"toggle":a.extend({remote:!/#/.test(e)&&e},f.data(),d.data());d.is("a")&&c.preventDefault(),f.one("show.bs.modal",function(a){a.isDefaultPrevented()||f.one("hidden.bs.modal",function(){d.is(":visible")&&d.trigger("focus")})}),b.call(f,g,this)})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof b&&b;(e||"destroy"!=b)&&(e||d.data("bs.tooltip",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};c.VERSION="3.2.0",c.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},c.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.$viewport=this.options.viewport&&a(this.options.viewport.selector||this.options.viewport);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focusin",i="hover"==g?"mouseleave":"focusout";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},c.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},c.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?void(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show)):c.show()},c.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?void(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide)):c.hide()},c.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(b);var c=a.contains(document.documentElement,this.$element[0]);if(b.isDefaultPrevented()||!c)return;var d=this,e=this.tip(),f=this.getUID(this.type);this.setContent(),e.attr("id",f),this.$element.attr("aria-describedby",f),this.options.animation&&e.addClass("fade");var g="function"==typeof this.options.placement?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,h=/\s?auto?\s?/i,i=h.test(g);i&&(g=g.replace(h,"")||"top"),e.detach().css({top:0,left:0,display:"block"}).addClass(g).data("bs."+this.type,this),this.options.container?e.appendTo(this.options.container):e.insertAfter(this.$element);var j=this.getPosition(),k=e[0].offsetWidth,l=e[0].offsetHeight;if(i){var m=g,n=this.$element.parent(),o=this.getPosition(n);g="bottom"==g&&j.top+j.height+l-o.scroll>o.height?"top":"top"==g&&j.top-o.scroll-l<0?"bottom":"right"==g&&j.right+k>o.width?"left":"left"==g&&j.left-kg.top+g.height&&(e.top=g.top+g.height-i)}else{var j=b.left-f,k=b.left+f+c;jg.width&&(e.left=g.left+g.width-k)}return e},c.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},c.prototype.getUID=function(a){do a+=~~(1e6*Math.random());while(document.getElementById(a));return a},c.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},c.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},c.prototype.enable=function(){this.enabled=!0},c.prototype.disable=function(){this.enabled=!1},c.prototype.toggleEnabled=function(){this.enabled=!this.enabled},c.prototype.toggle=function(b){var c=this;b&&(c=a(b.currentTarget).data("bs."+this.type),c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c))),c.tip().hasClass("in")?c.leave(c):c.enter(c)},c.prototype.destroy=function(){clearTimeout(this.timeout),this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var d=a.fn.tooltip;a.fn.tooltip=b,a.fn.tooltip.Constructor=c,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=d,this}}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof b&&b;(e||"destroy"!=b)&&(e||d.data("bs.popover",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");c.VERSION="3.2.0",c.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:''}),c.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),c.prototype.constructor=c,c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content").empty()[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},c.prototype.hasContent=function(){return this.getTitle()||this.getContent()},c.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},c.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var d=a.fn.popover;a.fn.popover=b,a.fn.popover.Constructor=c,a.fn.popover.noConflict=function(){return a.fn.popover=d,this}}(jQuery),+function(a){"use strict";function b(c,d){var e=a.proxy(this.process,this);this.$body=a("body"),this.$scrollElement=a(a(c).is("body")?window:c),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",e),this.refresh(),this.process()}function c(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})}b.VERSION="3.2.0",b.DEFAULTS={offset:10},b.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},b.prototype.refresh=function(){var b="offset",c=0;a.isWindow(this.$scrollElement[0])||(b="position",c=this.$scrollElement.scrollTop()),this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight();var d=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[b]().top+c,e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){d.offsets.push(this[0]),d.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.getScrollHeight(),d=this.options.offset+c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(this.scrollHeight!=c&&this.refresh(),b>=d)return g!=(a=f[f.length-1])&&this.activate(a);if(g&&b<=e[0])return g!=(a=f[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parentsUntil(this.options.target,".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")};var d=a.fn.scrollspy;a.fn.scrollspy=c,a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=d,this},a(window).on("load.bs.scrollspy.data-api",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);c.call(b,b.data())})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new c(this)),"string"==typeof b&&e[b]()})}var c=function(b){this.element=a(b)};c.VERSION="3.2.0",c.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.closest("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},c.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one("bsTransitionEnd",e).emulateTransitionEnd(150):e(),f.removeClass("in")};var d=a.fn.tab;a.fn.tab=b,a.fn.tab.Constructor=c,a.fn.tab.noConflict=function(){return a.fn.tab=d,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(c){c.preventDefault(),b.call(a(this),"show")})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof b&&b;e||d.data("bs.affix",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.options=a.extend({},c.DEFAULTS,d),this.$target=a(this.options.target).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(b),this.affixed=this.unpin=this.pinnedOffset=null,this.checkPosition()};c.VERSION="3.2.0",c.RESET="affix affix-top affix-bottom",c.DEFAULTS={offset:0,target:window},c.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(c.RESET).addClass("affix");var a=this.$target.scrollTop(),b=this.$element.offset();return this.pinnedOffset=b.top-a},c.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},c.prototype.checkPosition=function(){if(this.$element.is(":visible")){var b=a(document).height(),d=this.$target.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top(this.$element)),"function"==typeof h&&(h=f.bottom(this.$element));var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=b-h?"bottom":null!=g&&g>=d?"top":!1;if(this.affixed!==i){null!=this.unpin&&this.$element.css("top","");var j="affix"+(i?"-"+i:""),k=a.Event(j+".bs.affix");this.$element.trigger(k),k.isDefaultPrevented()||(this.affixed=i,this.unpin="bottom"==i?this.getPinnedOffset():null,this.$element.removeClass(c.RESET).addClass(j).trigger(a.Event(j.replace("affix","affixed"))),"bottom"==i&&this.$element.offset({top:b-this.$element.height()-h}))}}};var d=a.fn.affix;a.fn.affix=b,a.fn.affix.Constructor=c,a.fn.affix.noConflict=function(){return a.fn.affix=d,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var c=a(this),d=c.data();d.offset=d.offset||{},d.offsetBottom&&(d.offset.bottom=d.offsetBottom),d.offsetTop&&(d.offset.top=d.offsetTop),b.call(c,d)})})}(jQuery); -------------------------------------------------------------------------------- /examples/jquery-mobile/README.md: -------------------------------------------------------------------------------- 1 | jQuery Mobile React Example 2 | =========================== 3 | 4 | This example demonstrates how jQuery Mobile applications can be built with React. 5 | 6 | The source code is based on jQuery Mobile's [pages-multi-page example](https://github.com/jquery/jquery-mobile/tree/master/demos/pages-multi-page). 7 | -------------------------------------------------------------------------------- /examples/jquery-mobile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | jQuery Mobile React Example 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /examples/jquery-mobile/js/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery Mobile React Example 3 | * 4 | * Main application script. 5 | * For variety, this example is written in 100% JSHint-compliant JavaScript, not in JSX. 6 | * 7 | * Component structure: 8 | * 9 | * - App 10 | * |-- JQueryMobilePage (one) 11 | * | |-- JQueryMobileHeader 12 | * | |-- JQueryMobileContent 13 | * | | |-- PageOneContent 14 | * | | |-- JQueryMobileButton 15 | * | |-- JQueryMobileFooter 16 | * |-- JQueryMobilePage (two) 17 | * | |-- JQueryMobileHeader 18 | * | |-- JQueryMobileContent 19 | * | | |-- PageTwoContent 20 | * | | |-- JQueryMobileButton 21 | * | |-- JQueryMobileFooter 22 | * |-- JQueryMobilePage (popup) 23 | * |-- JQueryMobileHeader 24 | * |-- JQueryMobileContent 25 | * | |-- PagePopUpContent 26 | * | |-- JQueryMobileButton 27 | * |-- JQueryMobileFooter 28 | */ 29 | 30 | /* global document, React */ 31 | 32 | 'use strict'; 33 | 34 | /** Main application component. */ 35 | var App = React.createClass({ 36 | displayName: 'App', 37 | 38 | render: function() { 39 | return React.DOM.div({className:'app'}, 40 | JQueryMobilePage({id:'one'}, PageOneContent(null)), 41 | JQueryMobilePage({id:'two'}, PageTwoContent(null)), 42 | JQueryMobilePage({id:'popup', headerTheme:'b'}, PagePopUpContent(null)) 43 | ); 44 | } 45 | }); 46 | 47 | /** jQuery Mobile button component. */ 48 | var JQueryMobileButton = React.createClass({ 49 | displayName: 'JQueryMobileButton', 50 | 51 | getDefaultProps: function() { 52 | return {className:'ui-btn ui-shadow ui-corner-all'}; 53 | }, 54 | 55 | render: function() { 56 | return React.DOM.p(null, 57 | React.DOM.a(this.props, this.props.children) 58 | ); 59 | } 60 | }); 61 | 62 | /** jQuery Mobile page content component. */ 63 | var JQueryMobileContent = React.createClass({ 64 | displayName: 'JQueryMobileContent', 65 | 66 | render: function() { 67 | return React.DOM.div({role:'main', className:'ui-content'}, 68 | this.props.children 69 | ); 70 | } 71 | }); 72 | 73 | /** jQuery Mobile footer component. */ 74 | var JQueryMobileFooter = React.createClass({ 75 | displayName: 'JQueryMobileFooter', 76 | 77 | render: function() { 78 | return React.DOM.div({'data-role':'footer'}, 79 | React.DOM.h4(null, 'Page footer') 80 | ); 81 | } 82 | }); 83 | 84 | /** jQuery Mobile header component. */ 85 | var JQueryMobileHeader = React.createClass({ 86 | displayName: 'JQueryMobileHeader', 87 | 88 | render: function() { 89 | return React.DOM.div({'data-role':'header', 'data-theme':this.props.headerTheme}, 90 | React.DOM.h1(null, this.props.title) 91 | ); 92 | } 93 | }); 94 | 95 | /** jQuery Mobile page component. */ 96 | var JQueryMobilePage = React.createClass({ 97 | displayName: 'JQueryMobilePage', 98 | 99 | getDefaultProps: function() { 100 | return {'data-role':'page', 'data-theme':'a', headerTheme:'a'}; 101 | }, 102 | 103 | render: function() { 104 | return this.transferPropsTo(React.DOM.div(null, 105 | JQueryMobileHeader({title:'Page ' + this.props.id, headerTheme:this.props.headerTheme}), 106 | JQueryMobileContent(null, this.props.children), 107 | JQueryMobileFooter(null) 108 | )); 109 | } 110 | }); 111 | 112 | /** Application page one component. */ 113 | var PageOneContent = React.createClass({ 114 | displayName: 'PageOneContent', 115 | 116 | render: function() { 117 | return React.DOM.div(null, 118 | React.DOM.h2(null, 'One'), 119 | React.DOM.p(null, 120 | 'I have an ', 121 | React.DOM.code(null, 'id'), 122 | ' of "one" on my page container. I\'m first in the source order so I\'m shown when the page loads.' 123 | ), 124 | React.DOM.p(null, 'This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.'), 125 | React.DOM.p(null, 'Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.'), 126 | React.DOM.p(null, 127 | 'You link to internal pages by referring to the ', 128 | React.DOM.code(null, 'id'), 129 | ' of the page you want to show. For example, to ', 130 | React.DOM.a({href:'#two'}, 'link'), 131 | ' to the page with an ', 132 | React.DOM.code(null, 'id'), 133 | ' of "two", my link would have a ', 134 | React.DOM.code(null, 'href="#two"'), 135 | ' in the code.' 136 | ), 137 | React.DOM.h3(null, 'Show internal pages:'), 138 | JQueryMobileButton({href:'#two'}, 'Show page "two"'), 139 | JQueryMobileButton({href:'#popup', 'data-rel':'dialog', 'data-transition':'pop'}, 'Show page "popup" (as a dialog)') 140 | ); 141 | } 142 | }); 143 | 144 | /** Application page two component. */ 145 | var PageTwoContent = React.createClass({ 146 | displayName: 'PageTwoContent', 147 | 148 | render: function() { 149 | return React.DOM.div(null, 150 | React.DOM.h2(null, 'Two'), 151 | React.DOM.p(null, 'I have an id of "two" on my page container. I\'m the second page container in this multi-page template.'), 152 | React.DOM.p(null, 'Notice that the theme is different for this page because we\'ve added a few ', 153 | React.DOM.code(null, 'data-theme'), 154 | ' swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we\'re keeping these simple.'), 155 | JQueryMobileButton({href:'#one', 'data-direction':'reverse', className:'ui-btn ui-shadow ui-corner-all ui-btn-b'}, 'Back to page "one"') 156 | ); 157 | } 158 | }); 159 | 160 | /** Application popup page component. */ 161 | var PagePopUpContent = React.createClass({ 162 | displayName: 'PagePopUpContent', 163 | 164 | render: function() { 165 | return React.DOM.div(null, 166 | React.DOM.h2(null, 'Popup'), 167 | React.DOM.p(null, 'I have an id of "popup" on my page container and only look like a dialog because the link to me had a ', 168 | React.DOM.code(null, 'data-rel="dialog"'), 169 | ' attribute which gives me this inset look and a ', 170 | React.DOM.code(null, 'data-transition="pop"'), 171 | ' attribute to change the transition to pop. Without this, I\'d be styled as a normal page.'), 172 | JQueryMobileButton({href:'#one', 'data-rel':'back', className:'ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left'}, 'Back to page "one"') 173 | ); 174 | } 175 | }); 176 | 177 | // Render application. 178 | React.render(App(null), document.getElementById('content')); 179 | -------------------------------------------------------------------------------- /examples/requirejs/build/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | require(['build/example-component'], function(ExampleComponent){ 5 | "use strict"; 6 | 7 | React.renderComponent(ExampleComponent(null ), document.getElementById('container')); 8 | }); -------------------------------------------------------------------------------- /examples/requirejs/build/example-component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | define([], function () { 5 | "use strict"; 6 | 7 | var ExampleComponent = React.createClass({displayName: 'ExampleComponent', 8 | 9 | render:function(){ 10 | return React.DOM.div(null, "Simple RequireJS Example"); 11 | } 12 | 13 | }); 14 | 15 | return ExampleComponent; 16 | }); -------------------------------------------------------------------------------- /examples/server-rendering/README.md: -------------------------------------------------------------------------------- 1 | # React server rendering example 2 | 3 | This example demonstrates how React's server rendering works. Rather than demonstrate a pure-Node solution, this example shows how an app not written in JavaScript (in this case, PHP) can utilize React's server rendering capabilities. 4 | 5 | ## Overview 6 | 7 | You generally start a React app by doing something like this: 8 | 9 | ```javascript 10 | React.render(, document.getElementById('someContainer')); 11 | ``` 12 | 13 | The problem is that `someContainer` will be an empty HTML element until the JavaScript downloads and executes. This is bad for page load performance (since the user can't see anything until the JS downloads and executes) and is bad for SEO (since the Googlebot can't see any content). React's server rendering solves this problem -- it lets you fill `someContainer` with *static HTML* on the server and "bring it to life" on the client *without* throwing out and re-creating the HTML. 14 | 15 | In order to do this, you need to do a few things. You need to be able to run JavaScript on the server, and you need to be able to bundle that JavaScript code and send it down to the browser. This example provides one architecture, but there are many ways to do it. 16 | 17 | ## Architecture overview 18 | 19 | Let's augment an existing PHP app to support server rendering. This architecture runs an Express-based Node web service to run the JavaScript server side. PHP simply uses `file_get_contents()` to send an HTTP request to this service to get the static HTML string. 20 | 21 | Browserify is used to run the same code that Node.js is running inside of the browser (aka "isomorphic" JavaScript). 22 | 23 | ``` 24 | +-------------+ +------------------+ +----------------------+ 25 | | | | | ---- HTTP request (module, props JSON) ---> | | 26 | | The browser | <---> | Existing PHP App | | Node.js react server | 27 | | | | | <--- HTTP response (static HTML string) --- | | 28 | +------+------+ +------------------+ +----------------------+ 29 | ^ ^ 30 | | | 31 | | +------------------+ +-----------+----------+ 32 | | | | | | 33 | +--------------+ Browserify | <--------------------------------------------+ App code (CommonJS) | 34 | | | | | 35 | +------------------+ +----------------------+ 36 | ``` 37 | 38 | ## How to run the demo 39 | 40 | * `npm install` from `jsapp/` and `reactserver/`. 41 | * Run `browserify` by doing `npm run build` inside `jsapp/`. This will generate a `webapp/static/bundle.js` file. 42 | * Run the node server by doing `npm start` inside `reactserver/`. 43 | * Finally, open `index.php` in your browser (on a webserver running PHP, of course). View-source to see the rendered markup. 44 | * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work. 45 | -------------------------------------------------------------------------------- /examples/server-rendering/jsapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-js-app", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "dependencies": { 11 | "envify": "^3.0.0", 12 | "react": "^0.12.0", 13 | "browserify": "^3.38.0", 14 | "reactify": "^0.15.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/server-rendering/jsapp/src/App.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var App = React.createClass({ 4 | render: function() { 5 | return

Hello {this.props.name}!

; 6 | } 7 | }); 8 | 9 | module.exports = App; 10 | -------------------------------------------------------------------------------- /examples/server-rendering/reactserver/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-server", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "start": "cd ../jsapp && node ../reactserver/server.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "dependencies": { 11 | "envify": "^3.0.0", 12 | "react": "^0.12.0", 13 | "express": "^3.5.1", 14 | "node-jsx": "^0.12.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/server-rendering/reactserver/server.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var express = require('express'); 3 | var path = require('path'); 4 | 5 | // Transparently support JSX 6 | require('node-jsx').install(); 7 | 8 | var app = express(); 9 | 10 | // All the render server does is take a CommonJS module ID and some JSON props 11 | // in the querystring and return a static HTML representation of the component. 12 | // Note that this is a backend service hit by your actual web app. Even so, 13 | // you would probably put Varnish in front of this in production. 14 | app.get('/', function(req, res){ 15 | var component = require(path.resolve(req.query['module'])); 16 | var props = JSON.parse(req.query['props'] || '{}'); 17 | 18 | res.send(React.renderToString(component(props))); 19 | }); 20 | 21 | app.listen(3000); 22 | -------------------------------------------------------------------------------- /examples/server-rendering/webapp/index.php: -------------------------------------------------------------------------------- 1 | require(\'react\').render(require(' . 31 | json_encode($module) . 32 | ')(' . $props_json . '), ' . 33 | 'document.getElementById(' . json_encode($container_id) . '))' . 34 | ''; 35 | 36 | $container_markup = '
' . $server_markup . '
'; 37 | 38 | return $container_markup . $startup_code; 39 | } 40 | ?> 41 | 42 | 43 | 44 | React server rendering example 45 | 46 | 47 | 48 | Welcome to the React server rendering example. Here is a server-rendered React component: 49 | 'Pete')); ?> 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/shared/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fff; 3 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; 4 | font-size: 15px; 5 | line-height: 1.7; 6 | margin: 0; 7 | padding: 30px; 8 | } 9 | 10 | a { 11 | color: #4183c4; 12 | text-decoration: none; 13 | } 14 | 15 | a:hover { 16 | text-decoration: underline; 17 | } 18 | 19 | code { 20 | background-color: #f8f8f8; 21 | border: 1px solid #ddd; 22 | border-radius: 3px; 23 | font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 24 | font-size: 12px; 25 | margin: 0 2px; 26 | padding: 0px 5px; 27 | } 28 | 29 | h1, h2, h3, h4 { 30 | font-weight: bold; 31 | margin: 0 0 15px; 32 | padding: 0; 33 | } 34 | 35 | h1 { 36 | border-bottom: 1px solid #ddd; 37 | font-size: 2.5em; 38 | font-weight: bold; 39 | margin: 0 0 15px; 40 | padding: 0; 41 | } 42 | 43 | h2 { 44 | border-bottom: 1px solid #eee; 45 | font-size: 2em; 46 | } 47 | 48 | h3 { 49 | font-size: 1.5em; 50 | } 51 | 52 | h4 { 53 | font-size: 1.2em; 54 | } 55 | 56 | p, ul { 57 | margin: 15px 0; 58 | } 59 | 60 | ul { 61 | padding-left: 30px; 62 | } 63 | -------------------------------------------------------------------------------- /examples/shared/thirdparty/console-polyfill.js: -------------------------------------------------------------------------------- 1 | // Console-polyfill. MIT license. 2 | // https://github.com/paulmillr/console-polyfill 3 | // Make it safe to do console.log() always. 4 | (function(con) { 5 | 'use strict'; 6 | var prop, method; 7 | var empty = {}; 8 | var dummy = function() {}; 9 | var properties = 'memory'.split(','); 10 | var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' + 11 | 'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' + 12 | 'table,time,timeEnd,timeStamp,trace,warn').split(','); 13 | while (prop = properties.pop()) con[prop] = con[prop] || empty; 14 | while (method = methods.pop()) con[method] = con[method] || dummy; 15 | })(this.console = this.console || {}); // Using `this` for web workers. 16 | -------------------------------------------------------------------------------- /examples/shared/thirdparty/es5-sham.min.js: -------------------------------------------------------------------------------- 1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}}); 2 | //# sourceMappingURL=es5-sham.map -------------------------------------------------------------------------------- /examples/shared/thirdparty/es5-shim.min.js: -------------------------------------------------------------------------------- 1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5",definition)}else{definition()}})(function(){if(parseInt("08")!==8){parseInt=function(origParseInt){var hexRegex=/^0[xX]/;return function parseIntES5(str,radix){str=String(str).trim();if(!+radix){radix=hexRegex.test(str)?16:10}return origParseInt(str,radix)}}(parseInt)}function Empty(){}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError("Function.prototype.bind called on incompatible "+target)}var args=_Array_slice_.call(arguments,1);var binder=function(){if(this instanceof bound){var result=target.apply(this,args.concat(_Array_slice_.call(arguments)));if(Object(result)===result){return result}return this}else{return target.apply(that,args.concat(_Array_slice_.call(arguments)))}};var boundLength=Math.max(0,target.length-args.length);var boundArgs=[];for(var i=0;i0){if(deleteCount<=0){if(start==this.length){array_push.apply(this,args);return[]}if(start==0){array_unshift.apply(this,args);return[]}}result=_Array_slice_.call(this,start,start+deleteCount);args.push.apply(args,_Array_slice_.call(this,start+deleteCount,this.length));args.unshift.apply(args,_Array_slice_.call(this,0,start));args.unshift(0,this.length);array_splice.apply(this,args);return result}return array_splice.call(this,start,deleteCount)}}}if([].unshift(0)!=1){var array_unshift=Array.prototype.unshift;Array.prototype.unshift=function(){array_unshift.apply(this,arguments);return this.length}}if(!Array.isArray){Array.isArray=function isArray(obj){return _toString(obj)=="[object Array]"}}var boxedString=Object("a"),splitString=boxedString[0]!="a"||!(0 in boxedString);var boxedForEach=true;if(Array.prototype.forEach){Array.prototype.forEach.call("foo",function(item,i,obj){if(typeof obj!=="object")boxedForEach=false})}if(!Array.prototype.forEach||!boxedForEach){Array.prototype.forEach=function forEach(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,thisp=arguments[1],i=-1,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError}while(++i>>0,result=Array(length),thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,result=[],value,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduce of empty array with no initial value")}var i=0;var result;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i++];break}if(++i>=length){throw new TypeError("reduce of empty array with no initial value")}}while(true)}for(;i>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduceRight of empty array with no initial value")}var result,i=length-1;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i--];break}if(--i<0){throw new TypeError("reduceRight of empty array with no initial value")}}while(true)}if(i<0){return result}do{if(i in this){result=fun.call(void 0,result,self[i],i,object)}}while(i--);return result}}if(!Array.prototype.indexOf||[0,1].indexOf(1,2)!=-1){Array.prototype.indexOf=function indexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=0;if(arguments.length>1){i=toInteger(arguments[1])}i=i>=0?i:Math.max(0,length+i);for(;i>>0;if(!length){return-1}var i=length-1;if(arguments.length>1){i=Math.min(i,toInteger(arguments[1]))}i=i>=0?i:length-Math.abs(i);for(;i>=0;i--){if(i in self&&sought===self[i]){return i}}return-1}}if(!Object.keys){var hasDontEnumBug=true,dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],dontEnumsLength=dontEnums.length;for(var key in{toString:null}){hasDontEnumBug=false}Object.keys=function keys(object){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError("Object.keys called on a non-object")}var keys=[];for(var name in object){if(owns(object,name)){keys.push(name)}}if(hasDontEnumBug){for(var i=0,ii=dontEnumsLength;i9999?"+":"")+("00000"+Math.abs(year)).slice(0<=year&&year<=9999?-4:-6);length=result.length;while(length--){value=result[length];if(value<10){result[length]="0"+value}}return year+"-"+result.slice(0,2).join("-")+"T"+result.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+"Z"}}var dateToJSONIsSupported=false;try{dateToJSONIsSupported=Date.prototype.toJSON&&new Date(NaN).toJSON()===null&&new Date(negativeDate).toJSON().indexOf(negativeYearString)!==-1&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(e){}if(!dateToJSONIsSupported){Date.prototype.toJSON=function toJSON(key){var o=Object(this),tv=toPrimitive(o),toISO;if(typeof tv==="number"&&!isFinite(tv)){return null}toISO=o.toISOString;if(typeof toISO!="function"){throw new TypeError("toISOString property is not callable")}return toISO.call(o)}}if(!Date.parse||"Date.parse is buggy"){Date=function(NativeDate){function Date(Y,M,D,h,m,s,ms){var length=arguments.length;if(this instanceof NativeDate){var date=length==1&&String(Y)===Y?new NativeDate(Date.parse(Y)):length>=7?new NativeDate(Y,M,D,h,m,s,ms):length>=6?new NativeDate(Y,M,D,h,m,s):length>=5?new NativeDate(Y,M,D,h,m):length>=4?new NativeDate(Y,M,D,h):length>=3?new NativeDate(Y,M,D):length>=2?new NativeDate(Y,M):length>=1?new NativeDate(Y):new NativeDate;date.constructor=Date;return date}return NativeDate.apply(this,arguments)}var isoDateExpression=new RegExp("^"+"(\\d{4}|[+-]\\d{6})"+"(?:-(\\d{2})"+"(?:-(\\d{2})"+"(?:"+"T(\\d{2})"+":(\\d{2})"+"(?:"+":(\\d{2})"+"(?:(\\.\\d{1,}))?"+")?"+"("+"Z|"+"(?:"+"([-+])"+"(\\d{2})"+":(\\d{2})"+")"+")?)?)?)?"+"$");var months=[0,31,59,90,120,151,181,212,243,273,304,334,365];function dayFromMonth(year,month){var t=month>1?1:0;return months[month]+Math.floor((year-1969+t)/4)-Math.floor((year-1901+t)/100)+Math.floor((year-1601+t)/400)+365*(year-1970)}function toUTC(t){return Number(new NativeDate(1970,0,1,0,0,0,t))}for(var key in NativeDate){Date[key]=NativeDate[key]}Date.now=NativeDate.now;Date.UTC=NativeDate.UTC;Date.prototype=NativeDate.prototype;Date.prototype.constructor=Date;Date.parse=function parse(string){var match=isoDateExpression.exec(string);if(match){var year=Number(match[1]),month=Number(match[2]||1)-1,day=Number(match[3]||1)-1,hour=Number(match[4]||0),minute=Number(match[5]||0),second=Number(match[6]||0),millisecond=Math.floor(Number(match[7]||0)*1e3),isLocalTime=Boolean(match[4]&&!match[8]),signOffset=match[9]==="-"?1:-1,hourOffset=Number(match[10]||0),minuteOffset=Number(match[11]||0),result;if(hour<(minute>0||second>0||millisecond>0?24:25)&&minute<60&&second<60&&millisecond<1e3&&month>-1&&month<12&&hourOffset<24&&minuteOffset<60&&day>-1&&day=0){c+=data[i];data[i]=Math.floor(c/n);c=c%n*base}}function toString(){var i=size;var s="";while(--i>=0){if(s!==""||i===0||data[i]!==0){var t=String(data[i]);if(s===""){s=t}else{s+="0000000".slice(0,7-t.length)+t}}}return s}function pow(x,n,acc){return n===0?acc:n%2===1?pow(x,n-1,acc*x):pow(x*x,n/2,acc)}function log(x){var n=0;while(x>=4096){n+=12;x/=4096}while(x>=2){n+=1;x/=2}return n}Number.prototype.toFixed=function(fractionDigits){var f,x,s,m,e,z,j,k;f=Number(fractionDigits);f=f!==f?0:Math.floor(f);if(f<0||f>20){throw new RangeError("Number.toFixed called with invalid number of decimals")}x=Number(this);if(x!==x){return"NaN"}if(x<=-1e21||x>=1e21){return String(x)}s="";if(x<0){s="-";x=-x}m="0";if(x>1e-21){e=log(x*pow(2,69,1))-69;z=e<0?x*pow(2,-e,1):x/pow(2,e,1);z*=4503599627370496;e=52-e;if(e>0){multiply(0,z);j=f;while(j>=7){multiply(1e7,0);j-=7}multiply(pow(10,j,1),0);j=e-1;while(j>=23){divide(1<<23);j-=23}divide(1<0){k=m.length;if(k<=f){m=s+"0.0000000000000000000".slice(0,f-k+2)+m}else{m=s+m.slice(0,k-f)+"."+m.slice(k-f)}}else{m=s+m}return m}})()}var string_split=String.prototype.split;if("ab".split(/(?:ab)*/).length!==2||".".split(/(.?)(.?)/).length!==4||"tesst".split(/(s)*/)[1]==="t"||"".split(/.?/).length||".".split(/()()/).length>1){(function(){var compliantExecNpcg=/()??/.exec("")[1]===void 0;String.prototype.split=function(separator,limit){var string=this;if(separator===void 0&&limit===0)return[];if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return string_split.apply(this,arguments)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;string+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===void 0?-1>>>0:limit>>>0;while(match=separator.exec(string)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(string.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i1&&match.index=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===string.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(string.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output}})()}else if("0".split(void 0,0).length){String.prototype.split=function(separator,limit){if(separator===void 0&&limit===0)return[];return string_split.apply(this,arguments)}}if("".substr&&"0b".substr(-1)!=="b"){var string_substr=String.prototype.substr;String.prototype.substr=function(start,length){return string_substr.call(this,start<0?(start=this.length+start)<0?0:start:start,length)}}var ws=" \n \f\r \xa0\u1680\u180e\u2000\u2001\u2002\u2003"+"\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028"+"\u2029\ufeff";if(!String.prototype.trim||ws.trim()){ws="["+ws+"]";var trimBeginRegexp=new RegExp("^"+ws+ws+"*"),trimEndRegexp=new RegExp(ws+ws+"*$");String.prototype.trim=function trim(){if(this===void 0||this===null){throw new TypeError("can't convert "+this+" to object")}return String(this).replace(trimBeginRegexp,"").replace(trimEndRegexp,"")}}function toInteger(n){n=+n;if(n!==n){n=0}else if(n!==0&&n!==1/0&&n!==-(1/0)){n=(n>0||-1)*Math.floor(Math.abs(n))}return n}function isPrimitive(input){var type=typeof input;return input===null||type==="undefined"||type==="boolean"||type==="number"||type==="string"}function toPrimitive(input){var val,valueOf,toString;if(isPrimitive(input)){return input}valueOf=input.valueOf;if(typeof valueOf==="function"){val=valueOf.call(input);if(isPrimitive(val)){return val}}toString=input.toString;if(typeof toString==="function"){val=toString.call(input);if(isPrimitive(val)){return val}}throw new TypeError}var toObject=function(o){if(o==null){throw new TypeError("can't convert "+o+" to object")}return Object(o)}}); 2 | //# sourceMappingURL=es5-shim.map -------------------------------------------------------------------------------- /examples/transitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example with Transitions 6 | 7 | 8 | 9 | 10 |

Example with Transitions

11 |
12 |

13 | To install React, follow the instructions on 14 | GitHub. 15 |

16 |

17 | If you can see this, React is not working right. 18 | If you checked out the source from GitHub make sure to run grunt. 19 |

20 |
21 |

Example Details

22 |

This is written with JSX and transformed in the browser.

23 |

24 | Learn more about React at 25 | facebook.github.io/react. 26 |

27 | 28 | 29 | 30 | 31 | 32 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/transitions/transition.css: -------------------------------------------------------------------------------- 1 | .example-enter, 2 | .example-leave { 3 | -webkit-transition: all .25s; 4 | transition: all .25s; 5 | } 6 | 7 | .example-enter, 8 | .example-leave.example-leave-active { 9 | opacity: 0.01; 10 | } 11 | 12 | .example-leave.example-leave-active { 13 | margin-left: -128px; 14 | } 15 | 16 | .example-enter { 17 | margin-left: 128px; 18 | } 19 | 20 | .example-enter.example-enter-active, 21 | .example-leave { 22 | margin-left: 0; 23 | opacity: 1; 24 | } 25 | 26 | .animateExample { 27 | display: block; 28 | height: 128px; 29 | position: relative; 30 | width: 384px; 31 | } 32 | 33 | .animateItem { 34 | color: white; 35 | font-size: 36px; 36 | font-weight: bold; 37 | height: 128px; 38 | line-height: 128px; 39 | position: absolute; 40 | text-align: center; 41 | -webkit-transition: all .25s; /* TODO: make this a move animation */ 42 | transition: all .25s; /* TODO: make this a move animation */ 43 | width: 128px; 44 | } 45 | -------------------------------------------------------------------------------- /hello_world.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "example" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ," 10 | ReactDOM.render( 11 |

Hello, world!

, 12 | document.getElementById('example') 13 | ); 14 | " %>>% HTML 15 | ) 16 | ) %>>% 17 | attachDependencies(list( 18 | htmlDependency( 19 | name = "react" 20 | ,version = "0.14.8" 21 | ,src = c(paste0(getwd(),"/build")) 22 | ,script = c("react.min.js","react-dom.min.js") 23 | ) 24 | ,htmlDependency( 25 | name = "babel-browser" 26 | ,version = "5.8.23" 27 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 28 | ,script = c("browser.min.js") 29 | ) 30 | )) %>>% 31 | html_print 32 | 33 | 34 | # using reactR 35 | # devtools::install_github("timelyportfolio/reactR") 36 | 37 | library(reactR) 38 | library(htmltools) 39 | 40 | tagList( 41 | tags$div(id = "example") 42 | ,tags$script(babel_transform( 43 | " 44 | ReactDOM.render( 45 |

Hello, world!

, 46 | document.getElementById('example') 47 | ); 48 | " 49 | )) 50 | ) %>>% 51 | attachDependencies(html_dependency_react()) %>>% 52 | browsable() 53 | -------------------------------------------------------------------------------- /react-0.12.2.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: XeLaTeX 14 | -------------------------------------------------------------------------------- /react_tutorial_in_R.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: XeLaTeX 14 | -------------------------------------------------------------------------------- /tutorial1.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial1.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 | Hello, world! I am a CommentBox. 16 |
17 | ); 18 | } 19 | }); 20 | ReactDOM.render( 21 | , 22 | document.getElementById("content") 23 | ); 24 | ' %>>% HTML 25 | ) 26 | ) %>>% 27 | attachDependencies(list( 28 | htmlDependency( 29 | name = "react" 30 | ,version = "0.14.8" 31 | ,src = c(paste0(getwd(),"/build")) 32 | ,script = c("react.min.js","react-dom.min.js") 33 | ) 34 | ,htmlDependency( 35 | name = "babel-browser" 36 | ,version = "5.8.23" 37 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 38 | ,script = c("browser.min.js") 39 | ) 40 | ,htmlDependency( 41 | name = "jquery" 42 | ,version = "2.2.0" 43 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 44 | ,script = c("jquery.min.js") 45 | ) 46 | ,htmlDependency( 47 | name = "marked" 48 | ,version = "0.3.5" 49 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 50 | ,script = c("marked.min.js") 51 | ) 52 | )) %>>% 53 | html_print 54 | 55 | 56 | # use reactR -------------------------------------------------------------- 57 | library(htmltools) 58 | library(reactR) 59 | 60 | tagList( 61 | tags$div(id = "content"), 62 | tags$script(babel_transform( 63 | ' 64 | // tutorial1.js 65 | var CommentBox = React.createClass({ 66 | render: function() { 67 | return ( 68 |
69 | Hello, world! I am a CommentBox. 70 |
71 | ); 72 | } 73 | }); 74 | ReactDOM.render( 75 | , 76 | document.getElementById("content") 77 | ); 78 | ' 79 | )) 80 | ) %>>% 81 | attachDependencies(list( 82 | html_dependency_react(), 83 | htmlDependency( 84 | name = "jquery" 85 | ,version = "2.2.0" 86 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 87 | ,script = c("jquery.min.js") 88 | ), 89 | htmlDependency( 90 | name = "marked" 91 | ,version = "0.3.5" 92 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 93 | ,script = c("marked.min.js") 94 | ) 95 | )) %>>% 96 | browsable() 97 | 98 | -------------------------------------------------------------------------------- /tutorial10.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial9.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial10.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | var commentNodes = this.props.data.map(function(comment){ 27 | return ( 28 | 29 | {comment.text} 30 | 31 | ) 32 | }); 33 | return ( 34 |
35 | {commentNodes} 36 |
37 | ); 38 | } 39 | }); 40 | 41 | var CommentForm = React.createClass({ 42 | render: function() { 43 | return ( 44 |
45 | Hello, world! I am a CommentForm. 46 |
47 | ); 48 | } 49 | }); 50 | 51 | // tutorial7.js 52 | var Comment = React.createClass({ 53 | rawMarkup: function() { 54 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 55 | return { __html: rawMarkup }; 56 | }, 57 | 58 | render: function() { 59 | return ( 60 |
61 |

62 | {this.props.author} 63 |

64 | 65 |
66 | ); 67 | } 68 | }); 69 | 70 | // tutorial8.js 71 | var data = [ 72 | {author: "Pete Hunt", text: "This is one comment"}, 73 | {author: "Jordan Walke", text: "This is *another* comment"} 74 | ]; 75 | 76 | ReactDOM.render( 77 | , 78 | document.getElementById("content") 79 | ); 80 | 81 | ' %>>% HTML 82 | ) 83 | ) %>>% 84 | attachDependencies(list( 85 | htmlDependency( 86 | name = "react" 87 | ,version = "0.14.8" 88 | ,src = c(paste0(getwd(),"/build")) 89 | ,script = c("react.min.js","react-dom.min.js") 90 | ) 91 | ,htmlDependency( 92 | name = "babel-browser" 93 | ,version = "5.8.23" 94 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 95 | ,script = c("browser.min.js") 96 | ) 97 | ,htmlDependency( 98 | name = "jquery" 99 | ,version = "2.2.0" 100 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 101 | ,script = c("jquery.min.js") 102 | ) 103 | ,htmlDependency( 104 | name = "marked" 105 | ,version = "0.3.5" 106 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 107 | ,script = c("marked.min.js") 108 | ) 109 | )) %>>% 110 | html_print 111 | 112 | 113 | 114 | # use reactR -------------------------------------------------------------- 115 | library(htmltools) 116 | library(reactR) 117 | 118 | tagList( 119 | tags$div(id = "content"), 120 | tags$script(babel_transform( 121 | '// tutorial9.js 122 | var CommentBox = React.createClass({ 123 | render: function() { 124 | return ( 125 |
126 |

Comments

127 | 128 | 129 |
130 | ); 131 | } 132 | }); 133 | 134 | // tutorial10.js 135 | var CommentList = React.createClass({ 136 | render: function() { 137 | var commentNodes = this.props.data.map(function(comment){ 138 | return ( 139 | 140 | {comment.text} 141 | 142 | ) 143 | }); 144 | return ( 145 |
146 | {commentNodes} 147 |
148 | ); 149 | } 150 | }); 151 | 152 | var CommentForm = React.createClass({ 153 | render: function() { 154 | return ( 155 |
156 | Hello, world! I am a CommentForm. 157 |
158 | ); 159 | } 160 | }); 161 | 162 | // tutorial7.js 163 | var Comment = React.createClass({ 164 | rawMarkup: function() { 165 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 166 | return { __html: rawMarkup }; 167 | }, 168 | 169 | render: function() { 170 | return ( 171 |
172 |

173 | {this.props.author} 174 |

175 | 176 |
177 | ); 178 | } 179 | }); 180 | 181 | // tutorial8.js 182 | var data = [ 183 | {author: "Pete Hunt", text: "This is one comment"}, 184 | {author: "Jordan Walke", text: "This is *another* comment"} 185 | ]; 186 | 187 | ReactDOM.render( 188 | , 189 | document.getElementById("content") 190 | ); 191 | ' 192 | )) 193 | ) %>>% 194 | attachDependencies(list( 195 | html_dependency_react(), 196 | htmlDependency( 197 | name = "jquery" 198 | ,version = "2.2.0" 199 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 200 | ,script = c("jquery.min.js") 201 | ), 202 | htmlDependency( 203 | name = "marked" 204 | ,version = "0.3.5" 205 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 206 | ,script = c("marked.min.js") 207 | ) 208 | )) %>>% 209 | browsable() 210 | 211 | -------------------------------------------------------------------------------- /tutorial11.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial9.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial10.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | var commentNodes = this.props.data.map(function(comment){ 27 | return ( 28 | 29 | {comment.text} 30 | 31 | ) 32 | }); 33 | return ( 34 |
35 | {commentNodes} 36 |
37 | ); 38 | } 39 | }); 40 | 41 | var CommentForm = React.createClass({ 42 | render: function() { 43 | return ( 44 |
45 | Hello, world! I am a CommentForm. 46 |
47 | ); 48 | } 49 | }); 50 | 51 | // tutorial7.js 52 | var Comment = React.createClass({ 53 | rawMarkup: function() { 54 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 55 | return { __html: rawMarkup }; 56 | }, 57 | 58 | render: function() { 59 | return ( 60 |
61 |

62 | {this.props.author} 63 |

64 | 65 |
66 | ); 67 | } 68 | }); 69 | 70 | // tutorial8.js 71 | var data = [ 72 | {author: "Pete Hunt", text: "This is one comment"}, 73 | {author: "Jordan Walke", text: "This is *another* comment"} 74 | ]; 75 | 76 | // tutorial11.js 77 | ReactDOM.render( 78 | , 79 | document.getElementById("content") 80 | ); 81 | 82 | ' %>>% HTML 83 | ) 84 | ) %>>% 85 | attachDependencies(list( 86 | htmlDependency( 87 | name = "react" 88 | ,version = "0.14.8" 89 | ,src = c(paste0(getwd(),"/build")) 90 | ,script = c("react.min.js","react-dom.min.js") 91 | ) 92 | ,htmlDependency( 93 | name = "babel-browser" 94 | ,version = "5.8.23" 95 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 96 | ,script = c("browser.min.js") 97 | ) 98 | ,htmlDependency( 99 | name = "jquery" 100 | ,version = "2.2.0" 101 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 102 | ,script = c("jquery.min.js") 103 | ) 104 | ,htmlDependency( 105 | name = "marked" 106 | ,version = "0.3.5" 107 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 108 | ,script = c("marked.min.js") 109 | ) 110 | )) %>>% 111 | html_print -------------------------------------------------------------------------------- /tutorial12.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial12.js 11 | var CommentBox = React.createClass({ 12 | getInitialState: function() { 13 | return {data: []}; 14 | }, 15 | render: function() { 16 | return ( 17 |
18 |

Comments

19 | 20 | 21 |
22 | ); 23 | } 24 | }); 25 | 26 | // tutorial10.js 27 | var CommentList = React.createClass({ 28 | render: function() { 29 | var commentNodes = this.props.data.map(function(comment){ 30 | return ( 31 | 32 | {comment.text} 33 | 34 | ) 35 | }); 36 | return ( 37 |
38 | {commentNodes} 39 |
40 | ); 41 | } 42 | }); 43 | 44 | var CommentForm = React.createClass({ 45 | render: function() { 46 | return ( 47 |
48 | Hello, world! I am a CommentForm. 49 |
50 | ); 51 | } 52 | }); 53 | 54 | // tutorial7.js 55 | var Comment = React.createClass({ 56 | rawMarkup: function() { 57 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 58 | return { __html: rawMarkup }; 59 | }, 60 | 61 | render: function() { 62 | return ( 63 |
64 |

65 | {this.props.author} 66 |

67 | 68 |
69 | ); 70 | } 71 | }); 72 | 73 | // tutorial8.js 74 | var data = [ 75 | {author: "Pete Hunt", text: "This is one comment"}, 76 | {author: "Jordan Walke", text: "This is *another* comment"} 77 | ]; 78 | 79 | // tutorial11.js 80 | ReactDOM.render( 81 | , 82 | document.getElementById("content") 83 | ); 84 | 85 | ' %>>% HTML 86 | ) 87 | ) %>>% 88 | attachDependencies(list( 89 | htmlDependency( 90 | name = "react" 91 | ,version = "0.14.8" 92 | ,src = c(paste0(getwd(),"/build")) 93 | ,script = c("react.min.js","react-dom.min.js") 94 | ) 95 | ,htmlDependency( 96 | name = "babel-browser" 97 | ,version = "5.8.23" 98 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 99 | ,script = c("browser.min.js") 100 | ) 101 | ,htmlDependency( 102 | name = "jquery" 103 | ,version = "2.2.0" 104 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 105 | ,script = c("jquery.min.js") 106 | ) 107 | ,htmlDependency( 108 | name = "marked" 109 | ,version = "0.3.5" 110 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 111 | ,script = c("marked.min.js") 112 | ) 113 | )) %>>% 114 | html_print 115 | 116 | 117 | # use reactR -------------------------------------------------------------- 118 | library(htmltools) 119 | library(reactR) 120 | 121 | tagList( 122 | tags$div(id = "content"), 123 | tags$script(babel_transform( 124 | '// tutorial12.js 125 | var CommentBox = React.createClass({ 126 | getInitialState: function() { 127 | return {data: []}; 128 | }, 129 | render: function() { 130 | return ( 131 |
132 |

Comments

133 | 134 | 135 |
136 | ); 137 | } 138 | }); 139 | 140 | // tutorial10.js 141 | var CommentList = React.createClass({ 142 | render: function() { 143 | var commentNodes = this.props.data.map(function(comment){ 144 | return ( 145 | 146 | {comment.text} 147 | 148 | ) 149 | }); 150 | return ( 151 |
152 | {commentNodes} 153 |
154 | ); 155 | } 156 | }); 157 | 158 | var CommentForm = React.createClass({ 159 | render: function() { 160 | return ( 161 |
162 | Hello, world! I am a CommentForm. 163 |
164 | ); 165 | } 166 | }); 167 | 168 | // tutorial7.js 169 | var Comment = React.createClass({ 170 | rawMarkup: function() { 171 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 172 | return { __html: rawMarkup }; 173 | }, 174 | 175 | render: function() { 176 | return ( 177 |
178 |

179 | {this.props.author} 180 |

181 | 182 |
183 | ); 184 | } 185 | }); 186 | 187 | // tutorial8.js 188 | var data = [ 189 | {author: "Pete Hunt", text: "This is one comment"}, 190 | {author: "Jordan Walke", text: "This is *another* comment"} 191 | ]; 192 | 193 | // tutorial11.js 194 | ReactDOM.render( 195 | , 196 | document.getElementById("content") 197 | ); 198 | ' 199 | )) 200 | ) %>>% 201 | attachDependencies(list( 202 | html_dependency_react(), 203 | htmlDependency( 204 | name = "jquery" 205 | ,version = "2.2.0" 206 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 207 | ,script = c("jquery.min.js") 208 | ), 209 | htmlDependency( 210 | name = "marked" 211 | ,version = "0.3.5" 212 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 213 | ,script = c("marked.min.js") 214 | ) 215 | )) %>>% 216 | browsable() 217 | 218 | -------------------------------------------------------------------------------- /tutorial13.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial13.js 11 | var CommentBox = React.createClass({ 12 | getInitialState: function() { 13 | return {data: []}; 14 | }, 15 | componentDidMount: function() { 16 | $.ajax({ 17 | this.props.url, 18 | dataType: "json", 19 | cache: false, 20 | success: function(data) { 21 | this.setState({data: data}); 22 | }.bind(this), 23 | error: function(xhr, status, err) { 24 | console.error(this.props.url, status, err.toString()); 25 | }.bind(this) 26 | }) 27 | }, 28 | render: function() { 29 | return ( 30 |
31 |

Comments

32 | 33 | 34 |
35 | ); 36 | } 37 | }); 38 | 39 | // tutorial10.js 40 | var CommentList = React.createClass({ 41 | render: function() { 42 | var commentNodes = this.props.data.map(function(comment){ 43 | return ( 44 | 45 | {comment.text} 46 | 47 | ) 48 | }); 49 | return ( 50 |
51 | {commentNodes} 52 |
53 | ); 54 | } 55 | }); 56 | 57 | var CommentForm = React.createClass({ 58 | render: function() { 59 | return ( 60 |
61 | Hello, world! I am a CommentForm. 62 |
63 | ); 64 | } 65 | }); 66 | 67 | // tutorial7.js 68 | var Comment = React.createClass({ 69 | rawMarkup: function() { 70 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 71 | return { __html: rawMarkup }; 72 | }, 73 | 74 | render: function() { 75 | return ( 76 |
77 |

78 | {this.props.author} 79 |

80 | 81 |
82 | ); 83 | } 84 | }); 85 | 86 | // tutorial8.js 87 | var data = [ 88 | {author: "Pete Hunt", text: "This is one comment"}, 89 | {author: "Jordan Walke", text: "This is *another* comment"} 90 | ]; 91 | 92 | // tutorial11.js 93 | ReactDOM.render( 94 | , 95 | document.getElementById("content") 96 | ); 97 | 98 | ' %>>% HTML 99 | ) 100 | ) %>>% 101 | attachDependencies(list( 102 | htmlDependency( 103 | name = "react" 104 | ,version = "0.14.8" 105 | ,src = c(paste0(getwd(),"/build")) 106 | ,script = c("react.min.js","react-dom.min.js") 107 | ) 108 | ,htmlDependency( 109 | name = "babel-browser" 110 | ,version = "5.8.23" 111 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 112 | ,script = c("browser.min.js") 113 | ) 114 | ,htmlDependency( 115 | name = "jquery" 116 | ,version = "2.2.0" 117 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 118 | ,script = c("jquery.min.js") 119 | ) 120 | ,htmlDependency( 121 | name = "marked" 122 | ,version = "0.3.5" 123 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 124 | ,script = c("marked.min.js") 125 | ) 126 | )) %>>% 127 | html_print 128 | 129 | 130 | # use reactR -------------------------------------------------------------- 131 | library(htmltools) 132 | library(reactR) 133 | 134 | tagList( 135 | tags$div(id = "content"), 136 | tags$script(babel_transform( 137 | '// tutorial13.js 138 | var CommentBox = React.createClass({ 139 | getInitialState: function() { 140 | return {data: []}; 141 | }, 142 | componentDidMount: function() { 143 | $.ajax({ 144 | this.props.url, 145 | dataType: "json", 146 | cache: false, 147 | success: function(data) { 148 | this.setState({data: data}); 149 | }.bind(this), 150 | error: function(xhr, status, err) { 151 | console.error(this.props.url, status, err.toString()); 152 | }.bind(this) 153 | }) 154 | }, 155 | render: function() { 156 | return ( 157 |
158 |

Comments

159 | 160 | 161 |
162 | ); 163 | } 164 | }); 165 | 166 | // tutorial10.js 167 | var CommentList = React.createClass({ 168 | render: function() { 169 | var commentNodes = this.props.data.map(function(comment){ 170 | return ( 171 | 172 | {comment.text} 173 | 174 | ) 175 | }); 176 | return ( 177 |
178 | {commentNodes} 179 |
180 | ); 181 | } 182 | }); 183 | 184 | var CommentForm = React.createClass({ 185 | render: function() { 186 | return ( 187 |
188 | Hello, world! I am a CommentForm. 189 |
190 | ); 191 | } 192 | }); 193 | 194 | // tutorial7.js 195 | var Comment = React.createClass({ 196 | rawMarkup: function() { 197 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 198 | return { __html: rawMarkup }; 199 | }, 200 | 201 | render: function() { 202 | return ( 203 |
204 |

205 | {this.props.author} 206 |

207 | 208 |
209 | ); 210 | } 211 | }); 212 | 213 | // tutorial8.js 214 | var data = [ 215 | {author: "Pete Hunt", text: "This is one comment"}, 216 | {author: "Jordan Walke", text: "This is *another* comment"} 217 | ]; 218 | 219 | // tutorial11.js 220 | ReactDOM.render( 221 | , 222 | document.getElementById("content") 223 | ); 224 | ' 225 | )) 226 | ) %>>% 227 | attachDependencies(list( 228 | html_dependency_react(), 229 | htmlDependency( 230 | name = "jquery" 231 | ,version = "2.2.0" 232 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 233 | ,script = c("jquery.min.js") 234 | ), 235 | htmlDependency( 236 | name = "marked" 237 | ,version = "0.3.5" 238 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 239 | ,script = c("marked.min.js") 240 | ) 241 | )) %>>% 242 | browsable() 243 | 244 | -------------------------------------------------------------------------------- /tutorial14.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial14.js 11 | var CommentBox = React.createClass({ 12 | loadCommentsFromServer: function() { 13 | $.ajax({ 14 | url: this.props.url, 15 | dataType: "json", 16 | success: function(data) { 17 | this.setState({data: data}); 18 | }.bind(this), 19 | error: function(xhr, status, err) { 20 | console.error(this.props.url, status, err.toString()); 21 | }.bind(this) 22 | }); 23 | }, 24 | getInitialState: function() { 25 | return {data: []}; 26 | }, 27 | componentDidMount: function() { 28 | this.loadCommentsFromServer(); 29 | setInterval(this.loadCommentsFromServer, this.props.pollInterval); 30 | }, 31 | render: function() { 32 | return ( 33 |
34 |

Comments

35 | 36 | 37 |
38 | ); 39 | } 40 | }); 41 | 42 | // tutorial10.js 43 | var CommentList = React.createClass({ 44 | render: function() { 45 | var commentNodes = this.props.data.map(function(comment){ 46 | return ( 47 | 48 | {comment.text} 49 | 50 | ) 51 | }); 52 | return ( 53 |
54 | {commentNodes} 55 |
56 | ); 57 | } 58 | }); 59 | 60 | var CommentForm = React.createClass({ 61 | render: function() { 62 | return ( 63 |
64 | Hello, world! I am a CommentForm. 65 |
66 | ); 67 | } 68 | }); 69 | 70 | // tutorial7.js 71 | var Comment = React.createClass({ 72 | rawMarkup: function() { 73 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 74 | return { __html: rawMarkup }; 75 | }, 76 | 77 | render: function() { 78 | return ( 79 |
80 |

81 | {this.props.author} 82 |

83 | 84 |
85 | ); 86 | } 87 | }); 88 | 89 | // tutorial8.js 90 | var data = [ 91 | {author: "Pete Hunt", text: "This is one comment"}, 92 | {author: "Jordan Walke", text: "This is *another* comment"} 93 | ]; 94 | 95 | // tutorial14.js 96 | ReactDOM.render( 97 | , 98 | document.getElementById("content") 99 | ); 100 | 101 | ' %>>% HTML 102 | ) 103 | ) %>>% 104 | attachDependencies(list( 105 | htmlDependency( 106 | name = "react" 107 | ,version = "0.14.8" 108 | ,src = c(paste0(getwd(),"/build")) 109 | ,script = c("react.min.js","react-dom.min.js") 110 | ) 111 | ,htmlDependency( 112 | name = "babel-browser" 113 | ,version = "5.8.23" 114 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 115 | ,script = c("browser.min.js") 116 | ) 117 | ,htmlDependency( 118 | name = "jquery" 119 | ,version = "2.2.0" 120 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 121 | ,script = c("jquery.min.js") 122 | ) 123 | ,htmlDependency( 124 | name = "marked" 125 | ,version = "0.3.5" 126 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 127 | ,script = c("marked.min.js") 128 | ) 129 | )) %>>% 130 | html_print 131 | 132 | 133 | 134 | # use reactR -------------------------------------------------------------- 135 | library(htmltools) 136 | library(reactR) 137 | 138 | tagList( 139 | tags$div(id = "content"), 140 | tags$script(babel_transform( 141 | '// tutorial14.js 142 | var CommentBox = React.createClass({ 143 | loadCommentsFromServer: function() { 144 | $.ajax({ 145 | url: this.props.url, 146 | dataType: "json", 147 | success: function(data) { 148 | this.setState({data: data}); 149 | }.bind(this), 150 | error: function(xhr, status, err) { 151 | console.error(this.props.url, status, err.toString()); 152 | }.bind(this) 153 | }); 154 | }, 155 | getInitialState: function() { 156 | return {data: []}; 157 | }, 158 | componentDidMount: function() { 159 | this.loadCommentsFromServer(); 160 | setInterval(this.loadCommentsFromServer, this.props.pollInterval); 161 | }, 162 | render: function() { 163 | return ( 164 |
165 |

Comments

166 | 167 | 168 |
169 | ); 170 | } 171 | }); 172 | 173 | // tutorial10.js 174 | var CommentList = React.createClass({ 175 | render: function() { 176 | var commentNodes = this.props.data.map(function(comment){ 177 | return ( 178 | 179 | {comment.text} 180 | 181 | ) 182 | }); 183 | return ( 184 |
185 | {commentNodes} 186 |
187 | ); 188 | } 189 | }); 190 | 191 | var CommentForm = React.createClass({ 192 | render: function() { 193 | return ( 194 |
195 | Hello, world! I am a CommentForm. 196 |
197 | ); 198 | } 199 | }); 200 | 201 | // tutorial7.js 202 | var Comment = React.createClass({ 203 | rawMarkup: function() { 204 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 205 | return { __html: rawMarkup }; 206 | }, 207 | 208 | render: function() { 209 | return ( 210 |
211 |

212 | {this.props.author} 213 |

214 | 215 |
216 | ); 217 | } 218 | }); 219 | 220 | // tutorial8.js 221 | var data = [ 222 | {author: "Pete Hunt", text: "This is one comment"}, 223 | {author: "Jordan Walke", text: "This is *another* comment"} 224 | ]; 225 | 226 | // tutorial14.js 227 | ReactDOM.render( 228 | , 229 | document.getElementById("content") 230 | ); 231 | ' 232 | )) 233 | ) %>>% 234 | attachDependencies(list( 235 | html_dependency_react(), 236 | htmlDependency( 237 | name = "jquery" 238 | ,version = "2.2.0" 239 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 240 | ,script = c("jquery.min.js") 241 | ), 242 | htmlDependency( 243 | name = "marked" 244 | ,version = "0.3.5" 245 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 246 | ,script = c("marked.min.js") 247 | ) 248 | )) %>>% 249 | browsable() 250 | 251 | -------------------------------------------------------------------------------- /tutorial2.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial1.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 | Hello, world! I am a CommentBox. 16 |
17 | ); 18 | } 19 | }); 20 | 21 | // tutorial2.js 22 | var CommentList = React.createClass({ 23 | render: function() { 24 | return ( 25 |
26 | Hello, world! I am a CommentList. 27 |
28 | ); 29 | } 30 | }); 31 | 32 | var CommentForm = React.createClass({ 33 | render: function() { 34 | return ( 35 |
36 | Hello, world! I am a CommentForm. 37 |
38 | ); 39 | } 40 | }); 41 | 42 | ReactDOM.render( 43 | , 44 | document.getElementById("content") 45 | ); 46 | ' %>>% HTML 47 | ) 48 | ) %>>% 49 | attachDependencies(list( 50 | htmlDependency( 51 | name = "react" 52 | ,version = "0.14.8" 53 | ,src = c(paste0(getwd(),"/build")) 54 | ,script = c("react.min.js","react-dom.min.js") 55 | ) 56 | ,htmlDependency( 57 | name = "babel-browser" 58 | ,version = "5.8.23" 59 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 60 | ,script = c("browser.min.js") 61 | ) 62 | ,htmlDependency( 63 | name = "jquery" 64 | ,version = "2.2.0" 65 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 66 | ,script = c("jquery.min.js") 67 | ) 68 | ,htmlDependency( 69 | name = "marked" 70 | ,version = "0.3.5" 71 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 72 | ,script = c("marked.min.js") 73 | ) 74 | )) %>>% 75 | html_print 76 | 77 | 78 | # use reactR -------------------------------------------------------------- 79 | library(htmltools) 80 | library(reactR) 81 | 82 | tagList( 83 | tags$div(id = "content"), 84 | tags$script(babel_transform( 85 | ' 86 | // tutorial1.js 87 | var CommentBox = React.createClass({ 88 | render: function() { 89 | return ( 90 |
91 | Hello, world! I am a CommentBox. 92 |
93 | ); 94 | } 95 | }); 96 | 97 | // tutorial2.js 98 | var CommentList = React.createClass({ 99 | render: function() { 100 | return ( 101 |
102 | Hello, world! I am a CommentList. 103 |
104 | ); 105 | } 106 | }); 107 | 108 | var CommentForm = React.createClass({ 109 | render: function() { 110 | return ( 111 |
112 | Hello, world! I am a CommentForm. 113 |
114 | ); 115 | } 116 | }); 117 | 118 | ReactDOM.render( 119 | , 120 | document.getElementById("content") 121 | ); 122 | ' 123 | )) 124 | ) %>>% 125 | attachDependencies(list( 126 | html_dependency_react(), 127 | htmlDependency( 128 | name = "jquery" 129 | ,version = "2.2.0" 130 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 131 | ,script = c("jquery.min.js") 132 | ), 133 | htmlDependency( 134 | name = "marked" 135 | ,version = "0.3.5" 136 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 137 | ,script = c("marked.min.js") 138 | ) 139 | )) %>>% 140 | browsable() 141 | 142 | -------------------------------------------------------------------------------- /tutorial3.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial3.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial2.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | Hello, world! I am a CommentList. 29 |
30 | ); 31 | } 32 | }); 33 | 34 | var CommentForm = React.createClass({ 35 | render: function() { 36 | return ( 37 |
38 | Hello, world! I am a CommentForm. 39 |
40 | ); 41 | } 42 | }); 43 | 44 | ReactDOM.render( 45 | , 46 | document.getElementById("content") 47 | ); 48 | 49 | ' %>>% HTML 50 | ) 51 | ) %>>% 52 | attachDependencies(list( 53 | htmlDependency( 54 | name = "react" 55 | ,version = "0.14.8" 56 | ,src = c(paste0(getwd(),"/build")) 57 | ,script = c("react.min.js","react-dom.min.js") 58 | ) 59 | ,htmlDependency( 60 | name = "babel-browser" 61 | ,version = "5.8.23" 62 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 63 | ,script = c("browser.min.js") 64 | ) 65 | ,htmlDependency( 66 | name = "jquery" 67 | ,version = "2.2.0" 68 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 69 | ,script = c("jquery.min.js") 70 | ) 71 | ,htmlDependency( 72 | name = "marked" 73 | ,version = "0.3.5" 74 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 75 | ,script = c("marked.min.js") 76 | ) 77 | )) %>>% 78 | html_print 79 | 80 | 81 | # use reactR -------------------------------------------------------------- 82 | library(htmltools) 83 | library(reactR) 84 | 85 | tagList( 86 | tags$div(id = "content"), 87 | tags$script(babel_transform( 88 | ' 89 | // tutorial3.js 90 | var CommentBox = React.createClass({ 91 | render: function() { 92 | return ( 93 |
94 |

Comments

95 | 96 | 97 |
98 | ); 99 | } 100 | }); 101 | 102 | // tutorial2.js 103 | var CommentList = React.createClass({ 104 | render: function() { 105 | return ( 106 |
107 | Hello, world! I am a CommentList. 108 |
109 | ); 110 | } 111 | }); 112 | 113 | var CommentForm = React.createClass({ 114 | render: function() { 115 | return ( 116 |
117 | Hello, world! I am a CommentForm. 118 |
119 | ); 120 | } 121 | }); 122 | 123 | ReactDOM.render( 124 | , 125 | document.getElementById("content") 126 | ); 127 | ' 128 | 129 | )) 130 | ) %>>% 131 | attachDependencies(list( 132 | html_dependency_react(), 133 | htmlDependency( 134 | name = "jquery" 135 | ,version = "2.2.0" 136 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 137 | ,script = c("jquery.min.js") 138 | ), 139 | htmlDependency( 140 | name = "marked" 141 | ,version = "0.3.5" 142 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 143 | ,script = c("marked.min.js") 144 | ) 145 | )) %>>% 146 | browsable() 147 | 148 | -------------------------------------------------------------------------------- /tutorial4.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial3.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial4.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | This is one comment 29 | This is *another* comment 30 |
31 | ); 32 | } 33 | }); 34 | 35 | var CommentForm = React.createClass({ 36 | render: function() { 37 | return ( 38 |
39 | Hello, world! I am a CommentForm. 40 |
41 | ); 42 | } 43 | }); 44 | 45 | // tutorial5.js 46 | var Comment = React.createClass({ 47 | render: function() { 48 | return ( 49 |
50 |

51 | {this.props.author} 52 |

53 | {this.props.children} 54 |
55 | ); 56 | } 57 | }); 58 | 59 | ReactDOM.render( 60 | , 61 | document.getElementById("content") 62 | ); 63 | 64 | ' %>>% HTML 65 | ) 66 | ) %>>% 67 | attachDependencies(list( 68 | htmlDependency( 69 | name = "react" 70 | ,version = "0.14.8" 71 | ,src = c(paste0(getwd(),"/build")) 72 | ,script = c("react.min.js","react-dom.min.js") 73 | ) 74 | ,htmlDependency( 75 | name = "babel-browser" 76 | ,version = "5.8.23" 77 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 78 | ,script = c("browser.min.js") 79 | ) 80 | ,htmlDependency( 81 | name = "jquery" 82 | ,version = "2.2.0" 83 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 84 | ,script = c("jquery.min.js") 85 | ) 86 | ,htmlDependency( 87 | name = "marked" 88 | ,version = "0.3.5" 89 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 90 | ,script = c("marked.min.js") 91 | ) 92 | )) %>>% 93 | html_print 94 | 95 | 96 | # use reactR -------------------------------------------------------------- 97 | library(htmltools) 98 | library(reactR) 99 | 100 | tagList( 101 | tags$div(id = "content"), 102 | tags$script(babel_transform( 103 | '// tutorial3.js 104 | var CommentBox = React.createClass({ 105 | render: function() { 106 | return ( 107 |
108 |

Comments

109 | 110 | 111 |
112 | ); 113 | } 114 | }); 115 | 116 | // tutorial4.js 117 | var CommentList = React.createClass({ 118 | render: function() { 119 | return ( 120 |
121 | This is one comment 122 | This is *another* comment 123 |
124 | ); 125 | } 126 | }); 127 | 128 | var CommentForm = React.createClass({ 129 | render: function() { 130 | return ( 131 |
132 | Hello, world! I am a CommentForm. 133 |
134 | ); 135 | } 136 | }); 137 | 138 | // tutorial5.js 139 | var Comment = React.createClass({ 140 | render: function() { 141 | return ( 142 |
143 |

144 | {this.props.author} 145 |

146 | {this.props.children} 147 |
148 | ); 149 | } 150 | }); 151 | 152 | ReactDOM.render( 153 | , 154 | document.getElementById("content") 155 | );' 156 | )) 157 | ) %>>% 158 | attachDependencies(list( 159 | html_dependency_react(), 160 | htmlDependency( 161 | name = "jquery" 162 | ,version = "2.2.0" 163 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 164 | ,script = c("jquery.min.js") 165 | ), 166 | htmlDependency( 167 | name = "marked" 168 | ,version = "0.3.5" 169 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 170 | ,script = c("marked.min.js") 171 | ) 172 | )) %>>% 173 | browsable() 174 | 175 | -------------------------------------------------------------------------------- /tutorial5.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial3.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial4.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | This is one comment 29 | This is *another* comment 30 |
31 | ); 32 | } 33 | }); 34 | 35 | var CommentForm = React.createClass({ 36 | render: function() { 37 | return ( 38 |
39 | Hello, world! I am a CommentForm. 40 |
41 | ); 42 | } 43 | }); 44 | 45 | // tutorial5.js 46 | var Comment = React.createClass({ 47 | render: function() { 48 | return ( 49 |
50 |

51 | {this.props.author} 52 |

53 | {this.props.children} 54 |
55 | ); 56 | } 57 | }); 58 | 59 | ReactDOM.render( 60 | , 61 | document.getElementById("content") 62 | ); 63 | 64 | ' %>>% HTML 65 | ) 66 | ) %>>% 67 | attachDependencies(list( 68 | htmlDependency( 69 | name = "react" 70 | ,version = "0.14.8" 71 | ,src = c(paste0(getwd(),"/build")) 72 | ,script = c("react.min.js","react-dom.min.js") 73 | ) 74 | ,htmlDependency( 75 | name = "babel-browser" 76 | ,version = "5.8.23" 77 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 78 | ,script = c("browser.min.js") 79 | ) 80 | ,htmlDependency( 81 | name = "jquery" 82 | ,version = "2.2.0" 83 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 84 | ,script = c("jquery.min.js") 85 | ) 86 | ,htmlDependency( 87 | name = "marked" 88 | ,version = "0.3.5" 89 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 90 | ,script = c("marked.min.js") 91 | ) 92 | )) %>>% 93 | html_print 94 | 95 | # use reactR -------------------------------------------------------------- 96 | library(htmltools) 97 | library(reactR) 98 | 99 | 100 | tagList( 101 | tags$div(id = "content"), 102 | tags$script(babel_transform( 103 | '// tutorial3.js 104 | var CommentBox = React.createClass({ 105 | render: function() { 106 | return ( 107 |
108 |

Comments

109 | 110 | 111 |
112 | ); 113 | } 114 | }); 115 | 116 | // tutorial4.js 117 | var CommentList = React.createClass({ 118 | render: function() { 119 | return ( 120 |
121 | This is one comment 122 | This is *another* comment 123 |
124 | ); 125 | } 126 | }); 127 | 128 | var CommentForm = React.createClass({ 129 | render: function() { 130 | return ( 131 |
132 | Hello, world! I am a CommentForm. 133 |
134 | ); 135 | } 136 | }); 137 | 138 | // tutorial5.js 139 | var Comment = React.createClass({ 140 | render: function() { 141 | return ( 142 |
143 |

144 | {this.props.author} 145 |

146 | {this.props.children} 147 |
148 | ); 149 | } 150 | }); 151 | 152 | ReactDOM.render( 153 | , 154 | document.getElementById("content") 155 | ); 156 | ' 157 | )) 158 | ) %>>% 159 | attachDependencies(list( 160 | html_dependency_react(), 161 | htmlDependency( 162 | name = "jquery" 163 | ,version = "2.2.0" 164 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 165 | ,script = c("jquery.min.js") 166 | ), 167 | htmlDependency( 168 | name = "marked" 169 | ,version = "0.3.5" 170 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 171 | ,script = c("marked.min.js") 172 | ) 173 | )) %>>% 174 | browsable() 175 | 176 | -------------------------------------------------------------------------------- /tutorial6.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial3.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial4.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | This is one comment 29 | This is *another* comment 30 |
31 | ); 32 | } 33 | }); 34 | 35 | var CommentForm = React.createClass({ 36 | render: function() { 37 | return ( 38 |
39 | Hello, world! I am a CommentForm. 40 |
41 | ); 42 | } 43 | }); 44 | 45 | // tutorial6.js 46 | var Comment = React.createClass({ 47 | render: function() { 48 | return ( 49 |
50 |

51 | {this.props.author} 52 |

53 | {marked(this.props.children.toString())} 54 |
55 | ); 56 | } 57 | }); 58 | 59 | ReactDOM.render( 60 | , 61 | document.getElementById("content") 62 | ); 63 | 64 | ' %>>% HTML 65 | ) 66 | ) %>>% 67 | attachDependencies(list( 68 | htmlDependency( 69 | name = "react" 70 | ,version = "0.14.8" 71 | ,src = c(paste0(getwd(),"/build")) 72 | ,script = c("react.min.js","react-dom.min.js") 73 | ) 74 | ,htmlDependency( 75 | name = "babel-browser" 76 | ,version = "5.8.23" 77 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 78 | ,script = c("browser.min.js") 79 | ) 80 | ,htmlDependency( 81 | name = "jquery" 82 | ,version = "2.2.0" 83 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 84 | ,script = c("jquery.min.js") 85 | ) 86 | ,htmlDependency( 87 | name = "marked" 88 | ,version = "0.3.5" 89 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 90 | ,script = c("marked.min.js") 91 | ) 92 | )) %>>% 93 | html_print 94 | 95 | 96 | # use reactR -------------------------------------------------------------- 97 | library(htmltools) 98 | library(reactR) 99 | 100 | tagList( 101 | tags$div(id = "content"), 102 | tags$script(babel_transform( 103 | '// tutorial3.js 104 | var CommentBox = React.createClass({ 105 | render: function() { 106 | return ( 107 |
108 |

Comments

109 | 110 | 111 |
112 | ); 113 | } 114 | }); 115 | 116 | // tutorial4.js 117 | var CommentList = React.createClass({ 118 | render: function() { 119 | return ( 120 |
121 | This is one comment 122 | This is *another* comment 123 |
124 | ); 125 | } 126 | }); 127 | 128 | var CommentForm = React.createClass({ 129 | render: function() { 130 | return ( 131 |
132 | Hello, world! I am a CommentForm. 133 |
134 | ); 135 | } 136 | }); 137 | 138 | // tutorial6.js 139 | var Comment = React.createClass({ 140 | render: function() { 141 | return ( 142 |
143 |

144 | {this.props.author} 145 |

146 | {marked(this.props.children.toString())} 147 |
148 | ); 149 | } 150 | }); 151 | 152 | ReactDOM.render( 153 | , 154 | document.getElementById("content") 155 | ); 156 | ' 157 | )) 158 | ) %>>% 159 | attachDependencies(list( 160 | html_dependency_react(), 161 | htmlDependency( 162 | name = "jquery" 163 | ,version = "2.2.0" 164 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 165 | ,script = c("jquery.min.js") 166 | ), 167 | htmlDependency( 168 | name = "marked" 169 | ,version = "0.3.5" 170 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 171 | ,script = c("marked.min.js") 172 | ) 173 | )) %>>% 174 | browsable() 175 | 176 | -------------------------------------------------------------------------------- /tutorial7.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial3.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial4.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | This is one comment 29 | This is *another* comment 30 |
31 | ); 32 | } 33 | }); 34 | 35 | var CommentForm = React.createClass({ 36 | render: function() { 37 | return ( 38 |
39 | Hello, world! I am a CommentForm. 40 |
41 | ); 42 | } 43 | }); 44 | 45 | // tutorial7.js 46 | var Comment = React.createClass({ 47 | rawMarkup: function() { 48 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 49 | return { __html: rawMarkup }; 50 | }, 51 | 52 | render: function() { 53 | return ( 54 |
55 |

56 | {this.props.author} 57 |

58 | 59 |
60 | ); 61 | } 62 | }); 63 | 64 | ReactDOM.render( 65 | , 66 | document.getElementById("content") 67 | ); 68 | 69 | ' %>>% HTML 70 | ) 71 | ) %>>% 72 | attachDependencies(list( 73 | htmlDependency( 74 | name = "react" 75 | ,version = "0.14.8" 76 | ,src = c(paste0(getwd(),"/build")) 77 | ,script = c("react.min.js","react-dom.min.js") 78 | ) 79 | ,htmlDependency( 80 | name = "babel-browser" 81 | ,version = "5.8.23" 82 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 83 | ,script = c("browser.min.js") 84 | ) 85 | ,htmlDependency( 86 | name = "jquery" 87 | ,version = "2.2.0" 88 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 89 | ,script = c("jquery.min.js") 90 | ) 91 | ,htmlDependency( 92 | name = "marked" 93 | ,version = "0.3.5" 94 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 95 | ,script = c("marked.min.js") 96 | ) 97 | )) %>>% 98 | html_print 99 | 100 | 101 | 102 | 103 | # use reactR -------------------------------------------------------------- 104 | library(htmltools) 105 | library(reactR) 106 | 107 | tagList( 108 | tags$div(id = "content"), 109 | tags$script(babel_transform( 110 | '// tutorial3.js 111 | var CommentBox = React.createClass({ 112 | render: function() { 113 | return ( 114 |
115 |

Comments

116 | 117 | 118 |
119 | ); 120 | } 121 | }); 122 | 123 | // tutorial4.js 124 | var CommentList = React.createClass({ 125 | render: function() { 126 | return ( 127 |
128 | This is one comment 129 | This is *another* comment 130 |
131 | ); 132 | } 133 | }); 134 | 135 | var CommentForm = React.createClass({ 136 | render: function() { 137 | return ( 138 |
139 | Hello, world! I am a CommentForm. 140 |
141 | ); 142 | } 143 | }); 144 | 145 | // tutorial7.js 146 | var Comment = React.createClass({ 147 | rawMarkup: function() { 148 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 149 | return { __html: rawMarkup }; 150 | }, 151 | 152 | render: function() { 153 | return ( 154 |
155 |

156 | {this.props.author} 157 |

158 | 159 |
160 | ); 161 | } 162 | }); 163 | 164 | ReactDOM.render( 165 | , 166 | document.getElementById("content") 167 | ); 168 | ' 169 | )) 170 | ) %>>% 171 | attachDependencies(list( 172 | html_dependency_react(), 173 | htmlDependency( 174 | name = "jquery" 175 | ,version = "2.2.0" 176 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 177 | ,script = c("jquery.min.js") 178 | ), 179 | htmlDependency( 180 | name = "marked" 181 | ,version = "0.3.5" 182 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 183 | ,script = c("marked.min.js") 184 | ) 185 | )) %>>% 186 | browsable() 187 | 188 | -------------------------------------------------------------------------------- /tutorial8.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial3.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial4.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | This is one comment 29 | This is *another* comment 30 |
31 | ); 32 | } 33 | }); 34 | 35 | var CommentForm = React.createClass({ 36 | render: function() { 37 | return ( 38 |
39 | Hello, world! I am a CommentForm. 40 |
41 | ); 42 | } 43 | }); 44 | 45 | // tutorial7.js 46 | var Comment = React.createClass({ 47 | rawMarkup: function() { 48 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 49 | return { __html: rawMarkup }; 50 | }, 51 | 52 | render: function() { 53 | return ( 54 |
55 |

56 | {this.props.author} 57 |

58 | 59 |
60 | ); 61 | } 62 | }); 63 | 64 | // tutorial8.js 65 | var data = [ 66 | {author: "Pete Hunt", text: "This is one comment"}, 67 | {author: "Jordan Walke", text: "This is *another* comment"} 68 | ]; 69 | 70 | ReactDOM.render( 71 | , 72 | document.getElementById("content") 73 | ); 74 | 75 | ' %>>% HTML 76 | ) 77 | ) %>>% 78 | attachDependencies(list( 79 | htmlDependency( 80 | name = "react" 81 | ,version = "0.14.8" 82 | ,src = c(paste0(getwd(),"/build")) 83 | ,script = c("react.min.js","react-dom.min.js") 84 | ) 85 | ,htmlDependency( 86 | name = "babel-browser" 87 | ,version = "5.8.23" 88 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 89 | ,script = c("browser.min.js") 90 | ) 91 | ,htmlDependency( 92 | name = "jquery" 93 | ,version = "2.2.0" 94 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 95 | ,script = c("jquery.min.js") 96 | ) 97 | ,htmlDependency( 98 | name = "marked" 99 | ,version = "0.3.5" 100 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 101 | ,script = c("marked.min.js") 102 | ) 103 | )) %>>% 104 | html_print 105 | 106 | 107 | 108 | # use reactR -------------------------------------------------------------- 109 | library(htmltools) 110 | library(reactR) 111 | 112 | tagList( 113 | tags$div(id = "content"), 114 | tags$script(babel_transform( 115 | '// tutorial3.js 116 | var CommentBox = React.createClass({ 117 | render: function() { 118 | return ( 119 |
120 |

Comments

121 | 122 | 123 |
124 | ); 125 | } 126 | }); 127 | 128 | // tutorial4.js 129 | var CommentList = React.createClass({ 130 | render: function() { 131 | return ( 132 |
133 | This is one comment 134 | This is *another* comment 135 |
136 | ); 137 | } 138 | }); 139 | 140 | var CommentForm = React.createClass({ 141 | render: function() { 142 | return ( 143 |
144 | Hello, world! I am a CommentForm. 145 |
146 | ); 147 | } 148 | }); 149 | 150 | // tutorial7.js 151 | var Comment = React.createClass({ 152 | rawMarkup: function() { 153 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 154 | return { __html: rawMarkup }; 155 | }, 156 | 157 | render: function() { 158 | return ( 159 |
160 |

161 | {this.props.author} 162 |

163 | 164 |
165 | ); 166 | } 167 | }); 168 | 169 | // tutorial8.js 170 | var data = [ 171 | {author: "Pete Hunt", text: "This is one comment"}, 172 | {author: "Jordan Walke", text: "This is *another* comment"} 173 | ]; 174 | 175 | ReactDOM.render( 176 | , 177 | document.getElementById("content") 178 | ); 179 | ' 180 | )) 181 | ) %>>% 182 | attachDependencies(list( 183 | html_dependency_react(), 184 | htmlDependency( 185 | name = "jquery" 186 | ,version = "2.2.0" 187 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 188 | ,script = c("jquery.min.js") 189 | ), 190 | htmlDependency( 191 | name = "marked" 192 | ,version = "0.3.5" 193 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 194 | ,script = c("marked.min.js") 195 | ) 196 | )) %>>% 197 | browsable() 198 | 199 | -------------------------------------------------------------------------------- /tutorial9.R: -------------------------------------------------------------------------------- 1 | library(htmltools) 2 | library(pipeR) 3 | 4 | tagList( 5 | tags$div( 6 | id = "content" 7 | ) 8 | ,tags$script(type = "text/babel" 9 | ,' 10 | // tutorial9.js 11 | var CommentBox = React.createClass({ 12 | render: function() { 13 | return ( 14 |
15 |

Comments

16 | 17 | 18 |
19 | ); 20 | } 21 | }); 22 | 23 | // tutorial4.js 24 | var CommentList = React.createClass({ 25 | render: function() { 26 | return ( 27 |
28 | This is one comment 29 | This is *another* comment 30 |
31 | ); 32 | } 33 | }); 34 | 35 | var CommentForm = React.createClass({ 36 | render: function() { 37 | return ( 38 |
39 | Hello, world! I am a CommentForm. 40 |
41 | ); 42 | } 43 | }); 44 | 45 | // tutorial7.js 46 | var Comment = React.createClass({ 47 | rawMarkup: function() { 48 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 49 | return { __html: rawMarkup }; 50 | }, 51 | 52 | render: function() { 53 | return ( 54 |
55 |

56 | {this.props.author} 57 |

58 | 59 |
60 | ); 61 | } 62 | }); 63 | 64 | // tutorial8.js 65 | var data = [ 66 | {author: "Pete Hunt", text: "This is one comment"}, 67 | {author: "Jordan Walke", text: "This is *another* comment"} 68 | ]; 69 | 70 | ReactDOM.render( 71 | , 72 | document.getElementById("content") 73 | ); 74 | 75 | ' %>>% HTML 76 | ) 77 | ) %>>% 78 | attachDependencies(list( 79 | htmlDependency( 80 | name = "react" 81 | ,version = "0.14.8" 82 | ,src = c(paste0(getwd(),"/build")) 83 | ,script = c("react.min.js","react-dom.min.js") 84 | ) 85 | ,htmlDependency( 86 | name = "babel-browser" 87 | ,version = "5.8.23" 88 | ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23") 89 | ,script = c("browser.min.js") 90 | ) 91 | ,htmlDependency( 92 | name = "jquery" 93 | ,version = "2.2.0" 94 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 95 | ,script = c("jquery.min.js") 96 | ) 97 | ,htmlDependency( 98 | name = "marked" 99 | ,version = "0.3.5" 100 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 101 | ,script = c("marked.min.js") 102 | ) 103 | )) %>>% 104 | html_print 105 | 106 | 107 | 108 | 109 | # use reactR -------------------------------------------------------------- 110 | library(htmltools) 111 | library(reactR) 112 | 113 | tagList( 114 | tags$div(id = "content"), 115 | tags$script(babel_transform( 116 | '// tutorial9.js 117 | var CommentBox = React.createClass({ 118 | render: function() { 119 | return ( 120 |
121 |

Comments

122 | 123 | 124 |
125 | ); 126 | } 127 | }); 128 | 129 | // tutorial4.js 130 | var CommentList = React.createClass({ 131 | render: function() { 132 | return ( 133 |
134 | This is one comment 135 | This is *another* comment 136 |
137 | ); 138 | } 139 | }); 140 | 141 | var CommentForm = React.createClass({ 142 | render: function() { 143 | return ( 144 |
145 | Hello, world! I am a CommentForm. 146 |
147 | ); 148 | } 149 | }); 150 | 151 | // tutorial7.js 152 | var Comment = React.createClass({ 153 | rawMarkup: function() { 154 | var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 155 | return { __html: rawMarkup }; 156 | }, 157 | 158 | render: function() { 159 | return ( 160 |
161 |

162 | {this.props.author} 163 |

164 | 165 |
166 | ); 167 | } 168 | }); 169 | 170 | // tutorial8.js 171 | var data = [ 172 | {author: "Pete Hunt", text: "This is one comment"}, 173 | {author: "Jordan Walke", text: "This is *another* comment"} 174 | ]; 175 | 176 | ReactDOM.render( 177 | , 178 | document.getElementById("content") 179 | ); 180 | ' 181 | )) 182 | ) %>>% 183 | attachDependencies(list( 184 | html_dependency_react(), 185 | htmlDependency( 186 | name = "jquery" 187 | ,version = "2.2.0" 188 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/") 189 | ,script = c("jquery.min.js") 190 | ), 191 | htmlDependency( 192 | name = "marked" 193 | ,version = "0.3.5" 194 | ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/") 195 | ,script = c("marked.min.js") 196 | ) 197 | )) %>>% 198 | browsable() 199 | 200 | --------------------------------------------------------------------------------