javascript - How to load a React Component in an existing jQuery application on jQuery click - Stack Overflow

admin管理员组

文章数量:1302407

I have an existing single page application build in jQuery/HTML. I can't rewrite the existing application in React because it's very big.

I am planning to build new screens in that existing application with React. However I wonder, how can render React screens on click of a button/link from existing navigation?

It's something like, the click handler function is a normal JavaScript which is outside the React ponent and inside a handler function I have to write code to load new screen which is made in React Component.

I am not directly including react.js and react-dom.js in index.html, rather i am creating a bundle.js by using babel and webpack. So accessing ReactDOM.render outside bundle.js is throwing error.

I have an existing single page application build in jQuery/HTML. I can't rewrite the existing application in React because it's very big.

I am planning to build new screens in that existing application with React. However I wonder, how can render React screens on click of a button/link from existing navigation?

It's something like, the click handler function is a normal JavaScript which is outside the React ponent and inside a handler function I have to write code to load new screen which is made in React Component.

I am not directly including react.js and react-dom.js in index.html, rather i am creating a bundle.js by using babel and webpack. So accessing ReactDOM.render outside bundle.js is throwing error.

• javascript
• jquery
• reactjs
• react-redux

Share Improve this question Follow edited May 31, 2018 at 11:33 arun bahal asked May 31, 2018 at 11:16 arun bahalarun bahal 33833 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

With React, you use ReactDOM.render to attach layout created with React ponent to the DOM.

It does not really matter to which DOM node to attach, or when you call that function. The usual way is to do it on page load, but you can do it when a button is clicked just as well.

It could look something like this:

$('#my-button').click(() => ReactDOM.render(<MyApp />, $('#my-container')[0]);

In this example, <MyApp /> would the root ponent of your React layout, and my-container would be some div on the page where you want to put the React layout.

What if I'm not using a module bundler?

If your existing page does not use any module bundler like webpack, you cannot easily import ReactDOM or use JSX notation in your plain jQuery code.

In this case, set up a webpack build to create the React layout and expose a global function that adds the React layout to the DOM. A beginner-friendly way to do this is using create-react-app.

CRA can create a bundle that includes your JSX code and all the libraries you need. You include it in your page with a script tag, just like you include the jQuery library.

In your React app, create a global function that adds the React layout to the DOM, for example:

window.renderMyReactApp = element => ReactDOM.render(<MyApp />, element);

In the jQuery code on your HTML page, call the function like so:

$('#my-button').click(function() {
  window.renderMyReactApp($('#my-container')[0]);
});

本文标签： javascriptHow to load a React Component in an existing jQuery application on jQuery clickStack Overflow