SOURCE

class App extends React.Component {
  handleClick = (e) => {
    let X = e.pageX - this.btn.offsetLeft;
    let Y = e.pageY - this.btn.offsetTop;
    debugger;
    let rippleDiv = document.createElement("div");
    rippleDiv.classList.add('ripple');
    rippleDiv.setAttribute("style","top:"+Y+"px; left:"+X+"px;");
    this.btn.appendChild(rippleDiv);
    debugger;
    setTimeout(() => {
      this.btn.removeChild(rippleDiv);
    },900)
  }
  render() {
    return (
    	<button onClick={this.handleClick} className="red-button" ref={btn => this.btn = btn}>Click Me</button>
    )
  }
  
}

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

<div id='root'></div>

.red-button {
  background: #f44336;
  color: #fff;
  outline:none;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  &:hover {
    cursor: pointer;
    background:lighten(#F44336,8%);
  }
  opacity:1;
}

.ripple{
  position:absolute;
  background:#fff;
  border-radius:50%;
  width:5px;
  height:5px;
  animation:rippleEffect .88s 1;
  opacity:0;
}

@keyframes rippleEffect {
  0% {transform:scale(1); opacity:0.4;}
  100% {transform:scale(100); opacity:0;}
}