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?
To integrate React with Ghost you will need the following -
- Babel - it is a transpiler to convert ECMAScript2015+ into backwards-compatible JavaScript, to convert JSX into plain JS.
- 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.