I did it a few months ago without prior knowledge of d3, and little knowledge of React. I tried to keep it simple and have as much manual control as possible, such that I could apply the tips of d3 tutorials.

I essentially have a visualization class with an svg, and an update function for all the D3 stuff. The data is handed using props.

When the component mounts, or updates I call my own update function which sets the svg size, binds the data, and defines the enter/update/exit actions+transitions. Because I call update in the componentDidUpdate function, I had to catch 'fake' updates where the data hadn't changed, and abstain from state-updates such that I don't end up with infinite update loops.

  componentDidMount() {
    this.update();
  }

  componentDidUpdate(prevProps, prevState) {
     this.update();
  }

  render() {
    return (
      <div ref={this.gridRef} className={"VisContainer"}>
        <svg className={"VisSVG"} ref={this.svgRef} />
      </div>
    );
  }

With this rather primitive structure, my biggest problem was with d3. While many tutorial cover the enter/update/exit model, they often don't go in-depth wth the key-function of the data binding. Probably because they often use date of form list<int> for their tutorial. In my case I had more complex data such that I needed to have efficient updates, using the filter function of d3.