React UI Components Documentation
React UI Components for jQWidgets
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.
Node.js - to verify that you have it installed, run the command node -v in cmd. It will output the current version.
Note: Make sure that you are running on the latest Node.js and npm versions.
Setup using create-jqwidgets-react-app
To use a template project with jQWidgets and Create React App, please refer to: create-jqwidgets-react-app
This is the simplest way to get jQWidgets working with React.
Setup using Create React App
To use the React Components with Create React App, please refer to: Create React App
Setup using AOT Webpack Compilation
To use the React Components with React WebPack, please refer to: React Webpack
Events Methods & Properties
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 the reference, we can 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:
II. Methods & Properties
Every widget have a method setOptions which accepts an object as an argument. This object contains widget settings:
Every widget also have a method getOptions which returns an object containing the widget settings: