How to work with require function React.js charts?

Question

I wanted to run this demo https://github.com/reactjs/react-chartjs

Installation (I have run this part)

This is a CommonJS component only (to be used with something like Webpack or Browserify)
npm install --save react-chartjs
You must also include chart.js and React as dependencies.
npm install --save chart.js@^1.1.1 react react-dom

I don't know how to run this below part:

Example Usage

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

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

This is my complete html file:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="dist/react-chartjs.js"></script>

<body>
<script>
var LineChart = require("react-chartjs").Line;

/*var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});
*/
</script>


</body>
</html>

It generates errors like:

test.html:14 Uncaught ReferenceError: require is not defined(…)

or

test.html:18 Uncaught SyntaxError: Unexpected token <

Update

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="dist/react-chartjs.js"></script>
<script src="js/require.js"></script>

<body>
<script type='text/babel'>
var LineChart = require("react-chartjs").Line;

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

</script>


</body>
</html>

now the error is:

Uncaught Error: Module name "react-chartjs" has not been loaded yet for context: _. Use require([])(…)

I highly recommend using Facebook's official react starter app. You'll have a way better time https://github.com/facebookincubator/create-react-app — azium, Oct 25 '16 at 16:17
for babel to work properly the way you are doing it, make sure you add ` — finalfreq, Oct 25 '16 at 17:31
Then why not use chartjs directly instead of the React wrapper? — azium, Oct 25 '16 at 18:08
@azium will it be right way to do that? i just wanted to know right way i am new in it. i can add it directly — Muhammad, Oct 25 '16 at 18:16
I mean.. don't use React at all... if you're going to use React then follow the instructions in the `create-react-app` repo and start using that project instead of what you have. — azium, Oct 25 '16 at 18:56
It's *literally* designed to be the absolute easiest way to start a React project, and instructions are dead simple. I believe in you man. — azium, Oct 25 '16 at 18:58

score 0 · Answer 1 · answered Aug 21 '17 at 20:32

You have to Use ReactDOM to inject the React (app) component into your html.

Essentially, make a div with an id, then call ReactDOM, like so:

HTML

<!-- React app component will be injected in the div below -->
<div id="app-area"></div>

JavaScript

ReactDOM.render(<MyComponent />, document.getElementById('app-area'));

How to work with require function React.js charts?

Update

1 Answers1