为什么ReactJS中需要browser.min.js? [英] Why is browser.min.js needed in reactjs?
问题描述
我正在尝试构建一个简单的React应用程序，并且想知道为什么我需要browser.min.js文件.
我同时包含了react和react-dom.js，但是除非同时包含browser.min.js，否则什么也不会显示.
<！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><身体>< div id ="example"></div>< script type ="text/babel">ReactDOM.render(< h1>你好，世界！</h1> ;，document.getElementById('example'));</script></body></html> 正如您在代码段中所看到的那样，脚本标签的类型为"text/babel"，这是因为您使用的是JSX(JavaScript和XML)它)里面.
JSX 正在编写编码糖，以使其更直观"地在javascript中构建XML(在这种情况下为HTML)组件代码(不仅是React元素).React将其用作用于创建/定义UI元素的合成方法上的抽象层.但是，JSX不是全球公认的标准，因此并非所有浏览器都支持.这就是您需要第三方编译器"库将JSX转换为原始JS的原因，这就是 BABEL 引入的地方./p>
BABEL 是一个JavaScript编译器，并导入其"browser.min.js"文件，即可启用其编译"代码在文本/babel"脚本标签中并将其作为普通javascript执行.
因此，在您的示例中，您具有下一个代码:
< div id ="example"></div>< script type ="text/babel">ReactDOM.render(< h1>你好，世界！</h1> ;，document.getElementById('example'));</script> 页面加载后，"browser.min.js"将对其进行处理，并且将要执行的javascript代码应如下所示:
ReactDOM.render(React.createElement('H1'，null，'Hello world！')，document.getElementById('example')); 如果不想加载此"browser.min.js"，主要的替代方法是:
-
将您的React代码放在单独的文件中，并在进行更改时编译它们(所有这些都是在服务器端).您的html代码应引用已编译的文件(应仅包含原始JS代码)，而不是原始的JSX文件.有几种方法取决于您的编码工具.
-
仅使用原始JS来创建和定义您的React"Html"层次结构(React.createElement(...)).
更详细地说明这些方法应在其他问题中涵盖.
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>
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.
这篇关于为什么ReactJS中需要browser.min.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
