Re-transpile JSX on the fly in a reactjs app

Question

Is it possible to access and modify the JSX used to create a React class and re-transpile it on the fly. For example, if you had the following:

var Item = React.createClass({
    render: function () { 
        return <div>Hello</div>
    }
}

How could we: access the raw JSX, modify it to return something else, then transpile so the changes could be seen?

YES I understand this could be extremely dangerous.

Answer 1

It's probably easier to compile the JSX to JS first, and then use something like esprima to make the changes you need on the AST esprima gives you. Then pretty print it to JS again.

But I have to ask what your use case is, because it doesn't seem like the very best of ideas.