ReactJS 代码编译成功，但未在浏览器上打印

Question

After a lot of efforts i was able to install and configure ReactJS.经过大量努力，我能够安装和配置 ReactJS。 After executing "npm start" command, the code was "COMPILED SUCCESSFULLY" and redirected me to the web browser.执行“npm start”命令后，代码为“COMPILED SUCCESSFULLY”并将我重定向到网络浏览器。 But there wasn't any output , ie., the browser was " blank ".但是没有任何输出，即浏览器是“空白”。 Can anyone resolve this??谁能解决这个问题？？ ( my first post here ) （我在这里的第一篇文章）

Also check the code that i have used..还要检查我使用过的代码..

index.html file index.html文件

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

App.js应用程序.js

import React, { component } from 'react';
class App extends Component {
    render(){
        return(
        <div>
        <h1> Hello World</h1>
        <p>Hello </p>   
        </div>
        );
    }
}
export default App;

main.js主文件

import React from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));

package.json snippet package.json 片段

"start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"

webpack.config.js webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

The only issue is the output is not getting displayed on browser..唯一的问题是输出没有显示在浏览器上..

command prompt COMMAND PROMPT AFTER "npm start"命令提示符“npm start”后的命令提示符

browser output not displaying浏览器输出不显示

Answer 1

Add an .babelrc file in root folder with following:在根文件夹中添加一个.babelrc文件，内容如下：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

And package.json is expected to include following dependencies:并且package.json预计包含以下依赖项：

  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

Update更新

Also update webpack.config.js to: webpack.config.js更新为：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.join(__dirname, "/bundle"),
    filename: "index_bundle.js"
  },
  devServer: {
    inline: true,
    port: 8001
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

Answer 2

Check the path and change Component to component .检查路径并将Component更改为component 。

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" component={HomePage} exact  />
        </div>
      </Router> 
    );
  }
}

ReactJS 代码编译成功，但未在浏览器上打印

问题描述

2 个解决方案

解决方案1
2 2019-07-16 09:20:21

Update更新

解决方案2
0 2020-01-13 23:37:42

ReactJS 代码编译成功，但未在浏览器上打印

问题描述

2 个解决方案

解决方案1 2 2019-07-16 09:20:21

Update更新

解决方案2 0 2020-01-13 23:37:42

解决方案1
2 2019-07-16 09:20:21

解决方案2
0 2020-01-13 23:37:42