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.

Fantastic. Thank you for the detailed response and examples.