【问题标题】:How to link React.js file to html如何将 React.js 文件链接到 html
【发布时间】:2017-07-25 17:25:57
【问题描述】:

我刚刚从这里 https://github.com/facebookincubator/create-react-app 安装了这个 Create React Apps 程序,我已经下载了所有文件,我可以编辑 App.js 文件,但我已经为网站制作了一些 html 文件,我想知道如何将 App.js 文件链接到我当前的文件。给定 Index.html 上的 html 显示未使用 <script> 元素。这是完整的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">
<!--
  manifest.json provides metadata used when your web app is added to the
  homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.
  Only files inside the `public` folder can be referenced from the HTML.

  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
  <noscript>
  You need to enable JavaScript to run this app.
  </noscript>
<div id="root"></div> 
<!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->
  </body>
 </html>

【问题讨论】:

  • 您是否阅读了上面写着的通知,请运行npm startyarn start。要创建生产包,请使用 npm run buildyarn build

标签: html reactjs


【解决方案1】:

在你的项目中运行

npm 运行构建

这将使用“index.html”文件创建文件夹“/build”。在里面你可以看到所有这些魔法是如何完成的。你也可以把你的其他/旧的东西放在那里。

【讨论】:

    【解决方案2】:

    我不完全确定你在问什么,但你可以在 React 的同一页面上使用普通的 html/css。 React 在页面的div id="root" 部分呈现App 组件。在其他地方,您可以粘贴旧的 html 内容,它应该可以工作。

    【讨论】:

      猜你喜欢
      • 2012-11-24
      • 2018-01-18
      • 1970-01-01
      • 1970-01-01
      • 2020-10-28
      • 2017-10-22
      • 2016-12-08
      相关资源
      最近更新 更多