React (I assume other frameworks will also work, but I've only tested react) definitely can be used in LWC, but it's honestly quite a hack due to the limitations and constraints on the platform.

Barebone Example

JS

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import REACT from '@salesforce/resourceUrl/react';
import REACTDOM from '@salesforce/resourceUrl/reactDom';

export default class ReactHelloWorld extends LightningElement {

    async connectedCallback() {
        await loadScript(this, REACT);
        await loadScript(this, REACTDOM);
        ReactDOM.render(
            React.createElement('div', null, `Hello React`), 
            this.template.querySelector('div')
        );
     }

     disconnectedCallback(){
        ReactDOM.unmountComponentAtNode(this);
     }
}

HTML

<template>
    <div id="react-app-root"></div>
</template>

The first thing that will stick out is that we can't use JSX!

Bundled Static Resource Example

A much better way to do this is to use a bundler (like webpack) to compile your application into a single static resource. This would allow you to use JSX, typescript and packages from npm.

Using Webpack/React in LWC Demo

The main challenge with this is that it will be challenge with this approach stems from the way salesforce injects dependencies into LWC. In theory you could pass in the dependencies themselves, but I haven't had much success with this.

Long story short... If you want to use react/angular/vue on the salesforce platform, I would highly recommend going the VisualForce page route.

I've been developing VF/React/Typescript SPA on salesforce for almost 3 years and I've yet to come across a use case that couldn't be handled.

React (I assume other frameworks will also work, but I've only tested react) definitely can be used in LWC, but it's honestly quite a hack due to the limitations and constraints on the platform.

Barebone Example

JS

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import REACT from '@salesforce/resourceUrl/react';
import REACTDOM from '@salesforce/resourceUrl/reactDom';

export default class ReactHelloWorld extends LightningElement {

    async connectedCallback() {
        await loadScript(this, REACT);
        await loadScript(this, REACTDOM);
        ReactDOM.render(
            React.createElement('div', null, `Hello React`), 
            this.template.querySelector('div')
        );
     }

     disconnectedCallback(){
        ReactDOM.unmountComponentAtNode(this);
     }
}

HTML

<template>
    <div id="react-app-root"></div>
</template>

The first thing that will stick out is that we can't use JSX!

Bundled Static Resource Example

A much better way to do this is to use a bundler (like webpack) to compile your application into a single static resource. This would allow you to use JSX, typescript and packages from npm.

Using Webpack/React in LWC Demo

The main challenge with this approach is gaining access to salesforce platform services like @wire. This is challenging for two reasons:

1. Behind the scenes, Salesforce does some crazy dependency management to inject these imports into each LWC

2. The LWC compiler seems to be restrictive around how its dependencies are used. So far I haven't figure out how to pass service level dependencies into the react application.

Long story short... If you want to use react/angular/vue on the salesforce platform, I would highly recommend going the VisualForce page route.

I've been developing VF/React/Typescript SPA on salesforce for almost 3 years and I've yet to come across a use case that couldn't be handled.