Fatal编程技术网
  • reactjs/
  • Reactjs 部署在heroku上的react项目为空

Reactjs 部署在heroku上的react项目为空

reactjs heroku

Reactjs 部署在heroku上的react项目为空,reactjs,heroku,Reactjs,Heroku,这是src文件夹中的my package.json文件 { "homepage": "http:Khairiya.github.io/HW6_IS96G58JX7", "name": "my-app", "version": "0.1.0", "private": true, "d

这是src文件夹中的my package.json文件

    {
      "homepage": "http:Khairiya.github.io/HW6_IS96G58JX7",
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1"
      },
      "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build",
        "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"
        ]
      },
      "devDependencies": {
        "gh-pages": "^3.1.0"
      }
    }
这也是我的src文件夹中的app.js文件。样式文件位于src文件夹中，与引导程序完美配合

       import React from "react";
       import logo from './logo.png';
       import { Component} from "react";
       import "./style.css"

      class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          allData: {},
          data:[],
          isLoaded: false,
        };
     }

  componentDidMount() {
    fetch("https://disease.sh/v3/covid-19/all")
      .then((response) => response.json())
      .then(
        (allData) => {
          this.setState({
            isLoaded: true,
            allData: allData,
          });
        },

        (error) => {
          // handle your errors here
          this.setState({
            isLoaded: true,
            error,
          });
        }
      );
      fetch(
        "https://disease.sh/v3/covid-19/countries?sort=cases&allowNull=true"
      )
        .then((res) => res.json())
        .then((data) => {
           this.setState({
           isLoaded: true,
           data: data,
         });
        });
        
      }
  
      render() {
    const { allData } = this.state;
    const{ data } = this.state;

        let update = data.map((item) => {

        const {  country, cases, deaths, recovered, active,  } = item;
          return (
            <tbody key={country}>
              <tr>
                <td>{country}</td>
                <td>{cases}</td>
                <td>{active}</td>
                <td>{recovered}</td>
                <td>{deaths}</td>
              </tr>
            </tbody>
      );
    });

        return (
          <div className="App">
            <div className="container">
              <div className="row">
                <p className="toprow">
                  <img src={logo} alt="logo" height="30px" />
                  Covid-19 Tracker
                </p>
              </div>
            </div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div className="container">
              <div className="row justify-content-between">
                <div className="col-sm-2 box">
                  <p>
                    Total Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.cases}</b>
                  </p>
                </div>
                <div className="col-sm-2 bo`enter code here`x">
                  <p>
                    Recovered{" "}
                    <i className="fa fa-arrow-alt-circle-down icons-green"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.recovered}</b>
                  </p>
                </div>
                 <div className="col-sm-2 box">
                   <p>
                    Active Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.active}</b>
                  </p>
                </div>
                <div className="col-sm-2 box">
                  <p>
                   Total Deaths <i className="fa fa-arrow-alt-circle-up icons"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.deaths}</b>
                  </p>
                </div>
              </div>
            </div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div className="container">
              <div className="row">
                <div className="col-sm-8">
                  <table className="table table-striped">
                    <head>
                      <tr>
                        <th>Countries</th>
                        <th>Total Cases</th>
                        <th>Recovered</th>
                        <th>Active Cases</th>
                        <th>Deaths</th>
                      </tr>
                    </thead>
                    {update}
                  </table>
                </div>
                <div className="col-sm-4">
                  <div className="col align-self-end side-box">
                    <div className="row justify-content-center innerBoxPadding">
                      <div className="col-sm-5 inner-box">
                        <b>Health Tips</b>
                      </div>
                    </div>
                  </div>
                  <div>&nbsp;</div>
                  <div className="col align-self-end side-box">
                    <div className="row justify-content-center innerBoxPadding">
                      <div className="col-sm-6 inner-box">
                        <b>News & Update</b>
                      </div>
                    </div>
                  </div>
                </div>
               </div>
            </div>
           </div>
        );
      }
    }

    export default App;

从“React”导入React；
从“/logo.png”导入徽标；
从“react”导入{Component}；
导入“/style.css”
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
所有数据：{}，
数据：[]，
isLoaded:false，
};
}
componentDidMount（）{
取回（“https://disease.sh/v3/covid-19/all")
.then（（response）=>response.json（））
.那么(
（所有数据）=>{
这是我的国家({
isLoaded：是的，
allData:allData，
});
},
（错误）=>{
//在这里处理您的错误
这是我的国家({
isLoaded：是的，
错误，
});
}
);
取回(
"https://disease.sh/v3/covid-19/countries?sort=cases&allowNull=true"
)
.然后（（res）=>res.json（））
。然后（（数据）=>{
这是我的国家({
isLoaded：是的，
数据：数据，
});
});
}
render（）{
const{allData}=this.state；
const{data}=this.state；
let update=data.map（（项目）=>{
const{国家，病例，死亡，康复，活动，}=项目；
返回(
{国家}
{案例}
{active}
{已恢复}
{死亡}
);
});
返回(


新冠病毒-19跟踪器



个案总数




{allData.cases}



已恢复{“}




{allData.recovered}



活动案例




{allData.active}



总死亡人数




{allData.death}


国家
个案总数
恢复
活动案例
死亡
{update}
健康提示
新闻与更新
);
}
}
导出默认应用程序；
这是我的index.html文件，位于我的公用文件夹中。这是引导文件链接的地方

    <!DOCTYPE HTML>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <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>
        <link rel="stylesheet" 
     href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- 
     JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      </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`.
        -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
     DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384- 
     9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" 
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 
    crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
          integrity="sha512- 
   YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg=="
          crossorigin="anonymous"></script>
      </body>
    </html>


反应应用程序
您需要启用JavaScript才能运行此应用程序。
这就是我在heroku上发布的内容。它成功地推送到了吉斯图布。控制台中的代码没有错误或警告。请帮助

好的，问题是，在将应用程序推送到github时，我完成了正确的步骤，因此，将github Pages包作为开发人员依赖项安装，并将所需的属性添加到package.json文件中。将中心部署到heroku时不需要这些步骤。因此，对于我创建的第二个应用程序，我将代码推送到github，而没有安装依赖项和添加所需的属性。在我把应用程序推到heroku之后，它成功了。最终的网站位于

页面只是空白，这是链接；我看到了一些错误：非常感谢@Tom。我看到了这个错误，但是这些文件来自于在部署期间安装的构建模块，我没有在模块中编辑所述文件。谢谢您在本地运行项目时会发生什么？那页也是空白的吗？不，它工作得很好，没有错误。非常感谢。