<div id='app'></div>
.block {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  transition: background-color 0.8s ease-in;
}
class App extends React.Component {
  constructor(props){
    super(props);
    
    // Again we'll set up our initial state.
    this.state = {color: '#000000'}
  }
  
  changeColor() {
    // We'll use setState to trigger a UI update & re-render. The function is a little crazy but it's just generating random hex codes by swapping 0's with a random digit from 0-F.    
    this.setState({
      color: "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);})
    })
  }
  
  // We'll call the changeColor function every 2.5 seconds.
  componentDidMount() {
    setInterval(this.changeColor.bind(this), 2500);
  }
  
  render() {
    // Then have the state of our component hook right into our background-color style.
    return(
      <div className="block" style={{backgroundColor: this.state.color}}></div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://fb.me/react-15.1.0.min.js
  2. https://fb.me/react-dom-15.1.0.min.js