Menu
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> 
952
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React. createElement(component, props, ...children) .
Coding JSXJSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
Browsers can't read JSX because there is no inherent implementation for the browser engines to read and understand them. JSX is not intended to be implemented by the engines or browsers, it is intended to be used by various transpilers to transform these JSX into valid JavaScript code.
JS is simply a scripting language, adding functionality into your website. JSX is an addition to the JavaScript syntax which is a mixture of both HTML and JavaScript. Both JS and JSX are interchangeable but JSX makes the code easier to understand for users.
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
