Est-il possible d'appeler ReactDOM.render() lors de l'utilisation de JSX de vanilla JS?

Question

Actuellement j'apprends ReactJS. Si je comprends bien, le code, écrit avec JSX, n'a pas de portée de visibilité différente avec JS vanilla. Mais si je veux faire quelques trucs sur JS vanilla et seulement ensuite appeler ReactDOM.render() mais je veux toujours utiliser JSX avec React, est-ce possible et si oui - comment?

Answer 1

class RootComponent extends React.Component { 
    render() { 
     return (
      <div > 
      Hello, World. 
      </div> 
     ) 
    } 
} 

ReactDOM.render(
    React.createElement(RootComponent), 
    document.getElementById('root') 
); 

Notez que l'appel de rendu n'a pas de JSX. Cela signifie que vous pouvez diviser le principal fichier javascript, et l'appeler dans un contexte, par exemple en ligne javascript dans une balise script < >:

main.js:

class RootComponent extends React.Component { 
    render() { 
     return (
      <div > 
      Hello, World. 
      </div> 
     ) 
    } 
} 

index.html:

<script> 
    ReactDOM.render(
     React.createElement(RootComponent), 
     document.getElementById('root') 
    ); 
</script>