This question is a self-answer. 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?

I searched the internet for solutions on how to add React into plain HTML. Then looked into how I can add that into the handlebars template that Ghost CMS uses. Then understood how webpack and babel work and why they are required.

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 - https://medium.com/@tranvu/integrating-webpack-into-the-casper-theme-ghost-b68b49a073b4

TODO: I will be adding step-by-step guide and code later.