Languages
[Edit]
EN

React - runtime compilation in browser with Babel example

7 points
Created by:
JustMike
26670

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="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  2. paste JSX code inside <script type="text/babel"></script> in body.

Practical example:

// ONLINE-RUNNER:browser;

<!DOCTYPE>
<html>
<head>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <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 />
		</div>
	);

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

  </script>
</body>
</html>

ReactJS

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join