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.

A. Prerequisites

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 NodeJS and npm versions.

B. Getting Started

Steps:

Create your project folder structure.
Install and configurate all required modules.
Build and run the app

Step 1 - Create your root project folder

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.

Step 2 - Install and configurate all required modules

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.

Step 3 - Build and run the app

I. Create index.html

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.

II. Create Our Component

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:

C. 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 a reference we need to call the desired event/property/method.
This is done in the componentDidMount() React Component Lifecycle method.

I. Events

To bind to an event you must use the following format:

For example we want to bind to the jqxBarGauge event drawEnd:

II. Methods & Properties

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.