The short answer is Yes, you can use React and probably most other javascript frameworks inside of LWC.
A very simply example of this would look something like this:
import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
//add as static resource
import REACT from '@salesforce/resourceUrl/react';
import REACTDOM from '@salesforce/resourceUrl/reactDom';
export default class LibsMomentjs extends LightningElement {
async connectedCallback() {
//load react & react-dom
Promise.all([
loadScript(this, REACT),
loadScript(this, REACTDOM),
]).then(() => { /* callback */
//render our element. Notes:
// Cannot use JSX without transform step
// Template just has single div
ReactDOM.render(React.createElement('div', null, `Hello React`), this.template.querySelector('div'));
});
}
disconnectedCallback(){
ReactDOM.unmountComponentAtNode(this);
}
}
This could be more powerful by using a tool like webpack to bundle your application as a static resource (example). Then you would just run loadScript
on that static resource and call a method to mount your application.
This would let you use jsx, typescript, esNext, sourcemaps, etc in your application.
However, the way Salesforce has built the dependency management of the on-platform dependencies (@salesforce/
, lwc
, lightning/
, etc), makes it extremely difficult to use those things in YOUR application. Basically all dependencies would need to be pass into your application at initialization.
I personally disagree with a lot of what is being hyped about LWC (the points in the other answer). Yes, LWC is 10x better than Aura, but still not "one framework to rule them all". I personally would not choose it for ANYTHING off-platform, and even "On-Platform", I still think that react/angular/vue is a more compelling of a solution for more complex SPA's.
It's just simply not as proven or productive out as other js frameworks.