How to use react-d3-components in create-react-app

Question

I want to use the charts on https://github.com/codesuki/react-d3-components with my react app created using create-react-app. How do I integrate the code?

Use:

var BarChart = ReactD3.BarChart;

var data = [{
    label: 'somethingA',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

React.render(
    <BarChart
        data={data}
        width={400}
        height={400}
        margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
    document.getElementById('location')
);

To Generate a Chart in:

import React from 'react';


class Lifecycle extends React.Component {
    render() {
        return (
            <div>

               {*/BarChart Appear Here*/}

            </div>
        );
    }
}

export default Lifecycle;

Answer 1

import React from "react";
import { BarChart } from "react-d3-components";

function BarChartContainer() {
  let data = [
    {
      label: "somethingA",
      values: [
        { x: "SomethingA", y: 10 },
        { x: "SomethingB", y: 4 },
        { x: "SomethingC", y: 3 }
      ]
    }
  ];
  return (
    <BarChart
      data={data}
      width={400}
      height={400}
      margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
    />
  );
}
export default BarChartContainer;

Usage

import React from "react";
import ReactDOM from "react-dom";
import BarChartContainer from "./BarChartContainer";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <BarChartContainer />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);