Supongamos que tenemos el siguiente componente React simple basado en clases:

 const e = React.createElement; class App extends React.Component { constructor(props) { super(props); this.state = { clicked: false }; } render() { let sizeValue = "16px"; if(this.state.clicked) { sizeValue = "28px"; } return e( "div", { style: {fontSize: sizeValue}, onClick: () => this.setState({ clicked: !this.state.clicked }) }, this.state.clicked ? 'big text' : 'small text' ); } } const container = document.querySelector('#root'); ReactDOM.render(e(App), container);

Entonces, si alguien hace clic en el div, su texto se vuelve grande y si vuelve a hacer clic, el texto vuelve al tamaño predeterminado.

Como veo, en este caso, React no agrega ningún atributo como onclick="..." u otro al componente en HTML renderizado. Y si queremos aprender en el front-end mediante algún código personalizado de cliente JS si el componente tiene un controlador de eventos o alguna lógica, debemos analizar el código JS del componente en su archivo JS.

Mi pregunta, ¿hay una opción integrada o de terceros para ver siempre los controladores de eventos de componentes y/o su lógica en HTML renderizado en algún atributo HTML, por ejemplo, algo como data-react="..." ?

Me refiero a "ver" no "manualmente" por un desarrollador, sino "programadamente" por código de cliente JS personalizado.

También me refiero a no agregar manualmente un atributo en el código JS de un componente con la descripción de sus controladores o lógica, sino habilitar una opción (si hay una) para que React "automáticamente" agregue dicho atributo en HTML renderizado.