Splitting up react js components into separate files — and handling the creation of a dashboard based application

Question

I am looking at using reactjs as a framework to manage/control the various chart widgets.

-- when I started looking to place these components into separate js files -- undefined errors started appearing.

-- then how to structure how the charts should be rendered on a panel, how interactions could be implemented -- master/slave relationships -- update cta

http://jsfiddle.net/cfrapLma/28/

var config = [{
              "width": 200,
              "height": 200,
              "type": "piechart",
              "serviceApi": "api.php?mode=GetCars"
          }, {
              "width": 100,
              "height": 100,
              "type": "barchart",
              "serviceApi": "api.php?mode=GetBoats"
          },
          {
              "width": 200,
              "height": 200,
              "type": "piechart",
              "serviceApi": "api.php?mode=GetCars"
          },
          {
              "width": 200,
              "height": 200,
              "type": "linechart",
              "serviceApi": "api.php?mode=GetCars"
          }];



          var MultipleCharts = React.createClass({
              getChart: function(config) {
                  switch (config.type) {

                      case 'piechart':
                          return <PieChart width={config.width} height={config.height} service={config.service} />
                      case 'barchart':
                          return <BarChart width={config.width} height={config.height} service={config.service} />
                      case 'linechart':
                          return <LineChart width={config.width} height={config.height} service={config.service} />
                  }
              },

              render: function () {
                  var config = this.props.config;

                  return (
                      <div>
                          {config.map((chartConfig, index) => {
                              return (
                                  <div key={index} className={'holder' + index}>
                                      {this.getChart(chartConfig)}
                                  </div>
                              )
                          })}
                      </div>
                  );
              }
          });

          var PieChart = React.createClass({
              componentDidMount: function () {
                  var $this = $(ReactDOM.findDOMNode(this));
                  console.log("rendered div now engage d3");
                  // set el height and width etc.
              },
              render: function () {
                  return (
                      <div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height}
                          data-service={this.props.service}>pie.
                      </div>
                  );
              }
          });

          var LineChart = React.createClass({
              componentDidMount: function () {
                  var $this = $(ReactDOM.findDOMNode(this));
                  console.log("rendered div now engage d3");
                  // set el height and width etc.
              },
              render: function () {
                  return (
                      <div className="linechart" data-role="linechart" data-width={this.props.width} data-height={this.props.height}
                          data-service={this.props.service}>line.
                      </div>
                  );
              }
          });



          var BarChart = React.createClass({
              componentDidMount: function () {
                  var $this = $(ReactDOM.findDOMNode(this));
                  console.log("rendered div now engage d3");
                  // set el height and width etc.
              },
              render: function () {
                  return (
                      <div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height}
                          data-service={this.props.service}>bar.
                      </div>
                  );
              }
          });


          ReactDOM.render(
              <MultipleCharts config={config} />,
              document.getElementById('example')
          );

Answer 1

You should use some build tools like webpack or gulp. I am provides an example that how you should do it.

https://github.com/OnlyRefat/Example

It will help to you write moduler code. You can write code in separate files easily.