个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我最近开始使用 React。
我的index.html包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
和index.js包含
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
我的疑问是我没有提到index.js在 index.html 中的任何脚本标记中。但它是如何引用 root index.html 中的 div 元素？我想知道它工作正常。请解释一下。
我已经运行这些命令来创建应用程序
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
最佳答案
Create-React-App 有一个非常有趣的设置。
我开始挖掘 package.json npm 脚本 start
"start": "react-scripts start"
这将我带到 node_modules/.bin
下的二进制 react-scripts我将在这里发布相关内容。
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
[require.resolve('../scripts/' + script)].concat(args),
{ stdio: 'inherit' }
);
所以这告诉我他们正在 ../scripts/ 文件夹中寻找脚本。
所以我转到react-scripts npm模块(node_modules/react-scripts)并打开node_modules/react-scripts/scripts/start.js文件因为我正在执行 npm start。
现在我在这里找到了我正在寻找的 webpack 配置。
他们特别指的是node_modules/react-scripts/config/webpack.config.dev.js。我将在这里发布相关内容。
entry: [
// Finally, this is your app's code:
paths.appIndexJs,
],
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
所以paths.appIndexJs引用的文件是webpack配置中的入口文件。
他们正在使用 HtmlWebpackPlugin在路径 paths.appHtml 处加载 html。
最后一个难题是将其链接回您发布的文件。从 paths.js
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
...
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveApp('src/index.js'),
...
}
所以在你的应用程序目录中，
appHtml 是文件 public/index.html
appIndexJs 是文件 src/index.js
您的两个有问题的文件。
哇!那是一次相当长的旅程..:P
更新 1 - 自 react-scripts@3.x
node_modules/.bin 下的 react-scripts 二进制文件已更改逻辑，如下所示。本质上做同样的事情。
if (['build', 'eject', 'start', 'test'].includes(script)) {
const result = spawn.sync(
'node',
nodeArgs
.concat(require.resolve('../scripts/' + script))
.concat(args.slice(scriptIndex + 1)),
{ stdio: 'inherit' }
);
开发和生产的 webpack 配置已合并为一个。const configFactory = require('../config/webpack.config');
HTMLWebpackPlugin 配置看起来像这样 - 这是因为他们必须有条件地在此基础上添加生产配置
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
路径文件代码有一些更新
module.exports = {
...
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
...
};
关于reactjs - React JS index.js 文件如何联系 index.html 获取 id 引用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41738421/
27
4
0
我正在尝试连接到 webapi，该位置在我的 js jquery 文件中看起来像这样。 example.com/?var=input 有没有比 ajax 调用更简单的方法？ 最佳答案 我会为此使用 A
我编写了 PHP 代码，它连接到 MYSQL 来查找信息，将其发送到 API，并获取响应以写回到新表中。 有时它工作得很好，有时则不然。如果没有，它会给我这个错误 You have an error
每个子列表都意味着他们是 friend ，现在我想创建一个函数 def is_connected_via_friendships_with 来检查他们是否通过与另一个人的友谊联系在一起。例如，玛丽是卢
我正在尝试将 Cassandra 与 Hector 联系起来: public class Main { public static void main(String[] args) {
我正在使用 mautic API 进行电子邮件列表和电子邮件发送。我正在尝试使用 mautic API auth2.0 获取所有电子邮件列表我正在正确获取访问 token ，但是当我像这样调用电子邮件
我已经与Windows Forms Application进行了简单的聊天。我正在使用套接字，当我尝试连接本地IP时，一切正常，并且可以在本地发送消息。 但是，当我尝试使用外部IP连接到我的 frie
我正在开发我的第一个 GWT 应用程序，它将使用来自 RESTful API 的数据。 我试图找出构建整个应用程序的最佳方法。 GWT 客户端应该与 Java 服务器端联系，然后再联系 API，还是
我对线程中的异常处理有疑问。我有一个简单的 WCF 服务，它需要一些字节作为输入。此 WCF 服务是从控制台应用程序调用的。 方法片段(我的方法) try { _service.ImportBy
我正在尝试编写一个基本的卷应用程序。由于我是用 Ruby 编写的，因此我不想扩展 C 库或使用 ffi ，而是尝试使用 ruby-dbus 编写它，我使用 Address 获得了 /org/pulse
我知道在 CRM 2011 中您无法将联系人转换为潜在客户。在 CRM 2013 中是否可行。 简单来说，我创建了一个联系人并将其分组到一个帐户中。我想将此联系人转换为潜在客户，以便我可以输入销售信息
如何在我的网站页面上添加共享按钮，我们可以使用以下代码在移动 HTML 页面上添加发送短信: title 如何在 Viber、Watsapp 等分享中使用此示例 最佳答案 仅限 HTML 页面。我通常
我想了解 Azure 在门户中创建 Web 应用程序机器人时会做什么。 An Azure Bot Service Bot deployed to an Azure App Service Web Ap
我目前正在构建 Android 4.4。与 seek-for-android在我的 Nexus 5 上获得 UICC 支持。 到目前为止还没有成功。我确实应用了提到的所有补丁 here和 here .
我开发了一个用于农村 Activity 和监控/管理的应用程序。 我的应用程序在白天收集了大量数据，需要将其发送到云端进行处理和分析。在一个正常的 8 小时工作日中，它可以收集多达 2Gb 的数据(大
我编写了一个连接器来从 mysql 获取数据，当 iam 在路由内运行 Mysql 连接器时，它显示错误，并且浏览器正在运行到无限循环。 var express = require('express'
我最近有一个高级主题，mailchimp 的表单看起来非常酷。 我想知道我是否可以将样式用于我的 3 Field Based Contact 表单“REQUEST A CALL BACK”- 名称输入
我正在尝试将基本的 onClick 事件附加到设备中的联系人列表。联系人列表已正确生成。我的代码摘要如下: public class Contacts extends AppCompatActivit
我有一种方法可以根据 Active Directory 验证用户凭据。我想将此方法与 SSL 结合使用，但无法正常工作。 主要问题是我有一个在我们网络之外的服务器(它叫 DMZ 吗？)。从那里我想联系
我正准备在 symfony Doctrine 中开始一个项目，但我必须与多个数据库建立连接。其中之一是无法使用 ORM 映射的现有数据库 (SQL SERVER)。是否有可能将此数据库与另一个未在 D
尝试为 openstack USSURI 版本设置 Controller 节点时。我被要求将 Glance 服务设置为 VM 图像管理子服务。 根据要求:article (在 ubuntu 18.04
我是一名优秀的程序员,十分优秀！