# What is the best way to add a react app inside a page

**URL:** <https://forum.ghost.org/t/what-is-the-best-way-to-add-a-react-app-inside-a-page/36789>\
**Category:** Installation\
**Created:** [March 2, 2023, 12:02pm UTC](https://forum.ghost.org/t/what-is-the-best-way-to-add-a-react-app-inside-a-page/36789 "2023-03-02T12:02:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Decrypt](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/decrypt/32/23370_2.png) [@Decrypt](https://forum.ghost.org/u/Decrypt)\
**Post date:** [March 2, 2023, 12:02pm UTC](https://forum.ghost.org/t/what-is-the-best-way-to-add-a-react-app-inside-a-page/36789/1 "2023-03-02T12:02:12Z")

</div>

Hello, 👋 I’m using the latest version of Ghost (hosting on ghost pro so i can only edit theme file). I want to integrate a small react app inside one of my page, or even inside the partials folder in my theme so i can call it with {{\> “react-app”}} when I need. For example, this one :

```js
import React, { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  const handleButtonClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>
        {isVisible ? 'Hide text' : 'Show text'}
      </button>
      {isVisible && <p>This text appears when the button is clicked.</p>}
    </div>
  );
}

export default App;

```

What is the best way to achieve this ? I tried to search for ressources on the forum but it was for more complicated integrations and did not help me.

Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Decrypt](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/decrypt/32/23370_2.png) [@Decrypt](https://forum.ghost.org/u/Decrypt)\
**Post date:** [March 2, 2023, 12:11pm UTC](https://forum.ghost.org/t/what-is-the-best-way-to-add-a-react-app-inside-a-page/36789/2 "2023-03-02T12:11:07Z")

</div>

Here is a solution I found, but I dont know if its optimal, but its working. This is the content of my “react.hbs” file inside partials. Then I just write {{\> “react”}} where I want it to appear :

```js
<div id="react-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<script type="text/babel">
  function App() {
    const [isVisible, setIsVisible] = React.useState(false);

    const handleButtonClick = () => {
      setIsVisible(!isVisible);
    };

    return (
      <div>
        <button onClick={handleButtonClick}>
          {isVisible ? 'Hide text' : 'Show text'}
        </button>
        {isVisible && <p>This text appears when the button is clicked.</p>}
      </div>
    );
  }

  const appElement = document.getElementById('react-app');
  ReactDOM.render(<App />, appElement);
</script>

```

---

<div class="post-metadata">

**Author:** ![Decrypt](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/decrypt/32/23370_2.png) [@Decrypt](https://forum.ghost.org/u/Decrypt)\
**Post date:** [March 2, 2023, 6:44pm UTC](https://forum.ghost.org/t/what-is-the-best-way-to-add-a-react-app-inside-a-page/36789/3 "2023-03-02T18:44:41Z")

</div>

I found a better way, replacing import with this

```js
const { useState } = React;

```

and adding the minified version of react directly inside my theme. Working good. I’m closing the subject.