React - runtime compilation in browser with Babel example

7 points
Created by:

In this short article we would like to show how to run React JSX script directly in web browser without previous compilation - it is runtime compilation.

The solution for the problem is to:

  1. attach following scripts inside head element:
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
  2. paste JSX code inside <script type="text/babel"></script> in body.

Practical example:

// ONLINE-RUNNER:browser;

  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <div id="root"></div>
  <!-- copy below script body to React project -->
  <script type="text/babel">

	//Note: Uncomment import lines during working with JSX Compiler.
	// import React from react';
    // import ReactDOM from 'react-dom';

	const Component = props => {
		return (<div>My component!</div>);

	const App = () => (
		<div className="App">
			<Component />

	const root = document.querySelector('#root');
	ReactDOM.render(<App />, root );



React - runtime compilation in browser
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