# Embed react components

**URL:** https://discourse.gohugo.io/t/embed-react-components/15505
**Category:** dev
**Created:** [November 26, 2018, 11:15pm UTC](https://discourse.gohugo.io/t/embed-react-components/15505 "2018-11-26T23:15:11Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![bwalsh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwalsh/32/7400_2.png) [@bwalsh](https://discourse.gohugo.io/u/bwalsh)
#### Post date: [November 26, 2018, 11:15pm UTC](https://discourse.gohugo.io/t/embed-react-components/15505/1 "2018-11-26T23:15:11Z")

</div>

Hello,

Thank you for a great tool. I’ve been evaluating it for a new site and it seems to be quite  
complete.

However, I have a requirement to embed interactive react components. I’ve looked, but I don’t see any examples or guidance out there?

What I have beed able to to:

- generate a single page app using react, run it through webpack to create a production minified version.
- copy that version to /static and route via href to that page.

What I’d like to be able to do:

- create a shortcode component that would:
  - add scripts and components to header and footer
  - generate a div
  - mount the react component to the generated div

Surely/hopefully someone has done this already?

Thanks in advance,

-b

---

<div class="post-metadata">

### Author: ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)
#### Post date: [November 26, 2018, 11:30pm UTC](https://discourse.gohugo.io/t/embed-react-components/15505/2 "2018-11-26T23:30:33Z")

</div>

> [@bwalsh](#):
>
> create a shortcode component that would:

Hi,

Did you perhaps mean [partials](https://gohugo.io/templates/partials/#readout)? (The footer example on that page has some javascript, as an example)

If you need to use shortcodes (ie you only want your react component embedded in specific content pages eg `/posts/this-post-has-react/`) you can add a [`.HasShortcode`](https://gohugo.io/templates/shortcode-templates/#checking-for-existence) check around the relevant js-related lines your layout and add your react shortcode in the post markdown as normal.
