Fatal编程技术网
  • javascript/
  • Javascript 在我的react js项目中运行npm start时显示白色屏幕

Javascript 在我的react js项目中运行npm start时显示白色屏幕

javascript html reactjs

Javascript 在我的react js项目中运行npm start时显示白色屏幕,javascript,html,reactjs,frontend,Javascript,Html,Reactjs,Frontend,当我试图运行npm start时，我得到一个白色屏幕。npm开始工作，但我得到了一个白色屏幕上http://localhost:3000/ . 我试图将{“homepage”：“.”，}添加到我的index.html文件中，但仍然收到相同的错误？你能告诉我哪里做错了吗？我还试图通过谷歌控制台调试它，但它什么也没显示 index.html file: <!DOCTYPE html> <html lang="en"> <head>

当我试图运行npm start时，我得到一个白色屏幕。npm开始工作，但我得到了一个白色屏幕上http://localhost:3000/ . 我试图将{“homepage”：“.”，}添加到我的index.html文件中，但仍然收到相同的错误？你能告诉我哪里做错了吗？我还试图通过谷歌控制台调试它，但它什么也没显示

index.html file:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      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>

**package.json file** 

    {
      "name": "chatapp",
      "version": "0.1.0",
      "homepage": ".",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "firebase": "^7.19.1",
        "font-awesome": "^4.7.0",
        
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-loading": "^2.0.3",
        "react-router-dom": "^5.2.0",
        "react-scripts": "3.4.3",
        "react-toastify": "^6.0.8"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
             "last 1 chrome version",
             "last 1 firefox version",
             "last 1 safari version"
        ]
      }
    }

index.html文件：
反应应用程序
您需要启用JavaScript才能运行此应用程序。
**package.json文件**
{
“名称”：“聊天应用程序”，
“版本”：“0.1.0”，
“主页”：“，
“私人”：没错，
“依赖项”：{
“@测试库/jest dom”：“^4.2.4”，
“@testing library/react”：“^9.3.2”，
“@测试库/用户事件”：“^7.1.2”，
“firebase”：“^7.19.1”，
“字体真棒”：“^4.7.0”，
“反应”：“^16.13.1”，
“react dom”：“^16.13.1”，
“反应加载”：“^2.0.3”，
“反应路由器dom”：“^5.2.0”，
“反应脚本”：“3.4.3”，
“快速反应”：“^6.0.8”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：{
“生产”：[
">0.2%",
“没有死”，
“不是全部”
],
“发展”：[
“上一个chrome版本”，
“上一个firefox版本”，
“最后1个safari版本”
]
}
}
我试了一下你的代码，现在我的反应很快。我创建了一个新文件，这意味着在ur index.js中使用以下方法更改代码：

代码：

从“React”导入React；
从“react dom”导入react dom；
ReactDOM.render(
你好
document.getElementById（'root'））
);
然后查看响应时间。

您等待它加载的时间有多长？您的图像显示它仍在连接。启动服务器并为浏览器生成代码需要一点时间。@Shivangi，我刚签出。这对我来说很好。如果仍然无法为您工作，请您提供更多详细信息。如果终端上显示“正在启动开发服务器”，您可能希望检查其状态，它仍在编译，请等待一段时间，如果显示“已编译成功”，但仍然没有显示任何内容，我们可能会帮助您我尝试过更改它，但它工作正常，但当我调用组件时，它给出了错误。这是因为标记吗？ReactDOM.render（，document.getElementById（'root'）；StrictMode是一种用于突出显示应用程序中潜在问题的工具。所以，你可以和我分享app.js的代码，这样就很容易找到解决方案。嗨，我已经解决了。显然，我在html组件中使用了类名，这就是为什么它不能在屏幕上呈现html组件的原因。 
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<>hello</>,
document.getElementById('root')
);