在 static html 页面中包含 React 组件

Question

I am trying to include a basic react component into an html page.我正在尝试将基本反应组件包含到 html 页面中。 The react app is created with create-react-app react 应用程序是使用create-react-app

mkdir my_html_app
cd my_html_app
npx create-react-app my_react_app

I then made the app a component by editing my_html_app/my_react_app/src/App.js然后我通过编辑my_html_app/my_react_app/src/App.js使该应用程序成为一个组件

// App.js
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="App">
        This is my react component
      </div>
    );
  }
}

export default App;

Then build the app然后构建应用程序

npm run build

Then created index.html in my_html_app然后在index.html中创建my_html_app

<html>
<head>
    <script type="text/javascript" src="http://localhost:8000/my_react_app/build/static/js/main.d286e0ff.chunk.js" ></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    My html app. Expecting to see react component here:
    <div id="my_app"></div>
    <script type="text/javascript">
        var el = React.createElement(App);
        ReactDOM.render(el, document.getElementById("my_app"))
    </script>
</body>
</html>

From there i can an error (index):12 Uncaught ReferenceError: App is not defined从那里我可以得到一个错误(index):12 Uncaught ReferenceError: App is not defined

What am i doing wrong here?我在这里做错了什么？ I assume im building wrong.我假设我建错了。 What are the steps of properly using that build file?正确使用该构建文件的步骤是什么？

Answer 1

App is not defined in your index.html. App 未在您的 index.html 中定义。 What you can do is create an index.js file, export your App file, and then in your html file, you can use require.js to pull your index and access the app from there (require.js will need to be installed in your node modules):您可以做的是创建一个 index.js 文件，导出您的 App 文件，然后在您的 html 文件中，您可以使用 require.js 拉取您的索引并从那里访问应用程序（require.js 需要安装在你的节点模块）：

index.js file in the src folder of your application (my_html_app/my_react_app/src/index.js)应用程序的 src 文件夹中的 index.js 文件 (my_html_app/my_react_app/src/index.js)

export App from "./App";

Then update your html file like so:然后像这样更新您的 html 文件：

<html>
<head>
    <script type="text/javascript" src="http://localhost:8000/my_react_app/build/static/js/main.d286e0ff.chunk.js" ></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    My html app. Expecting to see react component here:
    <div id="my_app"></div>
    <script type="text/javascript">
        require([string path to your index file], function(Main) {
            var el = React.createElement(Main.App);
            ReactDOM.render(el, document.getElementById("my_app"))
        });
    </script>
</body>
</html>

在 static html 页面中包含 React 组件

问题描述

1 个解决方案

解决方案1
0 2021-02-12 16:29:55

在 static html 页面中包含 React 组件

问题描述

1 个解决方案

解决方案1 0 2021-02-12 16:29:55

解决方案1
0 2021-02-12 16:29:55