how to configure react + webpack + babel on an existing website with a different technology

Question

I have a web application developed in php, jquery and other technologies ... I need to add React to an existing web application only in a part of the application, I would like to know what would be the recommended configuration of webpack + babel

Answer 1

in order to do what you want, you need to get a bundle out of your react code (that is done with webpack, which you're already using).

Only instead of just calling React.render(...) in your index.js, you'll do something like so:

function initMyReactComponent(selector, props = {}) {
  ReactDOM.render(
    <MyComponent {...props}/>,
    document.querySelector(selector),
  );
}

and in your php code, you add the bundle via a <script> tag, and use the initMyReactComponent method in site.

React is very easy to use in that sense, because it can mount itself anywhere, anytime, all you have to do is tell it when to do it!