React UI Components Documentation

Using React WebPack and jQWidgets

Steps:

1. Create your project folder structure
2. Configurate and install all required packages
3. Build the app

Step 1 - Create your root project folder

The root folder contains a the configuration files and the src folder which holds the main content of the application:

 /root
    /config
        /webpack.base.config.js
        /webpack.opt.config.js
        /webpack.prod.config.js
    /server
        /routes
            /index.js
        /index.js
    /src
        /index.html
        /index.js
    /package.json
                        

Step 2 - Install and configurate all required packages

Let's take a look at the config files:

I. package.json

After your package.json is ready type npm install in your CLI.

Then we need to configure the webpack files:

II. webpack.base.config.js

III. webpack.opt.config.js

IV. webpack.prod.config.js

Then we need to configure the development server:

V. server/index.js

VI. server/routes/index.js

Step 3 - Build the app

I. src/index.html

The application will appear under the #app tag.

II. src/index.js

First we need to add the references for the needed React and jQWidgets React modules:

Then we create our widget class. Properties and methods are put as React props:

Then we render our class in the desired HTML element: