Elementor wordpress + React or Angular

It is possible with React. With more details, I could help you a little more. But in general this is the way to do it.

For your widget, echo a div with a unique id. Per example:

<div id="myReactWidget"></div>

In react, you usually see this to render the app:

import React, { Component } from 'react';import { render } from 'react-dom';class App extends Component {     render() {    return (      <div>        <p>          Start editing to see some magic happen :)        </p>      </div>    );  }}render(<App />, document.getElementById('root'));

Well, if you replace "root" by "myReactWidget" it will be rendered in your Elementor widget.

Example:

This:

render(<App />, document.getElementById('root'));

Replaced by:

render(<App />, document.getElementById('myReactWidget'));

Please note that you have to enqueue your build reactjs script for this to work

For this please run in your project root directory:

npm run build

And take a look at the /build folder to see what to include

There are several issues to solve for this to work effectively such as State management between Elementor Widgets, CSS isolation between the React application and Elementor and how to manage props between these two ... I tried to provide an answer to these questions via an NX plugin

https://www.npmjs.com/package/@betrue/react-elementor

Based on NX workspace pattern they will generate react.js components wrapped by web components tags isolated by shadow DOM, state is shared using redux.

The plugin will generate a starting code base to answer most of these questions.