How to “Reactify” Your Existing UI Components

on YouTube ↗08m

" summary

A concrete method for reusing legacy widgets emerges: build a wrapper that creates an ExtJS component and maps React props to its constructor, wire React lifecycle methods to ExtJS method calls and events, and use a transpiler that emits rectified imports and wrappers. An implemented tool called ExtJS Reactor embeds React children inside legacy components and demos a grid with more than two million rows scrolling in the browser, proving the approach works end to end.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 2:28Background
3. 3:02Ext JS Reactor
4. 3:19Concept
5. 3:56Component's Hierarchy
6. 4:47ExtJSComponent
7. 5:27ExtRenderer
8. 5:59import

" related talks

• 23mBest Practices for reusable UI componentsMars Jullian · Nordic.js 2017
• 29mTurning an Application UI into an APINarendra Shetty · reactjsday 2019
• 38mWriting highly reusable React componentsJavi Velasco · React Alicante 2017
• 42mReact, Another Way to Think About Your Web ComponentsMathieu Ancelin · DevFest Nantes 2015
• 42mIntegrating React Into Legacy ProjectsMartin Chaov · <React.NotAConf /> 2018
• 20mI’m With Web Components and Web Components Are With MeGil Fink · ReactNext 2019
• 35mBuilding reusable UI libraries with ReactCassidy Williams · Agent Conf 2020
• 25mReact x Web Components : How It Is and How It Could BeDwane Hemmings · JSConf Korea 2022