DEV Community

JVarghese99
JVarghese99

Posted on

How to use previously packaged ReactJS component in static website

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
);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
jonasbn profile image
Jonas Brømsø

Hi @jvarghese

Have you tried StackOverflow or similar as a forum to get your question answered?

I am by no means a JavaScript or React developer, but my suggestion would be to make the simplest version using React that you possibly can, meaning even simpler than what you demonstrate.

If you read up on the error is might be due to the component not being available (ref)

  • Can you demonstrate that React works?
  • Can you demonstrate that your component is loaded?
  • Can you demonstrate that your component is initiated?
  • Can you recreate the problem outside Apache using React tools?
Collapse
 
jvarghese profile image
JVarghese99

I managed to get my example working by adding the following line to the ReactJs project

(window as any).ExButton = ExButton

I am not sure if there is any better way.

Collapse
 
jonasbn profile image
Jonas Brømsø

Glad to hear you got it to work.

Just out of curiosity - and only respond if you have the time.

  • What led you to the solution?
Collapse
 
annshuk profile image
Annshuk Sharma • Edited

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

use this above and thn make
const btnContainer1 = document.querySelector('#button_container');
const btnroot = ReactDOM.createRoot(btnContainer1);