JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div id="container" style="width: 250px; height: 250px;"></div>

Babel + JSX

class Pie extends React.Component {
  componentDidMount() {
    d3.select(React.findDOMNode(this))
    .append("g")
    	.attr("transform", "translate(50,50)");
    this.componentDidUpdate();
  }
  componentDidUpdate() {
    const pie = d3.layout.pie()
      .value(d => d.value);
    const arc = d3.svg.arc()
      .outerRadius(50);
    
		var g = d3.select(React.findDOMNode(this)).select("g")
    .selectAll(".arc")
      .data(pie(this.props.data))
    .enter().append("g")
      .attr("class", "arc");

  	g.append("path")
      .attr("d", arc)
      .style("fill", d => d.data.color);
  }

  render() {
    return (
    	<svg viewBox="0 0 100 100"></svg>
    );
  
  }
}

React.render(<Pie data={[
  { value: 1, color: "red" },
  { value: 2, color: "blue" }
]} />, document.getElementById("container"));