React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Note: Make sure that you are running on the latest
The root folder contains our index.html, a few configuration files, and the app folder which holds the main content of the application.
/root /app /app.js /index.html /package.json /webpack.config.js
Note: Structure may vary based on your application needs.
First we need to install the React, Webpack and Babel required modules. For that we need a package.json file. Here is ours:
After your package.json is ready type npm install in your CLI.
Then we need to configure the webpack.config.js file:
Note: Configuration may vary based on your application needs.
Add the needed jQWidgets references:
Add the initialization tag and our app bundle to the body of the index.html.
The app bundle is generated when we type npm start in our CLI.
First we need to add the references for the needed react modules and jQWidgets React files :
Then we create our widget class. Properties and methods are put as React props.
Then we render our class in the desired HTML element:
In order to bind to any event, change any property or call any method we need a reference to the widget.
For that we use the React "ref" Callback Attribute:
Now when we have a reference we need to call the desired event/property/method.
This is done in the componentDidMount() React Component Lifecycle method.
To bind to an event you must use the following format:
For example we want to bind to the jqxBarGauge event drawEnd:
Every widget have a method setOptions which accepts a object as an argument. This object contains widget settings.
Every widget also have a method getOptions which returns a object containing the widget settings.