How to avoid use of document.getElementById in Reactjs?

Question

What should I do to avoid document in reactjs.

var para = document.createElement("div");
var element = document.getElementById("d");
para.style.display = "block";
element.appendChild(para);
para.classList.add("con3");
para.style.left = c;

function getcord(e) {
  let d = document.getElementById('c');
  let f = document.getElementById('d');
  let leftPos = f.getBoundingClientRect().left;
  let currPos = e.clientX;
  let show = currPos - leftPos;
  console.log(show, leftPos);
  return show + "px";
}

function hover(e) {
  let d = document.getElementById('c');
  d.style.left = getcord(e);
}

function myclick(e) {
  let c = getcord(e);
  var para = document.createElement("div");
  var element = document.getElementById("d");
  para.style.display = "block";
  element.appendChild(para);
  para.classList.add("con3");
  para.style.left = c;
}

.dis {
  width: auto;
  position: relative;
  margin: 90px;
  height: 10px;
  background-color: #000;
  border: 1px solid black;
}

.dis:hover .con3 {
  display: block;
}

.con3 {
  position: absolute;
  height: 30px;
  left: 0;
  top: -2px;
  display: none;
  width: 30px;
  border-radius: 50%;
  background-color: red;
}

<div class="dis" onmousemove="hover(event)" onclick="myclick(event)" id="d">
  <div class="con3" id="c"></div>
</div>

I just want to right that whole code in Reactjs. I know how to write code in reactjs. but I have restriction to use document.getElementById in my project. So how I avoid this element and write in reactjs way
Please anyone help me.I am new in react.