How to shove a calculator that is written in jQuery as a React component?

Question

JavaScript

Created a JQuery calculator: jsfiddle.net/y0modxw9
Created a separate class, where I rendered an HTML structure through React (later exported it and imported it into large jsx, as usual)
In the index.html file (used to include the already built Webpack' ohm bundle) registered separately the path to his calculator script + CDN JQuery. The usual console.log works, that is, the path to the script and JQuery itself work. But when I insert the script itself, it does not come out. Despite the fact that the script works on online sites (JSFiddle is the same), and when locally I use the whole thing without React and Webpack.

Thank you for your attention.

Answer 1

To be honest, I'm not sure that you purposefully studied React.
I recommend spending a little time on this course: https://maxfarseer.gitbooks.io/react-course-en/content/
A small example on ES5:
To limit input, for example, take the ready-made plugin react-numeric-input

var NumericInput = require('react-numeric-input');

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      price: 0,
      offer: 0,
      result: 0
    };
  },
  caclResult: function() {
    this.setState({result: this.state.price - this.state.offer});
  },
  render: function() {
    return (
      <div className='calculator'>
        <NumericInput min={0} max={100} value={this.state.price} onChange={this.caclResult} />
        <NumericInput min={0} max={100} value={this.state.offer} onChange={this.caclResult} />
        <span>Итого: {this.state.result}</span>
      </div>
    )
  }
});