# React app wrapped In a Web Component

**URL:** https://forum.kirupa.com/t/react-app-wrapped-in-a-web-component/639231
**Category:** web dev
**Created:** [January 7, 2019, 4:38pm UTC](https://forum.kirupa.com/t/react-app-wrapped-in-a-web-component/639231 "2019-01-07T16:38:45Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)
#### Post date: [January 7, 2019, 4:38pm UTC](https://forum.kirupa.com/t/react-app-wrapped-in-a-web-component/639231/1 "2019-01-07T16:38:45Z")

</div>

I want to bring in a discussion about Web Components and how important they are this year. Will therefor start by asking the following question:  
I would like to be able to wrap a React App into a web component / Module. Is that possible? or do you have to rewrite the react app as a web component? How can you wrap an already written React app into a lit-element / Web Component that you can use and import somewhere else?

I have checked the following code for adding React components into a Web component but not React Apps as a one Web component:

```
class XSearch extends HTMLElement {
connectedCallback() {
 const mountPoint = document.createElement('span');
 this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

  const name = this.getAttribute('name');
  const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
  ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
 }
}
customElements.define('x-search', XSearch);
```