反应不渲染

Question

I am begining with React using Webpack to make the configuration.我从 React 开始，使用 Webpack 进行配置。 I made all step by step.我一步一步做的。 No error message on console or browser but the h1 that I want to insert doesn't appear.控制台或浏览器上没有错误消息，但我要插入的 h1 没有出现。

I know that React is v.18 but I am using React v.17我知道 React 是 v.18，但我使用的是 React v.17

App.jsx应用程序.jsx

import React from 'react'

const App = () => {
    return (
         <h1>Holaaa</h1> 
    );
}

export default App;

index.js index.js

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

ReactDOM.render (<App/>, document.getElementById ("Hello"))

webpack.config.js webpack.config.js

    const path = require ("path");
const HtmlWebpackPlugin = require ('html-webpack-plugin')
const MiniCssExtractPlugin = require ('mini-css-extract-plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve (__dirname, 'dist'),
        filename: "bundle.js"
    },
    mode: "development",
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {test: /\.(js|jsx)$/,
        exclude: "/node_modules",
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
        }
    }},
    {test: /\html$/,
    use: [
        {loader: 'html-loader'}
    ]  },
    {test: /\.sa[ac]ss$/,
    use: ['css-loader',
    'style-loader',
    'sass-loader']}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin ({
            inject: true,
            template: "./public/index.html",
            filename: '/menu.html'
        }), new MiniCssExtractPlugin ({
            filename: "[name].css"
        })
    ]
}

index.html索引.html

    <title>Document</title>
</head>
<body>
<div id="Hello"> </div>    
</body>
</html>

Answer 1

I found the solution.我找到了解决方案。 It was the filename config.这是文件名配置。 Was /menu.html.是 /menu.html。 So when localhost was with /menu.html, React render the h1 element.因此，当 localhost 使用 /menu.html 时，React 会渲染 h1 元素。

So, to make render I only have to change /menu.html for index.html in the filename config, refresh and was done!因此，要进行渲染，我只需在文件名配置中更改 /menu.html 为 index.html，刷新即可完成！

反应不渲染

问题描述

1 个解决方案

解决方案1
0 2022-09-09 02:29:40

反应不渲染

问题描述

1 个解决方案

解决方案1 0 2022-09-09 02:29:40

解决方案1
0 2022-09-09 02:29:40