首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何反应-多玛识别正确的HTML文件?

如何反应-多玛识别正确的HTML文件?
EN

Stack Overflow用户
提问于 2019-03-05 02:26:24
回答 2查看 952关注 0票数 4

我正在尝试与codesandbox.io作出反应。启动新项目时,将显示默认代码。

在index.js文件中,我们引用了HTML中的"root“元素。但是我没有意识到JS文件是如何连接到HTML文件的。

在Vanilla中,HTML文件可以有一个"script“标记。为什么这里没有必要使用“脚本”标记?

代码

代码语言:javascript
复制
index.js  
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);



index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-    scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
create a production bundle, use `npm run build` or `yarn build`.

</body>

EN

Stack Overflow用户

回答已采纳

发布于 2019-03-05 02:38:28

如果您将弹出应用程序并检查webpack.config文件,您可能会发现以下部分:

代码语言:javascript
复制
plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(...)
    ]

因此,只需webpack将包脚本注入HTML页面。如果你没有创建-反应-应用程序,你将不得不使用脚本标签或自己编写类似的插件。

另外,您正在查看源代码。如果您将服务于应用程序并检查检查器,您将在脚本标记中看到捆绑包。

票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54994543

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档