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

Javascript – Embed React JS Within an Existing Page

For the purposes of learning React, and for migrating existing applications to React, I would like to embed a React component within an existing page that is already full of HTML and JS of its own – similar to how KnockoutJS’s applyBindings method can target a specific DOM element:

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

Unfortunately, every answer I can find related to mixing React with other JS recommends letting React control the rendering of the whole page, and wrapping the other JS in a React component. For example:

If this is the only option, it is very limiting, and pretty much restricts React to new green-field projects, not progressive migration of existing projects.

Can React be used in this way – can it control a specific DOM element and its children, and leave the rest of the page alone?

If so, what’s the minimal amount of code to do so? Pretty much every React tutorial starts with create-react-app, several React plugins, a build toolchain, etc. All of these things get in the way of both learning React (so many things to learn at once), and using it in existing projects that already have their own existing content and build toolchains.

Tags:

2

Answers


  1. 0

    You can implement single-spa. With it, you can then create micro-frontends in ReactJS that get embedded where needed.

    Login or Signup to reply.
  2. 0

    ReactJs and almost every frontend library developed in a way so that one can run multiple apps of same or different library/framework.
    Now let’s understand How you can use ReactJs to control part of your DOM or can say a part of a view/page.
    First step is to load ReactJs and react DOM in your html via a cdn link.
    Now it’s time to render a component which you had already developed. For your ease, I have created a stackblitz javascript project for your reference. Here is the link https://stackblitz.com/edit/js-gmhwuw?file=index.js,index.html,hello-world.js

    But I’m explaining the same here as well. React and ReactDOM will register itself to window object so that you can use both object once script is loaded. We need to understand here about React is that React never take control of whole DOM. It will always control a container and we actually register a container div with React where React will render provided component. So we can say here that a page can have multiple ReactJs applications. Here is code which can use to render a React component inside a div with id react-app

    // import your component via lazy loading
import('./hello-world.js').then((comp) => {
  // get the container where you want to render
  const reactDiv = document.getElementById('react-app');
  const reactRoot = ReactDOM.createRoot(reactDiv);
  reactRoot.render(comp.default());

  // here I'm registering one more react application in another container
  const reactDiv2 = document.getElementById('react-app2');
  const reactRoot2 = ReactDOM.createRoot(reactDiv2);
  reactRoot2.render(comp.default());
});

    Hope I’m able to resolve your query but please comment if you need any further help

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

Back To Top
Search