How to embed React Components in html pages

Question

I want build a React component like

class MyComponent extends React.Component {
    render(){
        return (<div>This is a simple component</div>);
    }
}

and use it like

<MyComponent></MyComponent>

in several different pages and even multiple times in a single html page.

I dont want to create a SPA just to enhance my web application's UI with React components.

`ReactDOM.render( , document.getElementById('myID') );` and in your html file have this `
` So you have options, this can also be done in jQuery using the dialog component — fungusanthrax, Oct 20 '17 at 16:33
No I have just started learning React and I want somebody to help me search to the right way. — Ioannis Dontas, Oct 20 '17 at 16:53

score 4 · Answer 1 · edited Oct 20 '17 at 16:42

4

Use

ReactDOM.render(<MyComponent />, document.getElementById('id'));

You can render in your HTML like this:

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

edited Oct 20 '17 at 16:42

thedarkone

402
3
10

answered Oct 20 '17 at 16:35

A R

1,412
2
14
29

1

Thank you for your answers but what I would like to know is if I can render it in my HTML like and how. – Ioannis Dontas Oct 20 '17 at 16:47

score 2 · Answer 2 · answered Oct 21 '17 at 07:29

2

What you are asking for is not possible right now with React, you want to use what is known as web components.

https://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524

Read this to learn how to.

The other method is obviously

ReactDOM.render(<MyComponent />, document.getElementById('id'));

If you have to stick with React.

answered Oct 21 '17 at 07:29

thedarkone

402
3
10

Thank you for your answer. I want to stick with React so I would like to know if i use the method that you suggest, for every component that I am going to use (even the same multiple times) I have to call ReactDOM.render? What is the best practice for saving this Javascript code? I was thinking for every distinct html page to have a distinct js file with the ReactDOM.render calls. The components are going to be saved seperately. – Ioannis Dontas Oct 22 '17 at 16:02
Yes, calling it everywhere is a fairly standard practice, if you are just starting to convert to React. I can tell you the two ways, it's up to you to choose. 1) Render calls in same js file: Keeps code consolidated. 2) Render calls outside of the same js file: Everything follows export syntax, so much easier to use, when you move over totally to React JSX – thedarkone Oct 22 '17 at 23:17

score 2 · Answer 3 · answered Mar 24 '19 at 07:58

In index.jsx change the typical search for element root getElementById and change the logic to a getElementsByTagName scheme.

let elements=document.getElementsByTagName('MyComponent');
for (element of elements){
    ReactDOM.render( <MyComponent />, element );
}

score 1 · Answer 4 · answered Nov 20 '21 at 10:48

Simply adding React components into HTML code is not possible, because <MyComponent></MyComponent> is not HTML at all, it is JSX.

Explaination

JSX is a special syntax that can be 'transpiled' to Javascript, so in essence <MyComponent></MyComponent> will end up beeing Javascript code, which obviously can not just be put into HTML code.

The Javascript code generated from JSX then will be executed and generates actual HTML code.

It is possible to add HTML tags into JSX, because HTML can be interpreted as JSX (and will be transpiled to Javascript as well), like:

class MyComponent extends React.Component {
    render(){
        return <div>
            <h2>HTML in JSX works</h2>
            <SomeOtherJsxComponent />
        </div>;
    }
}

But it is not possible to add JSX into HTML, like:

<body>
    <div>
        <JsxInHtmlDoesNotWork />
    </div>
</body>

React is Javascript, so everything that is necessary to add Javascript functionality to HTML also applies to adding React to HTML.

(nearest) Solution

So what you could do is to move your existing HTML into to some JSX wrapper (which is probably not what you would like to do, because this goes in the direction of creating a SPA, what you don't want), e.g.:

<html><head>
    <title>My web site</title>
</head><body>

<h1>Some HTML title</h1>
<p>Some HTML content.</p>

<!-- add a container, where you want to include react components -->
<div id="injected-react-content"></div>

<!-- import the react libraray -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- setup react root component other components -->
<script type="text/babel">
    class RootComponent extends React.Component {
        render(){
            return <div>
                <MyComponent />
            </div>;
        }
    }

    class MyComponent extends React.Component {
        render(){
            return (<div>This is a simple component</div>);
        }
    }

    const domContainer = document.querySelector('#injected-react-content');
    ReactDOM.render( React.createElement(RootComponent), domContainer );
</script>

</body></html>

For some more background information on how to add React to an existing HTML website, see e.g.:

score 0 · Answer 5 · answered Jul 19 '21 at 16:47

0

There are couple of options which can be explored here

parcel bundle https://javascriptpros.com/creating-react-widgets-embedded-anywhere/
direflow bundle

https://jhinter.medium.com/using-react-based-web-components-in-wordpress-f0d4097aca38

answered Jul 19 '21 at 16:47

Paresh

138
1
1
8

How to embed React Components in html pages

5 Answers5

Explaination

(nearest) Solution

Linked