React WebPack & jQWidgets

You can download the final result here.


Steps:

  1. Create Your Project Folder Structure
  2. Configurate and Install All Required Packages
  3. Build the App

Step 1 - Create Your Project Folder Structure

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


 /root
    /src
        /index.tsx
        /App.tsx
    /index.html
    /package.json
    /tsconfig.json
    /webpack.config.js

Note: Structure may vary based on your application needs.

Step 2- Configurate and Install All Required Packages


package.json


tsconfig.json


webpack.config.js


When all the config files are ready, it is time to install the packages:

npm install

Step 3- Build the App


index.html


index.tsx


App.tsx

Now when all files are populated, it is time to build the app:

npm start

A folder called dist will appear on root level. Inside will be our bundled application.

All that is left is to open index.html and enjoy your new app.