CODEWITHSUNDEEP
javascripthtmlreactjswebpack
Raru9
Raru9

Reputation: 21

React doesn't render

I am begining with React using Webpack to make the configuration. I made all step by step. No error message on console or browser but the h1 that I want to insert doesn't appear.

I know that React is v.18 but I am using React v.17

App.jsx

import React from 'react'

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

export default App;

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

    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

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

Upvotes: 1

Views: 233

Answers (1)

Raru9
Raru9

Reputation: 21

I found the solution. It was the filename config. Was /menu.html. So when localhost was with /menu.html, React render the h1 element.

So, to make render I only have to change /menu.html for index.html in the filename config, refresh and was done!

Upvotes: 1

Related Questions