将特定的 React 组件导出到现有的 HTML/JS 项目

Question

I have a React app, and I want to use one of the components in this React app in an existing legacy (and really old) web page (which is not using any JS framework).

What I tried to do is actually a little messy and still didn't work:

Created a simple component (the one I want to show in my legacy app):

import React from 'react';

const topUserTable = () => {
  return <h1>Top Users</h1>
};

export default topUserTable;

And in my App.js:

const TopUserTable = React.lazy(() => import(/* webpackChunkName: "TopUserTable" */"../components/TopUserTable"));

My webpack output covnfig:

output: {
    path: path.join(__dirname, 'dist'),
    publicPath: 'assets/dist/',
    filename: 'assets/[name].[hash].js',
    chunkFilename: 'assets/[name].[chunkhash].js'
  },

and I ended up with a JS file named after my component in my dist folder:

TopUserTable.1ebb44d2d4e148b3973e.js

The content of the file (I don't think it matters but for sanity)

(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"./src/components/TopUserTable.js":function(e,n,s){"use strict";s.r(n);var o=s("./node_modules/react/index.js"),r=s.n(o);n.default=function(){return r.a.createElement("h1",null,"Top Users")}}}]);
//# sourceMappingURL=TopUserTable.1ebb44d2d4e148b3973e.js.map

So in my legacy project I did import to this file and to React:

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript" src="assets/TopUserTable.1ebb44d2d4e148b3973e.js"></script>

But using the tag shows nothing:

<TopUserTable/>

Not sure what I'm missing or how I could do this better. My goal is simple:

1. show an individual React component inside legacy web app OR
2. Import all my react app to my legacy project and use all the components anywhere

How I can show my React component in my legacy app?

Thanks

Answer 1

I didn't see your DOM Container to the HTML of your page and a call to ReactDOM.

You need in your legacy page (the same where you add the link tags)

<div id="react_app"></div>

and in app.js

const domContainer = document.querySelector('#react_app');
ReactDOM.render(e(TopUserTable), domContainer);

note : e is actually const e = React.createElement;

more info here