React JS. Добавить элемент в DOM

Я новичок в реакции, и я играл с этим последние несколько дней. Я пытаюсь добавить значение в DOM, я нашел способ сделать это, но я ищу способ сделать это с помощью

var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para); 

Но я ищу другой путь. Я пробовал несколько разных способов, но застрял. Есть ли другой способ, кроме указанного выше ^^^^

import React, { Component } from 'react';
import { render } from 'react-dom';


export class Parent extends React.Component {
  constructor(props) {
    this.greet = this.greet.bind(this);
    this.state = { text: " " };
  }

  greet(value) {
    //console.info(value);

    var para = document.createElement("li");
    var t = document.createTextNode(value);
    para.appendChild(t);
    document.getElementById("root").appendChild(para); 

  }

  render() {
    return (
      <div>
        <Child onGreet = {this.greet} />
      </div>
    )
  }
};


export class Child extends React.Component {

  constructor(props) {
    this.state = { value: '' };
    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.eventClick = this.eventClick.bind(this);
  }

  handleChangeEvent(event) {
    this.setState({ value: event.target.value });
  }

  eventClick() {
    this.props.onGreet(this.state.value);
  }

  render() {
    return (
      <div>
<input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent} />
<button type = "button" onClick = {this.eventClick}>Submit </button>
      </div>
    )
  }
};