如何在浏览器中使用 JSX 导入 javascript 模块？

Question

作为 React 项目的一部分，我有一个具有以下结构的目录。

index.html
main.js
mod.js

在 HTML 中，我使用脚本标签来获取 React 和 Babel，因为我的 JS 文件包含 JSX。我还使用脚本标记来包含我的 main.js 文件，如下所示： <script type="text/babel" src="main.js"></script>

我发现我必须使用 type=text/babel 才能正确处理 JSX。

mod.js 是我要导入的模块。在 main.js 我使用：

import {mod_func} from './mod'

在mod.js中我使用export mod_func function()...

但是，当我通过网络服务器（Chrome 的网络服务器）在浏览器中打开 HTML 时，我得到： 未捕获的引用错误：未定义要求

阅读了一些有关此错误的信息后，我认为我需要让 HTML 将我的 main.js 视为可以导入其他模块的模块，方法是使用 type="module"标签，但我还需要 type=text/babel 标签，所以我不确定该怎么做。

当我只能将脚本类型设置为其中一种类型时，如何导入 javascript 包含 JSX 的模块？

Answer 1

JSX 代表 JavaScript 语法扩展，常用于 ReactJS Apps 。如果我更深入地研究 JSX 文件，它允许您将 html-xml-styled codes 存储到 JavaScript 变量中，并且您可以利用一个函数来 return 和 HTML-XML-styled code。此外，您需要 babel 将其作为 transpiler 执行，因为您的浏览器对您的代码作为 JSX 文件没有任何线索。

您遇到的错误是关于在 JavaScript World 中使用节点模块的两种方法。

1. ES6 Module [ you use require ] 
2. CommonJS  [ you use import ]

提示：如果您热衷于使用 JSX 作为您应用程序的文件格式，请使用

npx create-react-app [your project's name]

或

npx create-react-app --template [ template's name ]

或

使用Webpack作为捆绑器和babel文件做同样的事情[高级模式]

提示：你可以在npm packages[=75=中找到很多React模板 ]

待办事项： 两种导出方法[默认导出/名称导出]

名称导出： export const [ name ] = . . . .

提示：你需要a curly brace导入它

默认导出： export default . . .

提示：你根本不需要a curly brace来导入它

如何在浏览器中使用 JSX 导入 javascript 模块？

How to import a javascript module with JSX, in browser?

javascript

import

module

jsx

reactjs