How import a React component from github?

Question

i'm trying to understand how React works.

I want to use react-chartjs library. (https://github.com/jhudson8/react-chartjs). How can i import it in my project?

i tried in this way:

in a file MyComponent.js:

var LC = React.createClass({
render: function(){
    var xfield = this.props.xfield;
    var yfield = this.props.yfield;
    var data = {
            labels: xfield,
            datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: yfield
            }]
        }


    return(
        <LineChart data={data} width="600" height="250" />
    );

}});


var MyComponent = React.createClass({

render: function(){
    return(
        <LC xfield={a} yfield={b} />
    );  
}});

 React.render(<MyComponent />, document.getElementById('content'));

i'm assuming a e b are arrays of values.

my index page is this:

<html>
  <head>
    <!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="js/react-chartjs.js"></script>
<script type="text/jsx;harmony=true" src="MyComponent.js"></script>

</head>
<body>
    <div id="content"></div>
</body>

react-chartjs.js should be the compiled chartjs component.

Running the index in this way i have this error:

 Uncaught ReferenceError: LineChart is not defined

i need to use this line

var LineChart = require("react-chartjs").Line;

but in MyComponent.js i have the error that require is not defined

What's wrong??

Kartikeya Sharma · Accepted Answer · 2015-11-22 06:29:28Z

1

In node.js require module is in-built , but in browser if you have to use require then you have to use require.js or just inherit the script from the folder in the html part <script type="text/jsx" src ="/path/to/the file/"></script>

answered Nov 22, 2015 at 6:29

Kartikeya Sharma

5531 gold badge5 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henrik Andersson · Accepted Answer · 2015-06-10 13:27:20Z

0

When using require() you're trying to use a module system commonly referred to as CommonJS, and it appears that react-chartjs is only available as a CommonJS module.

CommonJS style module loader was introduced in and used through out Node.js and IO.js as the default way of importing modules and scripts in to your application.

CommonJS is not bundled with any browser today which is why you would have to run your scripts through tools like Browserify or Webpack.

answered Jun 10, 2015 at 13:27

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Comments

Davin Tryon · Accepted Answer · 2015-06-10 13:27:34Z

0

From the installation section on react-chartjs:

This is a CommonJS component only (to be used with something like Webpack or Browserify)

Both Webpack and Browserfiy enable you to use require to load modules. In seems that react-chartjs is designed to work only with one of these tools.

answered Jun 10, 2015 at 13:27

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

2 Comments

ntrax Over a year ago

ok now i'm trying this: var LineChart = require("react-chartjs").Line; var MyComponent = React.createClass({ render: function() { return <LineChart data={chartData} options={chartOptions} width="600" height="250"/> } }); } and using this command : browserify -t reactify main.js -o bundle.js and then calling bundle.js into index.html it doesn't works }); React.render(<MyClass />, document.body);

Davin Tryon Over a year ago

The project installation page also says that you must include chart.js as a dependency.

Collectives™ on Stack Overflow

How import a React component from github?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related