How to use modules/packages like htmltojsx in ASP.Net or in any other web application - module

Question

In order to convert some dynamic HTML to React's JSX, in my ASP.Net MVC based project I want to use htmltojsx, but can't figure out how to incorporate it in the project as it involves requireJS and probably some other JavaScript dependencies.
If someone can describe it in an easy/clear manner, would be of great help. Will salute you if some working example fiddle is also provided.

Answer 1

OK, posting answer to my own question after a long time. Here is a brief summary of what I found out during my research on this topic in past few weeks.
Actually it involved exploring various co-related topics before to getting onto the right point.
To understand how to incorporate packages (especially npm based) like htmltojsx into web apps, we need to understand first 'Modules'.
By 'Modules' we mean a composed set of highly decoupled, distinct pieces of functionality that we have also the ability to dynamically load, sort of something like 'Import' statements we have in C# and some other Server side Languages.
Most modules are either based on CommonJS or AMD formats. Here is a very nice Blog on these. Please do read it first for a through understanding.
Writing Modular JavaScript With AMD, CommonJS & ES Harmony
To make us enable to use these modules in any web application there are then Module bundlers like Webpack, Browserify etc.
In short, a Module bundler takes modules with dependencies and generates static assets (like .js/.css files etc.) representing those modules.
These static assets can then be used in any web page like we do with HTML script/link tags normally.
Also to mention here, for using Webpack/Browserify one must first understand node's npm package manager which has become heart and soul of all Javascript's module based applications. Basically npm is a package manager and makes it easy for JavaScript developers to share and reuse code. It has become the de-facto standard behind the creation of well managed module based applications.
For using this an understanding of package.json is primary and vital step.
A developer must have to define the dependencies in a file named as package.json that describes modules/packages that an application will depend upon.
There are mainly two kinds of dependencies. Normal dependencies, defined in "dependencies" option (which are packaged along with the output static asset(s)) and "devDependencies" (which take part in compilation of modules and/or their resources). A typical devDependency is Babel, which is used to compile ES6 aka ES2015, React etc. to ES5 syntax which all major Browsers can understand.
After defining these dependencies in package.json file, we can just use them using a simple require statement, example:
var webpack = require("webpack");
An example package.json file would look something like this:
{
"name": "my-sample-app",
"description": "My sample app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "John",
"dependencies": {
"classnames": "^2.1.3",
"datejs": "0.0.2"
},
"devDependencies": {
"babel": "^6.3.26",
"babel-core": "^6.4.0",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"css-loader": "^0.23.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.11"
}
}
Once we understand package.json and some npm commands, using webpack we can compile modules into static assets and then use them in any web page.
Here are also some links that can help us understand all this better:
Getting Started With React ES6 & Webpack
Setting up React for ES6 with Webpack and Babel