title: line chart not working using react-d3-components in create-react-app
body: <p>I'm new to react and I'm trying to put react-d3-component in the create-react-app boilerplate.</p>
  
  <p>App.js looks like :</p>
  
  <pre><code>import ReactD3 from 'react-d3-components';
  import React from 'react';
  
  var LineChart = ReactD3.LineChart;
  var Brush = ReactD3.Brush;
  var d3 = ReactD3.d3;
  
  var App = React.createClass({
      getInitialState: function() {
          return {
              data: {label: '', values: [
                  {x: new Date(2015, 2, 5), y: 1},
                  {x: new Date(2015, 2, 6), y: 2},
                  {x: new Date(2015, 2, 7), y: 0},
                  {x: new Date(2015, 2, 8), y: 3},
                  {x: new Date(2015, 2, 9), y: 2},
                  {x: new Date(2015, 2, 10), y: 3},
                  {x: new Date(2015, 2, 11), y: 4},
                  {x: new Date(2015, 2, 12), y: 4},
                  {x: new Date(2015, 2, 13), y: 1},
                  {x: new Date(2015, 2, 14), y: 5},
                  {x: new Date(2015, 2, 15), y: 0},
                  {x: new Date(2015, 2, 16), y: 1},
                  {x: new Date(2015, 2, 16), y: 1},
                  {x: new Date(2015, 2, 18), y: 4},
                  {x: new Date(2015, 2, 19), y: 4},
                  {x: new Date(2015, 2, 20), y: 5},
                  {x: new Date(2015, 2, 21), y: 5},
                  {x: new Date(2015, 2, 22), y: 5},
                  {x: new Date(2015, 2, 23), y: 1},
                  {x: new Date(2015, 2, 24), y: 0},
                  {x: new Date(2015, 2, 25), y: 1},
                  {x: new Date(2015, 2, 26), y: 1}
              ]},
              xScale: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70]),
              xScaleBrush: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70])
          };
      },
  
      render: function() {
          return (
              &lt;div&gt;
                  &lt;LineChart
                      data={this.state.data}
                      width={400}
                      height={400}
                      margin={{top: 10, bottom: 50, left: 50, right: 20}}
                      xScale={this.state.xScale}
                      xAxis={{tickValues: this.state.xScale.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m/%d")}}
                  /&gt;
                  &lt;div className="brush" style={{float: 'none'}}&gt;
                      &lt;Brush
                          width={400}
                          height={50}
                          margin={{top: 0, bottom: 30, left: 50, right: 20}}
                          xScale={this.state.xScaleBrush}
                          extent={[new Date(2015, 2, 10), new Date(2015, 2, 12)]}
                          onChange={this._onChange}
                          xAxis={{tickValues: this.state.xScaleBrush.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m/%d")}}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      },
  
      _onChange: function(extent) {
          this.setState({xScale: d3.time.scale().domain([extent[0], extent[1]]).range([0, 400 - 70])});
      }
  });
  export default App;
  </code></pre>
  
  <p>index.js looks like :</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>i have already installed react-d3-components also it's there in package.json ; still I get errors like :</p>
  
  <p>TypeError: Cannot read property 'LineChart' of undefined</p>
  
  <p>Also, where ever there is d3.time.day there it says unresolved function. I also tried importing d3 the other way using : </p>
  
  <p>import * as d3 from 'd3'.</p>
  
  <p>But still I get some different errors.</p>
  
  <p>Please suggest what I'm doing wrong, so that I can set up my initial code to work.</p>
  
  <p>Thanks</p>