How to use D3 React library?

Question

JavaScript

react-d3
example
I can't insert a chart into the project, even from the example. What am I doing wrong? (their native build with git builds with a million errors...)

import React, { Component } from 'react';

import { BarChart } from 'react-d3';

export class first extends Component {

    constructor(...args) {
        super(...args);
        this.state = {};
    }

    render() {
        return (
                <div>
                    <h1>First Chart</h1>

                    <BarChart
                                data={[2,3,4]}
                                width={500}
                                height={200}
                                fill={'#3182bd'}
                    />
                </div>
        );
    }
}
export default first;

Uncaught TypeError: Cannot read property 'map' of undefined

(anonymous function) @ d3.js?94ba:6688
stack @ d3.js?94ba:6687
module.exports.React.createClass.render @ BarChart.js?2b66:79
ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?cd59:587
ReactCompositeComponentMixin ._renderValidatedComponent @ ReactCompositeComponent.js?cd59:607
wrapper @ ReactPerf.js?ef93:66
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:220
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler. js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconcilerComponent. js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js? cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241 ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js
?1302:591
.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93: 66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent @.Mixin.mountComponent ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225 wrapper
@ ReactPerf.js?ef93:66 ReactReconciler.mountComponent
@ ReactReconciler.js?6bfa:37 66 ReactReconciler.mountComponent @ ReactReconciler.js ? 6bfa : 37 :136 ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:62 batchedUpdates @ ReactUpdates.js?ce09:94
ReactMount._renderNewRootComponent @ ReactMount.js?2f23:476
wrapper @ ReactPerf.js?ef93:66
ReactMount._renderSubtreeIntoContainer @ ReactMount.js?2f23:550
ReactMount.render @ ReactMount.js?2f23:570
wrapper @ ReactPerf.js?ef93: 66
(anonymous function) @ index.js?1fdf:6
(anonymous function) @ bundle.js:622
__webpack_require__ @ bundle.js:535
fn @ bundle.js:76
(anonymous function) @ bundle.js:567
__webpack_require__ @ bundle .js:535
(anonymous function) @ bundle.js:558
(anonymous function) @ bundle.js:561

Answer 1

It is necessary to pre-assign a variable where there will be a list of data ...
including the keys "name" and "values" on the basis of which the graph will be built.
update:

import React, { Component } from 'react';

import { BarChart } from 'react-d3';

export class first extends Component {

    constructor(...args) {
        super(...args);
        this.state = {};
    }

    render() {
  // необходимо заранее назначить на переменую список с минимальными данными включая  ключи "name"и "values"
    var data = [
    {
    	name: "series1",
    	values: [ { x: 0, y: 20 }, { x: 24, y: 10 } ]
  	},
  	{
    	name: "series2",
    	values: [ { x: 70, y: 82 }, { x: 76, y: 82 } ]
  	}
  ];
        return (
                <div>
                    <h1>First Chart</h1>

                    <BarChart
                                data={data}
                                width={500}
                                height={200}
                                fill={'#3182bd'}
                    />
                </div>
        );
    }
}
export default first;