It's pretty straight forward to use JSX outside of React. If you're using Babel you can simply add /** @jsx ExampleDOM */ As the first line in your Javasc

It's pretty straight forward to use JSX outside of React. If you're using Babel you can simply add /** @jsx ExampleDOM */ As the first line in your Javascript source file. This indicates to the transpiler to convert statements of the form <example name="Wesley" age={15}> <Message text="hello"/> <Message text="world"/> </example> into ExampleDOM('example', { name: 'Wesley', age: 15 }, ExampleDOM(Message, { text: 'hello'}), ExampleDOM(Message, { text: 'world }) ) where you implement ExampleDom as function ExampleDOM(element_or_component, attributes, ...children) { } Note that because 'example' starts with a lowercase character, it is transpiled into a string first-argument to the ExampleDOM function. If it starts with an Uppercase letter (i.e. 'Message' above) it is interpreted as an in-scope Javascript variable. We've had really good results using JSX outside of the core react library. For example, we've built a "React.js for Excel" that lets us easily create rich Excel workbooks: <worksheet clear protect flow="column" name={`Bespoke - ${network.shortname} - WACC`} tabColor={theme.bespokeBlue} displayGridlines={false} style={worksheetStyle}> <PageLayout title={`${network.name} Cost-of-Capital Worksheet`} lastUpdated={new Date()}> <UpdatedWACCEstimates network={network} determination={determination}/> <WACCForecast network={network} forecast={forecast}/> </PageLayout> </worksheet> Which looks a lot like React.js and behaves almost exactly the same, but it's targeting the Excel COM Object model rather than the HTML DOM.