How to use previously packaged ReactJS component in static website

JVarghese99 — Tue, 17 May 2022 17:35:02 +0000

Hi,
I have been given a ReactJS web component whose cource code is as follows:

import * as React from 'react';
import {createComponent} from '@lit-labs/react';
import {Button} from '../../components';

export const ExButton = createComponent(
    React,
    'ex-button',
    Button
);

This react app is bundled into index.esm.js
file

My task is to use this component in a static website. I have created an html file as follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <xml:namespace prefix="v" ns="urn:schemas-microsoft-com:vml"> </xml:namespace>
    <title>React JS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/browserify@17.0.0/index.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  </head>
  <body>

 <!-- pre-packaged React web component-->
    <script type="module" src='./react/index.esm.js'></script>
<!-- script to render the above component -->
    <script type="text/babel" src='./react/reactjs-btn.js'></script>
  </body>

</html>

The contents of reactjs-btn.js is as follows:

'use strict';

const btnContainer1 = document.querySelector('#button_container');
const btnroot = ReactDOM.createRoot(btnContainer1);

let element = <ExButton type="primary"></ExButton>;
btnroot.render(element);

I am running the html file on apache server. However, I get an error
Uncaught ReferenceError: ExButton is not defined

Is it even possible to render a previously packaged React component in a static website?

I would appreciate any help
Regards,
John

DEV Community: JVarghese99

How to use previously packaged ReactJS component in static website