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