javascript - 我的新 Reactjs 应用程序出现 404 错误，它是否正在寻找 main.js 文件？-6ren

javascript - 我的新 Reactjs 应用程序出现 404 错误，它是否正在寻找 main.js 文件？

转载作者：行者123 更新时间：2023-11-27 22:36:15

25

4

这个应用程序应该呈现我在这里的内容(/Users/ldco2016/Projects/reactquiz/src/components/App.jsx:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component{
    render(){
        return(
            <div>
                APP
            </div>
        )
    }
}

export default App

但我得到了一个空白页面，Chrome 开发工具控制台告诉我:

GET http://localhost:8080/app/js/main.js 404 (Not Found)

我知道这意味着什么，但我不清楚它是在尝试查找我想要渲染的页面还是 main.js 文件。

/Users/ldco2016/Projects/reactquiz/package.json:

{
  "name": "reactquiz",
  "version": "1.0.0",
  "description": "A Reactjs Quiz App",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Daniel Cortes",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "6.13.*",
    "babel-loader": "6.2.*",
    "webpack": "1.13.*"
  },
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  }
}

/Users/ldco2016/Projects/reactquiz/app/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactjs Quiz</title>
</head>
<body>
    <div id="app"></div>

    <script src="js/main.js"></script>
</body>
</html>

ldco2016@DCortes-MacBook-Pro-3 ~/Projects/reactquiz/webpack.config.js:

module.export = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            exclude: /node_modules/
        }]
    }

}

/Users/ldco2016/Projects/reactquiz/src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

最佳答案

您需要运行 webpack 来生成 main.js 文件。首先对文件进行两处更改，在 package.json 中添加脚本 "start": "webpack --progress -p --config webpack.config.js --watch" 并在 webpack.config.js 中将加载器更改为 babel-loader。

附注可能不需要第二次更改。

package.json

{
  "name": "reactquiz",
  "version": "1.0.0",
  "description": "A Reactjs Quiz App",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress -p --config webpack.config.js --watch"
  },
  "author": "Daniel Cortes",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "6.13.*",
    "babel-loader": "6.2.*",
    "webpack": "1.13.*"
  },
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  }
}

webpack.config.js

module.export = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    }

}

现在使用命令运行 webpack

npm run start

现在打开你的本地主机，上面的内容应该可以工作。

关于javascript - 我的新 Reactjs 应用程序出现 404 错误，它是否正在寻找 main.js 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39070441/

25

4

0

文章推荐： JQuery 标签单击并选择所有复选框问题

文章推荐： javascript - 如何定义 Wakanda 自定义小部件 child ？

文章推荐： javascript - WordPress 回复评论链接

文章推荐： javascript - 支付网关集成 - Javascript 不工作

