React2angular is great library to help you reach your goal! As about react, you can easily do that by including CDN link and you are good to go [1].
[1] https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f On Tue, Aug 20, 2019 at 3:47 PM Alexandre Briani Kieling < [email protected]> wrote: > Karel and Walden, > > Thanks for the very helpful information. > > When following the strategy that mixes React components in an AngularJS > app using react2angular, at the end of the migration process the AngularJS > app is replaced by a new React app, right? Have you had any issues with > that? > > Also, my AngularJS app doesn't use JavaScript modules. Isn't that an issue > when writing the React components? > > > > > On Tue, Aug 20, 2019 at 10:15 AM Walden Raines <[email protected]> wrote: > >> Also worth mentioning are the various libraries that help with using >> react in angular and vice-versa. You can import angular 1 services, etc. >> into react with ngimport [1], you can use react in angular with >> react2angular [2] and you can use angular2react [3] to use angular >> components within react. >> >> You should definitely be able to accomplish what you desire without an >> iframe. >> >> We used an older, no longer supported library to use a react component >> within our angular 1 application and it works great. >> >> Cheers, >> Walden >> >> [1] https://github.com/bcherny/ngimport >> [2] https://github.com/coatue-oss/react2angular >> [3] https://github.com/coatue-oss/angular2react >> >> On Tue, Aug 20, 2019 at 4:16 AM Karel Hala <[email protected]> wrote: >> >>> Hello, >>> >>> this thread can potentionally be interesting for others as well. I would >>> propose incremental upgrade, you would take each page and replace parts of >>> screen with react components. >>> >>> Hopefully you can mix React and AngularJs apps together - it's not >>> ideal, it's going to eat a lot of resources and it's not going to be >>> efficient, but it's the optimal way. >>> >>> You can have multiple angular apps on screen and render them to >>> different DOM elements using bootstrap [1], similiar aproach can be >>> achieved by ReactDom render[2]. >>> >>> The biggest downfall would be data communication, we have faced some >>> similiar problem in ManageIq project >>> * redux - not ideal for AngularJs and I am not sure if you can hook >>> react to already initiliazed redux (but you can give that a try) >>> * Rx.js - this would probably be ideal and you can use Subject to work >>> as a message bus for data updates in React and Angular app >>> >>> [1] https://docs.angularjs.org/api/ng/function/angular.bootstrap >>> [2] https://reactjs.org/docs/react-dom.html#render >>> [3] https://rxjs-dev.firebaseapp.com/guide/subject >>> >>> On Mon, Aug 19, 2019 at 7:26 PM Alexandre Briani Kieling < >>> [email protected]> wrote: >>> >>>> Hi, >>>> >>>> I'm doing some research on strategies to convert AngularJS apps to >>>> React. >>>> >>>> My AngularJS app has the following characteristics: >>>> >>>> - Based on AngularJS 1.7 >>>> - Uses Angular PatternFly components >>>> - Doesn't use any modules system (the dependencies are accessed via >>>> global variables) >>>> >>>> You can try ParcelJs[4], it's bundler that will not require any >>> configuration, but it's limited. Once you get used to all files bundled >>> together you can try webpack for further improvements. >>> >>> >>>> The ideal solution would allow me do run both apps at the same time so >>>> i don't miss any features during the process of incrementally converting >>>> each feature to React. >>>> >>> You can do that with Angular's bootstrap method and ReactDom render. >>> >>> >>>> >>>> What do you think of showing parts of the AngularJS app inside iframes >>>> in the React app? >>>> >>> Not really needed honestly, you'd have really hard time sending data >>> from parent frame to iframe. You can use postMessage[4], but that's going >>> to be a lot of code and hard to communicate. >>> >>> [4] https://parceljs.org/ >>> [5] https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage >>> >>> >>>> >>>> -- >>>> >>>> Alexandre Kieling >>>> >>>> Fuse Engineering >>>> >>>> Red Hat <https://www.redhat.com/> >>>> >>>> Remote, Brazil >>>> <https://www.redhat.com/> >>>> _______________________________________________ >>>> PatternFly mailing list >>>> [email protected] >>>> https://www.redhat.com/mailman/listinfo/patternfly >>>> >>> >>> >>> -- >>> Karel Hala >>> _______________________________________________ >>> PatternFly mailing list >>> [email protected] >>> https://www.redhat.com/mailman/listinfo/patternfly >>> >> > > -- > > Alexandre Kieling > > Fuse Engineering > > Red Hat <https://www.redhat.com/> > > Remote, Brazil > <https://www.redhat.com/> > -- Karel Hala
_______________________________________________ PatternFly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
