How to integrate compound React(Typescript) component into html page

Question

I have the old website which was built by Vanilia Javascript. And now I am converting it to React. So I am going to render compound React(Typescript) component in HTML page. But it does not work. Here is my code.

app.html

<body>
  <div id="test-id">
  </div>
  <script src="https://unpkg.com/react@15/dist/react.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js" crossorigin></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
  <script type="text/tsx" src="../test/component/Test.tsx"></script>
</body>

My component - Test.tsx

import { makeStyles, ThemeProvider } from '@material-ui/core';
import { Web3Provider } from '@ethersproject/providers';
import { useWeb3React } from '@web3-react/core';
import { useEffect, useState } from 'react';
import Header from '../Layout/Header';
import { api } from '../../services/api/api';
import TestMain from './TestMain';
import Footer from '../Footer/Footer';

const useStyles = makeStyles((theme) => ({
 ... some styles
}));

type Props = {};

const Test: React.FC<any> = () => {
  const classes = useStyles();

  let data: [] = [...example data]

  return (
    <div className={classes.root}>
      <Header login={true} color="primary"/>
      <main className={classes.main}>
        <TestMain data={data} />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.render(<Test />, document.getElementById("test-id"))

I found many examples for this, but it was a simple component. It worked for me. But when I try to render my component in HTML, it does not work. My component includes external component, Material UI and etc. Is it possible to render my component in HTML page? If yes, please anyone help me.

You are currently building your component in the browser, this is considered a bad practice and won't for any real project without a lot of manual work. I would recommend looking into different bundler programs. I would recommend [parcel](https://parceljs.org/), since its really easy to set up and requires pretty much no configuration. You will want to start by reading their getting started guide. — Olian04, Jan 14 '22 at 12:15

score 0 · Accepted Answer · answered Jan 15 '22 at 12:26

It is probably not easily possible.

(Note: actually I'm thinking of a webpack setup right now. I never used parcel, as recommended in the comments to your question, and I don't know the possibilities there)

HTML and the React app source code are very different technologies, basically:

React is Javascript / JSX / Typescript / ... code that is compiled and generates HTML pages, and
a HTML website is HTML pages, (probably) including some javascript code

React code just doesn't know anything about the static HTML files, and the HTML files can not compile the React code.

The React app includes e.g. these technologies:

modules (see also How to isolate components in React app.js bundle)
Typescript, needs to be "compiled out"
JSX, needs to be compiled to javascript

There are solutions (more or less) for all these individual technologies, but in combination it becomes quite complicated, and it's probably less work to refactor the whole HTML website to React code (or more efficient to do it all at once, instead of bit by bit).

There are some different approaches:

Build a React app and copy the old HTML code into it
HTML pages, ReactDOM.render() in one or more places
React code using dangerouslySetInnerHTML
Setup some complex tooling and workflow that is combining the old HTML code and the HTML code that is generated by React, after the React compiling
...

How to integrate compound React(Typescript) component into html page

1 Answers1