delphi - 寻找 EOutOfResources
题: 是否有一种简单的方法可以获取正在运行的应用程序中泄漏的资源类型列表？ IOW 通过连接到应用程序？我知道 memproof 可以做到，但它会减慢速度，以至于应用程序甚至无法持续一分钟。大多数任
c# - 寻找.net核心的容器的stdout和stderr
正确地说下面的代码会将自定义日志发送到.net核心中的Docker容器的stdout和stderr吗？ console.Writeline(...) console.error(..) 最佳答案如果
java - 寻找 for 循环中动态变量声明的解决方法
我想将一个任务多次重复，放入 for 循环中。我必须将时间序列对象存储为 IExchangeItem ， openDA 中的一个特殊类(数据同化软件)。这是任务之一(有效): HashMap ite
c++ - 寻找，相对或绝对位置？
我需要从文件中读取一个数组。该数组在文件中不是连续排序的，必须跳转“偏移”字节才能获得下一个元素。假设我读取一个非常大的文件，什么更有效率。 1) 使用增量相对位置。 2)使用绝对位置。选项 1:
c++ - 寻找 MSIHANDLE
我有一个安装程序(使用 Advanced Installer 制作)。我有一个必须与之交互的应用程序，但我不知道如何找到该安装的 MSIHANDLE。我查看了 Microsoft 引用资料，但没有发现
javascript - 寻找。正则表达式中的字符问题
我在替换正则表达式中的“joe.”等内容时遇到问题。这是代码 var objects = new Array("joe","sam"); code = "joe.id was here so was
c++ - 寻找 child
我有 A 类。A 类负责管理 B 对象的生命周期，它包含 B 对象的容器，即 map。，每个 B 对象都包含 C 对象的容器，即 map .我有一个全局 A 对象用于整个应用程序。我有以下问题:我
android - 寻找 FreeImage.so
任何人都可以告诉我在哪里可以找到 freeImage.so 吗？我一直在努力寻找相同的东西但没有成功..任何帮助将不胜感激。我已经尝试将 freeimage.a 转换为 freeImage .so 并
python - 寻找 assertURLEquals
在单元测试期间，我想将生成的 URL 与测试中定义的静态 URL 进行比较。对于此比较，最好有一个 TestCase.assertURLEqual 或类似的，它可以让您比较两个字符串格式的 URL，如
c++ - “寻找”优化
'find ./ -name *.jpg' 我正在尝试优化上述语句的“查找”命令。在查找实现中处理“-name”谓词的方法。 static boolean pred__name __common (
python - 寻找()函数？
请原谅我在这里的困惑，但我已经阅读了关于 python 中的 seek() 函数的文档(在不得不使用它之后)，虽然它帮助了我，但我仍然对它的实际含义有点困惑，任何非常感谢您的解释，谢谢。最佳答案关
c# - 寻找 boolean 语句的解释
我在我正在使用的库中找到了这个语句。它应该检查集群中的当前节点是否是领导者。这是语句:(!(cluster.Leader?.IsRemote ?? true)) 为什么不直接使用 (cluster.L
java - 寻找 JsonParser 依赖
我发现 JsonParser 在 javax.json.stream 中，但我不知道在哪里可以找到它。谁能帮帮我？ https://docs.oracle.com/javaee/7/api/javax
security - 寻找 Web 服务安全漏洞的真实故事
关闭。这个问题需要更多focused .它目前不接受答案。想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 6年前关闭。 Improve this questi
jenkins - 寻找 Jenkins 插件以允许每个分支的默认参数值
如果 git 存储库中有新的更改可用，我有一个多分支管道作业设置为每分钟由 Jenkinsfile 构建。如果分支名称是某种格式，我有一个将工件部署到环境的步骤。我希望能够在每个分支的基础上配置环境，
uml - 寻找 Harel 状态图工具
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
coldfusion - 寻找 cfdump 的替代方案
我想我刚刚意识到当他们不让我使用 cfdump 时我的网络主机是多么的限制。这其实有点让我生气，真的，dump 有什么害处？无论如何，我的问题是是否有人编写了一个 cfdump 替代方案来剔除复杂类型
rest - 寻找 RESTful 方法来更新具有相同字段集的多个资源
任务:我有多个资源需要在一个 HTTP 调用中更新。要更新的资源类型、字段和值对于所有资源都是相同的。示例:通过 ID 设置了一组汽车，需要将所有汽车的“状态”更新为“已售出”。经典 RESTF
sql - 寻找 SQL 中的性能改进
场景:表中有 2 列，数据如下例所示。对于“a”列的相同值，该表可能有多个行。在示例中，考虑到“a”列，“1”有三行，“2”有一行。示例表“t1”: |a|b ||1|1.1||1|1.2||1
python - 寻找 Pandas 最长的连续增长
我有一个数据框: Date Price 2021-01-01 29344.67 2021-01-02 32072.08 2021-01-03 33048.03 2021-01-04 32084.

首页

博学

6Ren·AI

商城

javascript - 我的新 Reactjs 应用程序出现 404 错误，它是否正在寻找 main.js 文件？