React Hello World Example with ES6+JSX

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

by michaeldausmann

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://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
* { box-sizing:border-box; }
html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
      }

body { background:url(http://subtlepatterns.com/patterns/little_pluses.png) #cacaca; }

textarea  { 
  display: block;
  padding:25px 25px 40px;
  margin:0 auto 20px auto;
  width:250px;
  height:150px;   
  font:20px 'Gloria Hallelujah', cursive; 
  line-height:1.5;
  border:0;
  border-radius:3px;
  background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
  background: -moz-linear-gradient(#F9EFAF, #F7E98D);
  background: -o-linear-gradient(#F9EFAF, #F7E98D);
  background: -ms-linear-gradient(#F9EFAF, #F7E98D);
  background: linear-gradient(#F9EFAF, #F7E98D);
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
  overflow:hidden;
  transition:box-shadow 0.5s ease;
  font-smoothing:subpixel-antialiased;
  max-width:520px;
  max-height:250px;
  /*position: absolute;*/
}

textarea.yellow-note{
  background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
  background: -moz-linear-gradient(#F9EFAF, #F7E98D);
  background: -o-linear-gradient(#F9EFAF, #F7E98D);
  background: -ms-linear-gradient(#F9EFAF, #F7E98D);
  background: linear-gradient(#F9EFAF, #F7E98D);  
}

textarea.red-note{
  background: -webkit-linear-gradient(#F9AFAF, #F78D8D);
  background: -moz-linear-gradient(#F9AFAF, #F78D8D);
  background: -o-linear-gradient(#F9AFAF, #F78D8D);
  background: -ms-linear-gradient(#F9AFAF, #F78D8D);
  background: linear-gradient(#F9AFAF, #F78D8D);  
}

textarea.green-note{
  background: -webkit-linear-gradient(#AFF9B0, #9FF78D);
  background: -moz-linear-gradient(#AFF9B0, #9FF78D);
  background: -o-linear-gradient(#AFF9B0, #9FF78D);
  background: -ms-linear-gradient(#AFF9B0, #9FF78D);
  background: linear-gradient(#AFF9B0, #9FF78D);  
}

textarea.blue-note{
  background: -webkit-linear-gradient(#B3AFF9, #968DF7);
  background: -moz-linear-gradient(#B3AFF9, #968DF7);
  background:...

JavaScript 1.7

class DraggableComponent extends React.Component{
  constructor(props){
    super(props);
    this.isDragging = false;
    this.originalClientX = 0;
    this.originalClientY = 0;
    this.originalTop = 0;
    this.originalLeft = 0;
    this.state = {
      top: '0px',
      left: '0px'
    }   
  }

  render(){
    let dragStyle = {position: 'absolute', top: this.state.top ,left: this.state.left};
    console.log('dragStyle:' + dragStyle);
    return(
      <textarea
        defaultValue={"I am draggable"} 
        class={"red-note"}
        style={dragStyle} 
        onMouseDown={this.onMouseDown.bind(this)}
        onMouseMove={this.onMouseMove.bind(this)}
        onMouseUp={this.onMouseUp.bind(this)}  
        />
      );
  }

  onMouseDown($event){
    if($event.target.style.position=='absolute' && $event.target.style.left && $event.target.style.top){
      this.isDragging = true;
      this.originalLeft = parseInt($event.target.style.left, 10);
      this.originalTop = parseInt($event.target.style.top, 10);
      this.originalClientX = $event.clientX;
      this.originalClientY = $event.clientY;    
    }else{
      console.log('draggable: Error! the annotated ' + $event.target.nodeName + ' element needs to be inline styled with position, top and left');
    }
  }

  onMouseMove($event){
    if(this.isDragging){
      this.setState({
        top: this.originalTop + ($event.clientY - this.originalClientY),      
        left: this.originalLeft + ($event.clientX - this.originalClientX)
      });
    }
  }

  onMouseUp($event){
    if(this.isDragging){
      this.isDragging = false;
    } 
  }
}

      React.render(<DraggableComponent />, document.getElementById('container'));