Question 174098 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use one react app into another react app?

I have two react apps, parent app and child app. and child app have an hash router.

  1. I have build the child app using npm run build, It creates build folder.
  2. That build folder moved into inside the public folder in parent App.
  3. In Parent App, I have a menu name "testing", when we navigate this menu, wants to render a child App content. to this I have used iframe inside testing component, src mapped to required router
    like this
const Testing = () => {

    return (
        <div className="testing" style={{ width: "100%", height: "100%" }}>
            <iframe
                title="testing"
                id={"chartID"}
                className="iframe"
                src={`${AppSettings.publicUrl}/tradjini/index.html#/margin-calculator`}
                /// src="http://localhost:3001/app/strategies"
                height="100%"
                width="100%"
                frameBorder="0"
                name="testingView"
            >
            </iframe>
        </div>
        
    );
};

export default Testing;

with this we can able achieve the task, but need to use child app content without using iframes any solution are most welcome.

In react doc I could see https://react.dev/learn/add-react-to-an-existing-project is this helpful for my task?
The task wants to use one react app menus into another react app without calling external links in iframe

Tags:

2

Answers


  1. 0

    Why are the two applications separated?
    Unless there is a specific reason to separate them then the solution would be to:

    1. Move your Child Application into a component.
    2. Render that component into your parent app using the same return statement that renders an iframe.

    Child APP:

    const ChildApplication = () => {

return ( %%%Child App React Code%%% )

}

export default ChildApplication

    Parent App:

    %%%% Testing Code %%%%
return ( <ChildApplication /> )
    Login or Signup to reply.
  2. 0

    I think you could achieve your objective using Micro frontend. There are some frameworks that allows you to create your page using multiple React projects or even other frameworks like Vue, Angular etc.

    If your only objective is testing, with storybook you can test your components, see them working and even create a nice documentation with it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search