Why is browser.min.js needed in reactjs?
Question
I'm trying to build a simple React application and am wondering why I need the browser.min.js file.
I have included both react and react-dom.js, but nothing is displayed unless browser.min.js is also included.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
3 answers
solution1
30 ACCPTED 2016-04-18 16:28:56
As you can see in your snippet, the script tag is of type "text/babel", and that's because you are coding using JSX (Javascript with XML on it) inside it.
JSX is coding sugar created to make it more "intuitive" to build XML (HTML in this case) components in javascript code (not only React elements, though). React makes use of it as an abstraction layer over the composition methods used to create/define UI elements. But JSX is not a globally accepted standard, so it isn't supported by all browsers. This is the reason that you need a third party "compiler" library to transform the JSX to vanilla JS, and this is where BABEL comes through.
BABEL is a javascript compiler, and importing its "browser.min.js" file, you are enabling it to "compile" the code inside "text/babel" script tags and execute it as vanilla javascript.
So, in your example, you have the next code:
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
And "browser.min.js" will process it when the page has loaded and the javascript code that will be executed should be something like this:
ReactDOM.render(
React.createElement('H1', null, 'Hello world!'),
document.getElementById('example'));
The main alternatives you have if you don't want to load this "browser.min.js" are:
Have your React code in separate files and compile them whenever you make a change (all of this is server-side). Your html code should reference the compiled files (which should have only vanilla JS code) instead of your original JSX ones. There are several ways to do this depending on your coding tools .
Use only vanilla JS to create and define your React "Html" hierarchy (React.createElement(...)).
Explaining in more detail these methods should be covered in other questions.
solution2
3 2016-04-18 14:20:56
您已经在Babel（ES7）中编写了代码，而不是浏览器可以本机处理的JavaScript版本，并且您将ES7交付给浏览器而不是在构建时进行转换。
solution3
3 2017-05-12 14:31:24
Found that Babel's own 'browser.js' isn't working anymore?
'browser.js' was deprecated back in 2015, meaning that continuing to be able to compile in-browser JSX became a little bit tougher.
Thankfully, the babel-standalone project is a drop-in replacement, and appears to be in active development.
'babel-standalone' seems to be endorsed by the BabelJS project itself, noted by its inclusion on this page .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.