How to integrate React js with ghost cms? - Knowledge Share

Developer help Routing
1

This question is a self-answe . Writing this for updating the community’s collective knowledge.

If a user wants to add React component to their existing Ghost template without creating new react app, how can they add that?

2

To integrate React with Ghost you will need the following -

  1. Babel - it is a transpiler to convert ECMAScript2015+ into backwards-compatible JavaScript, to convert JSX into plain JS.
  2. Webpack - it is a module bundler to bundle your React JS files together to be imported in your Ghost blog as a tag. It is what will run babel.

Prior knowledge of webpack and babel is important. You can learn what is required within a day.

Once you feel you are comfortable with Babel and Webpack, follow the link - Integrating webpack into the Casper theme (Ghost) | by Vu Tran | Medium

I will be adding code later.

1 Like
3

Hi there,

I would appreciate it very much if you add code and more knowledge resources here. Thank you!

1 Like
4

Hi, I got tied up with other stuff. Let me look at my old code and see if I can find it.

5

Gentle reminder. Its been an year I hope you have the code now. Please share it.
Thanks

6

It seems that there are still people who are waiting for a solution to this. For my use case, I have integrated React into the (previously default) Casper theme. I have forked it and here is the repository.

To get into the specifics, I have a Webpack config that builds from the src directory as is standard in React apps. After that, I load the compiled JS file into the bottom of the default.hbs file, this is what my default.hbs file looks like. This line specifically loads everything:

<script src="{{asset "built/main.bundle.js"}}"></script>

Feel free to inspect my repo if anyone has questions!