ReactDOM.render签名

Question

在ReactJs中渲染标签，我们通常在脚本标签中使用以下代码

<script type="text/babel">
    ReactDOM.render(<App />, document.getElementById('root'));
</script>

这里的第二个参数是有效的JS，但是第一个参数是什么？第一个参数表示什么（函数，变量）？

babel在这里起什么作用？会在引擎盖下创建App Class对象并替换它吗？

Answer 1

这是一个React（JSX）组件。如果有的话，这将成功编译

import React from 'react';

位于代码顶部。这意味着它将转换为普通的JS类/函数（取决于您编写组件的方式）。

这看起来只是为了使React易于编写和思考。转译的代码将是React框架用来呈现代码的某些本地Javascript。除非您想更改React框架本身的工作方式，否则您无需完全理解它。

实际上，所有React <Components>都只是带有渲染方法的函数或类。

[edit：在捆绑过程中，您将对Babel产生依赖性，因为这就是转储的内容。但是，由于您应该使用create-react-app或类似的方法来制作应用程序，所以在此阶段将为您进行隐形处理。但是，如果您想变得聪明一点，就需要对捆绑器（例如Webpack / Gulp / Parcel）和Babel有了基本的了解。]

Answer 2

第一个参数是JSX元素，后来被转换为普通javascript。