Применяется стиль рендеринга CSS.

Question

Я пытаюсь сделать компонент, записанный в функциональном компоненте без сохранения состояния в React.js. когда я попытался отобразить код ниже, элемент не отображается. Файлы сценариев React и React-Dom вставлены правильно.

const showMe = () => {
  return (
    <div className="hi"></div>
  )
};

ReactDOM.render(showMe, document.getElementById("target"));

#target {
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  top:50%;
  transform:translateY(-50%);
  border:1px solid red;
  width:600px;
  height:500px;
}

.hi {
  border:1px solid blue;
  position:absolute;
  width:50%;
  height:40%;
  left:0;
  right:0;
  margin:0 auto;
  top:50%;
  transform:translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="target">
</div>

Answer 1

const ShowMe = () => {
  return (
    <div className="hi"></div>
  )
};

ReactDOM.render(<ShowMe />, document.getElementById("target"));

#target {
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  top:50%;
  transform:translateY(-50%);
  border:1px solid red;
  width:600px;
  height:500px;
}

.hi {
  border:1px solid blue;
  position:absolute;
  width:50%;
  height:40%;
  left:0;
  right:0;
  margin:0 auto;
  top:50%;
  transform:translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="target">
</div>

Answer 2

ReactDOM.render(< ShowMe />, document.getElementById("target"));