原生js怎么渲染jsx

原生JS渲染JSX的三种方法是：使用Babel编译JSX代码、手动编写转换函数、使用现有的JSX转换库。下面将详细介绍如何通过这些方法来实现原生JS渲染JSX。

一、使用Babel编译JSX代码

Babel是一款强大的JavaScript编译器，可以将JSX代码转换为原生JavaScript代码。这种方法是最常见的，因为Babel提供了广泛的支持和便利。

1. 配置Babel

要使用Babel，你首先需要安装它。以下是使用npm安装Babel和相关插件的步骤：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

2. 创建Babel配置文件

在项目根目录下创建一个名为.babelrc的文件，并添加以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3. 编译JSX代码

你可以使用Babel CLI来编译JSX文件。例如，假设你有一个app.jsx文件：

const element = <h1>Hello, world!</h1>;

你可以使用以下命令来编译它：

npx babel app.jsx --out-file app.js

编译后的app.js文件将包含原生JavaScript代码：

const element = React.createElement("h1", null, "Hello, world!");

4. 在HTML中引入编译后的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX Rendering</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="app.js"></script>
    <script>
        ReactDOM.render(element, document.getElementById('root'));
    </script>
</body>
</html>

二、手动编写转换函数

如果你不想使用Babel，可以手动编写一个函数来将JSX代码转换为JavaScript。虽然这种方法较为繁琐，但它可以更好地帮助你理解JSX的工作原理。

1. 编写JSX转换函数

首先，你需要编写一个函数来处理JSX语法。以下是一个简单的示例：

function createElement(type, props, ...children) {
    return {
        type,
        props: {
            ...props,
            children: children.map(child =>
                typeof child === "object"
                    ? child
                    : createTextElement(child)
            )
        }
    };
}
function createTextElement(text) {
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: []
        }
    };
}

2. 渲染函数

接下来，你需要一个渲染函数，将上述创建的元素渲染到DOM中：

function render(element, container) {
    const dom =
        element.type === "TEXT_ELEMENT"
            ? document.createTextNode("")
            : document.createElement(element.type);
    const isProperty = key => key !== "children";
    Object.keys(element.props)
        .filter(isProperty)
        .forEach(name => {
            dom[name] = element.props[name];
        });
    element.props.children.forEach(child =>
        render(child, dom)
    );
    container.appendChild(dom);
}

3. 使用JSX转换函数

现在，你可以使用上述函数来处理JSX代码：

const element = createElement(
    "div",
    { id: "foo" },
    createElement("a", null, "bar"),
    createElement("b")
);
const container = document.getElementById("root");
render(element, container);

三、使用现有的JSX转换库

除了Babel之外，还有其他一些库可以帮助你将JSX代码转换为JavaScript，如JSX transpiler和ESBuild。

1. JSX Transpiler

JSX Transpiler是一个轻量级的工具，可以将JSX代码转换为JavaScript。你可以在HTML文件中直接使用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX Transpiler</title>
    <script src="https://unpkg.com/jsx-transpiler/dist/jsx-transpiler.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/jsx">
        const element = <h1>Hello, world!</h1>;
        const container = document.getElementById('root');
        ReactDOM.render(element, container);
    </script>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
</body>
</html>

2. ESBuild

ESBuild是一款高速的JavaScript打包工具，同样支持JSX转换。以下是使用ESBuild的示例：

npm install esbuild

创建一个简单的构建脚本build.js：

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
  plugins: [
    require('esbuild-plugin-jsx')({
      factory: 'React.createElement'
    })
  ],
}).catch(() => process.exit(1));

运行构建脚本：

node build.js

编译后的out.js文件将包含原生JavaScript代码。

四、总结

原生JS渲染JSX的方法主要包括使用Babel编译JSX代码、手动编写转换函数、使用现有的JSX转换库。使用Babel编译JSX代码是最常见和便捷的方法，因为它提供了广泛的支持和便利。手动编写转换函数可以帮助你更好地理解JSX的工作原理，但较为繁琐。使用现有的JSX转换库如JSX Transpiler和ESBuild同样是可行的选择。这些方法各有优缺点，开发者可以根据项目需求和个人偏好选择适合的方法。