React Example with JSX

index.html

<div id="mount-point"></div>

React Example with JSX.markdown

React Example with JSX

Forked from Nick Raienko's Pen React Example with JSX.

A Pen by Lim web on CodePen.

License.

script.js

var Overlay = React.createClass({
  OnclickHandle:function(){
    this.props.test.OnclickHandle();
  },
  render:function(){
    return(<div ref="overlay" id="overlay">
           <div onClick={this.OnclickHandle}  className="timer"></div>
          </div>)
  }
});

var Circle = React.createClass({
  getInitialState: function() {
      return { showResults:true }
  },
  OnclickHandle:function(){
     var t = !this.state.showResults;
    this.state.showResults = t;
      this.setState(
        {showResults:t}
      );
    
/*    if(t){
      console.log('show');
      $(this.refs.modal.getDOMNode()).show();  
    } else {
      console.log('hide');
      $(this.refs.modal.getDOMNode()).hide();  
    }*/
//{ this.state.showResults && <div><h1>test</h1><Overlay test={this} /></div> }
/*    setTimeout(function() {
      console.log('fadeToggle');
              $(this.refs.modal.getDOMNode()).hide().fadeToggle('slow');
		}, 350);*/
    $(this.refs.modal.getDOMNode()).show();  
    
  },
  componentDidMount: function() {
    _this = this;
    setTimeout(function(){
      $(_this.refs.modal.getDOMNode()).hide();
      console.log('hide');
    },5000);
    console.log('didMount');
  },
  componentDidUpdate: function() {
        _this = this;
    setTimeout(function(){
      $(_this.refs.modal.getDOMNode()).hide();
      console.log('hide');
    },5000);
    console.log('didUpdate');
    
  },
  render: function() {
    return (<div >
        <button onClick={this.OnclickHandle}>Click</button>
        <Overlay test={this} ref='modal' />
      </div>);
  }
});
    
React.render(
  <Circle />, 
  document.getElementById('mount-point'));

scripts

<script src="http://codepen.io/chriscoyier/pen/yIgqi.js"></script>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80)
    }
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}
/* Timer*/
.timer{
    z-index: 999;
    width: 29px;
    height: 29px;
    top:100px;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px #fff;
    border-radius: 50%;
    position: relative;
    margin: 38px auto;/* Not necessary- its only for layouting*/    
}
.timer:after, .timer:before{
    position: absolute;
    content:"";
    background-color: #fff;
}
.timer:after{
    width: 11px;
    height: 2px;
    top: 13.5px;
    left: 13.5px;
    -webkit-transform-origin: 1px 1px;
    -moz-transform-origin: 1px 1px;
    transform-origin: 1px 1px;
    -webkit-animation: minhand 2s linear infinite;
    -moz-animation: minhand 2s linear infinite;
    animation: minhand 2s linear infinite;
}
.timer:before{
    width: 10px;
    height: 2px;
    top: 13.5px;
    left: 13.5px;
    -webkit-transform-origin: 1px 1px;
    -moz-transform-origin: 1px 1px;
    transform-origin: 1px 1px;
    -webkit-animation: hrhand 8s linear infinite;
    -moz-animation: hrhand 8s linear infinite;
    animation: hrhand 8s linear infinite;
}

@-webkit-keyframes minhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}