React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by gtw7375

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
  <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi...

CSS

.topbar{
  position: fixed;
  height:40px;
  left:0;
  top:0;
  background-color: #fff;
  width:100%;
  text-align:center;
  font-size:22px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  transition:top .3s;
  top: -40px;
}

.hide{

  top:0px;
}

Babel + JSX

class TopBar extends React.Component {
    constructor(props){
      super(props);
      this.state={isHide:false};
      this.hideBar = this.hideBar.bind(this)
    }
    hideBar(){
       let {isHide} = this.state
       window.scrollY > this.prev?
       !isHide && this.setState({isHide:true})
       :
       isHide && this.setState({isHide:false})

       this.prev = window.scrollY;
    }
    componentDidMount(){
        window.addEventListener('scroll',this.hideBar);
    }
    componentWillUnmount(){
         window.removeEventListener('scroll',this.hideBar);
    }
    render(){

        let classHide=this.state.isHide?"hide":""
        return <div className={"topbar "+classHide}>topbar</div>;
    }
}

ReactDOM.render(<TopBar/>,document.getElementById('root'));