Can I use inline HTML in a script as below by using a library like jsx:
<script src="jsx-transform.js"></script>
<script type="text/jsx">
define('component', function () {
return (<div>test html code</div>);
});
</script>
I was able to write JSX files and inject them into an HTML page using a 'fake' React file.
no-react.js
/**
* Include this script in your HTML to use JSX compiled code without React.
*/
const React = {
createElement: function (tag, attrs, children) {
var element = document.createElement(tag);
for (let name in attrs) {
if (name && attrs.hasOwnProperty(name)) {
let value = attrs[name];
if (value === true) {
element.setAttribute(name, name);
} else if (value !== false && value != null) {
element.setAttribute(name, value.toString());
}
}
}
for (let i = 2; i < arguments.length; i++) {
let child = arguments[i];
element.appendChild(
child.nodeType == null ?
document.createTextNode(child.toString()) : child);
}
return element;
}
};
Then compile your jsx.
test.jsx
const title = "Hello World";
document.getElementById('app').appendChild(
<div>
<h1>{title}</h1>
<h2>This is a template written in TSX, then compiled to JSX by tsc (the Typescript compiler), and finally
injected into a web page using a script</h2>
</div>
);
Resulting compiled 'test.js'
var title = "Hello World";
document.querySelector('#app').appendChild(React.createElement("div", null,
React.createElement("h1", null, title),
React.createElement("h2", null, "This is a template written in TSX, then compiled to JSX by tsc (the Typescript compiler), and finally" + " " + "injected into a web page")));
And finally, the HTML page that includes both scripts.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>no-react</title>
<script src="no-react.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="test.js"></script>
React renders JSX html syntax to JS using functions such as React.createElement (among others for Fragments and so on). But that all boils down to the @babel/plugin-transform-react-jsx plugin which does the transpiling of this:
return(<div id="hello">Hello World</div>)
into this...
return React.createElement('div', {id: 'hello'}, 'Hello World');
However you can replace React.createElement with you're own function to do this. You can read more on that here: https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html
You should also look at libraries which do exactly this such as nervjs, jsx-render and deku. All of these use a JSX html syntax without react. Some (such as jsx-render) are only focused on converting JSX to the final JS, which might be what you're looking for.
The author of that package wrote an article on it here: https://itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561
Also Typescript can do this if you use that...but I've no first hand experience with it.
To sum up
You can do it without React, but not without Babel or Typescript.
JSX is not a string-based templating language; it compiles to actual JavaScript function calls. For example,
<div attr1="something" attr2="other">
Here are some <span>children</span>
</div>
transpiles to
React.createElement("div", {attr1: "something", attr2: "other"},
"Here are some ", React.createElement("span", null, "children")
)