在React应用程序中，前端是否接收原始的React代码或普通html？

Question

浏览器是否接收到了React代码，并在前端将其呈现为纯html，还是将其呈现为后端的纯html，而浏览器只是从服务器接收到这个普通html？

Answer 1

在vanilla React应用程序(不使用服务器端呈现)中，有两个选项：

• 在构建过程中将React代码(JSX)编译到普通的JavaScript。例如，<h1>将变成React.createElement('h1')。(此生成过程仅在程序员对代码进行更改时发生。)然后，客户端被发送转移的香草代码。这是迄今为止最常见的技术。
• 不要对JSX进行任何预处理；相反，将其发送到客户机而不作任何更改，并让客户端将JSX标记处理到可运行的JavaScript中。客户端可以通过巴别尔处理JSX。这是不寻常的，因为客户端需要相当多的开销，但偶尔也很有用(比如Stack溢出的Stack代码段)。

这里有一个使用Babel标准编译和运行JSX的示例，它完全在客户端：

​

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.10.3/babel.min.js" crossorigin="anonymous"></script>
<script type="text/babel">
const App = () => {
  return 'app';
};
ReactDOM.render(<App />, document.querySelector('.react'));
</script>

<div class="react"></div>

​

但是偶尔应用程序会使用服务器端呈现，其中逻辑主要在服务器上运行，然后服务器将普通的HTML标记发送到客户端，然后客户端显示它。用于实现这一目标的一个通用框架是Next.js。