EN
React - runtime compilation in browser with Babel example
7 points
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:
- inside
<head>element, add the following scripts:or:xxxxxxxxxx1<script src="https://unpkg.com/react/umd/react.development.js"></script>2<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>3<script src="https://unpkg.com/@babel/standalone/babel.js"></script>xxxxxxxxxx1<script src="https://unpkg.com/react/umd/react.production.min.js"></script>2<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>3<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> - inside
<body>element:- add
<div id="root"></div>element, - add
<script type="text/babel"></script>and paste JSX code inside,Hint: do not forget to render application inside
div#rootelement (ReactDOM.render()function).
- add
In this section, you can find development and production versions for the same source code.
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://unpkg.com/react/umd/react.development.js"></script>5
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>6
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>7
</head>8
<body>9
<div id="root"></div>10
<script type="text/babel">11
12
// Note: the below source code imports are placed automatically with UMD modules.13
14
// import React from react';15
// import ReactDOM from 'react-dom';16
17
const Component = props => {18
return (<div>My component!</div>);19
};20
21
const App = () => (22
<div className="App">23
<Component />24
</div>25
);26
27
const root = document.querySelector('#root');28
ReactDOM.render(<App />, root);29
30
</script>31
</body>32
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>5
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>6
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>7
</head>8
<body>9
<div id="root"></div>10
<script type="text/babel">11
12
// Note: the below source code imports are placed automatically with UMD modules.13
14
// import React from react';15
// import ReactDOM from 'react-dom';16
17
const Component = props => {18
return (<div>My component!</div>);19
};20
21
const App = () => (22
<div className="App">23
<Component />24
</div>25
);26
27
const root = document.querySelector('#root');28
ReactDOM.render(<App />, root);29
30
</script>31
</body>32
</html>
