create-react-app 的 index.js 文件是如何解析 JSX 的？

Question

使用 create-react-app 创建站点后，可以看到 JSX 使用 ReactDOM.render() 方法在 index.js 文件中呈现。

那么，JSX 怎么可能仍在该方法之外进行解析，如下所示：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const jsxArray = [
    <div>test</div>,
    <div>test</div>,
    <div>test</div>
];

console.log(jsxArray);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

控制台输出：

Answer 1

工作中的babel编译器

Babel 只编译目标文件中与插件匹配的任何有效语法，它基本上不关心你是否将语法放入任何有效的 Reactjs 组件中。

所以基本上，您可以将任何带有 babel compiler 目标的文件设置为 jsx，它将 return 该文件中的任何 jsx 语法设置为普通的 javascripts。

而且也没有必要在任何实际组件中执行此操作

你可以试试here

create-react-app 的 index.js 文件是如何解析 JSX 的？

How is it that the index.js file of a create-react-app can parse JSX?

jsx

reactjs

create-react-app

工作中的babel编译器