如何在没有 npm 的情况下以纯 HTML 托管两个或多个 JSX 文件？

编程问答 2022-05-04

问题描述

我有两个 JSX 文件（index.js 和 app.jsx）和一个 HTML 文件，我想在 index.js 中导入 app.jsx，它是 index.html 的脚本文件。我想在没有 npm 的情况下直接运行 HTML (index.html)（仅使用 LiveServer）。我该怎么做？

代码： index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying,replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



    <!-- Load our React component. -->
    <!-- <script src="index.js" type="text/babel"></script> -->

  </body>
</html>

index.js

import App from './app'; // we are facing issue here!

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

app.jsx

    var App = React.createClass({
    render: function() {
      return (
        <div className="app">
        Hello,world!
        </div>
      );
    }
});
  
export default App

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptliveservernpmnpmreactjsreactjs