React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.widget {
  width: 202px;
  margin: 100px auto;
  //    border:1px solid black;
  padding: 20px;
}

.name {
  color: red;
}

.default-label {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}

.green-label {
  border: 1px solid green;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}

.default-input {
  border: 1px solid #eaeaea;
  padding: 10px;
  width: 180px;
}

.important-input {
  border: 2px solid red;
  width: 180px;
}

img.center {
  width: 100px;
  height: 100px;
  display: block;
  margin: 15px auto;
}

JavaScript 1.7

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):"object"==typeof exports?exports.ReactGridLayout=e(require("react"),require("react-dom")):t.ReactGridLayout=e(t.React,t.ReactDOM)}(this,function(t,e){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";t.exports=r(3)["default"],t.exports.utils=r(2),t.exports.Responsive=r(11)["default"],t.exports.Responsive.utils=r(4),t.exports.WidthProvider=r(12)["default"]},function(e,r){e.exports=t},function(t,e,r){"use strict";function n(t){for(var e=0,r=void 0,n=0,o=t.length;o>n;n++)r=t[n].y+t[n].h,r>e&&(e=r);return e}function o(t){return S({},t)}function a(t,e){return t===e?!1:t.x+t.w<=e.x?!1:t.x>=e.x+e.w?!1:t.y+t.h<=e.y?!1:t.y>=e.y+e.h?!1:!0}function i(t,e){for(var r=f(t),n=[],o=m(t),a=0,i=o.length;i>a;a++){var u=o[a];u["static"]||(u=s(r,u,e),r.push(u)),n[t.indexOf(u)]=u,u.moved=!1}return n}function s(t,e,r){if(r)for(;e.y>0&&!c(t,e);)e.y--;for(var n=void 0;n=c(t,e);)e.y=n.y+n.h;return e}function u(t,e){for(var r=f(t),n=0,o=t.length;o>n;n++){var a=t[n];if(a.x+a.w>e.cols&&(a.x=e.cols-a.w),a.x<0&&(a.x=0,a.w=e.cols),a["static"])for(;c(r,a);)a.y++;else r.push(a)}return t}function l(t,e){for(var r=0,n=t.length;n>r;r++)if(t[r].i===e)return t[r]}function c(t,e){for(var r=0,n=t.length;n>r;r++)if(a(t[r],e))return t[r]}function p(t,e){for(var r=[],n=0,o=t.length;o>n;n++)a(t[n],e)&&r.push(t[n]);return r}function f(t){for(var e=[],r=0,n=t.length;n>r;r++)t[r]["static"]&&e.push(t[r]);return e}function h(t,e,r,n,o){if(e["static"])return t;if(e.y===n&&e.x===r)return t;var a=n&&e.y>n;"number"==typeof r&&(e.x=r),"number"==typeof n&&(e.y=n),e.moved=!0;var i=m(t);a&&(i=i.reverse());for(var s=p(i,e),u=0,l=s.length;l>u;u++){var...