attach react app to an html div after creating bundle-CodePudding

I've created a bundle of my react app using webpack as shown below:

My webpack.config.js :

const path = require('path');
const glob = require("glob");
const { SourceMapDevToolPlugin } = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: "development",
    entry: glob.sync('./App.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: [/node_modules/],
            options: {
                presets: ['@babel/env', '@babel/react'],
                plugins: ['transform-class-properties']
            }
            
        },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    {
                        fallback: 'style-loader',
                        use: ['css-loader']
                    })
                 
            },
            {
                test: /\.tsx$/,
                use: ['source-map-loader']  
                 
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|gif|png)$/, loader: "file-loader"
            }
        ]
    },
    plugins: [
      
        new ExtractTextPlugin({filename: 'style.css'})
    ]
};

Here is my package.json:

{
  "name": "demo",
  "version": "0.0.11",
  "private": true,
  "dependencies": {
    "@mycompany/picl": "^0.0.12-dev",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^14.2.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "css-loader": "1.0.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "^5.0.1",
    "style-loader": "0.21.0",
    "web-vitals": "^2.1.4",
    "webpack": "4.17.1",
    "webpack-cli": "3.1.0"
  },
  "scripts": {
    "build": "webpack",
    "test": "react-scripts test",
    "dev": "webpack --mode development ./src/App.js --output ./static/built/bundle.js --watch"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-loader": "8.0.0",
    "file-loader": "2.0.0",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "0.6.0",
    "miragejs": "^0.1.44",
    "source-map-loader": "1.0.0"
  }
}

Running yarn run dev has generated a bundle.js, style.css and a .svg file inside static\build folder. However, I'm not sure how do I attach this bundle.js with a HTML div tag as I want to display this react app bundle in a simple HTML/Javascript app.

I looked at this tutorial. But they are adding a dom container inside their like_button.js but i don't have that option since my js file which is bundle.js is getting generated from my react app. Do I need to do something different to generate a bundle.js in such a manner that it can get attached to an HTML div?

I was planning to include the bundle and css like this in my html code as shown below:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>Testing Jan 17</title>
    <link rel="stylesheet" href="built/style.css"/>
    
</head>
<body>

<div id="reactAppDisplay"></div>
<script src="built/bundle.js"></script>

</body>
</html>

But I'm not sure how at the time of generating bundle.js I should attache my app to the id reactAppDisplay so that my react app can be displayed on the web brwser?

CodePudding user response：

All you need do is modify your index.jsx file to look like the following before building:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(
    <StrictMode>
        <App />
    </StrictMode>,
    document.getElementById('reactAppDisplay')
);

this will compile your react app and append the result to the HTML element which id is reactAppDisplay