CODEWITHSUNDEEP
javascriptnode.jsreactjs
ntrax
ntrax

Reputation: 457

How import a React component from github?

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??

Upvotes: 0

Views: 1861

Answers (3)

Kartikeya Sharma
Kartikeya Sharma

Reputation: 553

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>

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 0

Henrik Andersson
Henrik Andersson

Reputation: 47182

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.

Upvotes: 0

Related Questions