Multiple, independent components?


(Evan G) #1

Hello,

Most of the articles I’ve seen so far, involve a workflow where the whole react app is compiled into a single file, lives under a single DOM element (typically: div#root).

I am working on a project, and I want to progressively replace existing jQuery components with React. So I am dealing with different challenges I have little experience with:

  1. Some of the data I need to use lives in a JS object which is already prepared by the CMS on each page load. This is outside of React state of course. I somehow need to keep this data in-sync with the React state. If the jQuery code updates data through AJAX, I want my React components to follow through. Is this going to be an issue?

  2. I don’t want a single monolithic compiled JS. I want separate react ‘widgets’, spread throughout the page, compiled separately, at different times, possibly by different developers. Doable? Sane?

  3. For the previous point to work best, I need React + ReactDOM included just once in the page, not compiled separately into each widget. Is that ok?

Thank you


(Mikayel) #2

For updating the react component data from your jQuery you just need to cal
ReactDOM.render() with new pros, react component will keep state unchanged.

For splitting your app code by routs you can see example here https://github.com/mikayel/React-Composite-View


(Evan G) #3

Thanks.

The plan is this:

  1. I am currently using create-react-app to build and test the React components in a single page.

  2. After that, I want to build each component, separately, in its own JS file, like a standalone widget. I want to use ReactDOM.render() separately for each widget in the production website.

I am stuck at step 2. Ideally, it has to be simple, not having to do a separate npm/webpack setup for each widget. I am not building an SPA, I am just putting React components in a web site, alongside other components.

PS. Thanks for the React-Composite-View, but it doesn’t seem to do what I am looking for. I don’t see a need for react-router which is a requirement.


(Mikayel) #4

Did you try expose-loader ? You don’t need npm/webpack setup for each widget.

I have recommended Composite View Pattern, and to implement pattern in your case you don’t need react-router, as I understand you are using server side router. The idea is to load header, footer, menu, body, etc separately per each page, instead of loading everything in index.jsp and add if conditions inside header.js or footer.jsp.


(Shiva Nandan) #5

You can have a single webpack project with multiple entryPoints. And you can have one entry point just for react + react-dom + other common modules. and then each widget can be an entry point.

When you run webpack, it will automatically generate separate JS files for each entry point listed. So you get 1 JS file with just react + react-dom; and one JS file for each of your widget entryPoints.