CODEWITHSUNDEEP
reactjs
Ioannis Dontas
Ioannis Dontas

Reputation: 659

How to embed React Components in html pages

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.

Upvotes: 16

Views: 33851

Answers (6)

Reny Dev
Reny Dev

Reputation: 1

Best solution I found is to compile the React Component using build and then refer the static files into your solution just like any js or css normally. With this approach was it does not matter if its js/jsx/tsx also import and html tag all get converted and it works. No need for Babel or Webpack or even React dom reference as the chunks of builds contains of requried references. Yes u cannot refer the Component as but if u provide a root div as entry point, it will have ur React Component as the browser understands it.

Upvotes: 0

kca
kca

Reputation: 6055

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.:

Upvotes: 5

Paresh
Paresh

Reputation: 138

There are couple of options which can be explored here

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

  2. direflow bundle

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

Upvotes: 0

jseto
jseto

Reputation: 51

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 );
}

Upvotes: 2

thedarkone
thedarkone

Reputation: 412

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.

Upvotes: 2

Abhinav Risal
Abhinav Risal

Reputation: 1420

Use 

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

You can render in your HTML like this: 

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

Upvotes: 4

Related Questions