React meets Angular - Using React components inside your Angular apps.
Submitted by Anirudh Varma (@anirudhvarma12) on Tuesday, 29 May 2018
Technical level: Intermediate
The talk is about using ReactJS components inside Angular applications. It is intended for those who are familiar with either React or Angular at a beginner level and those who are working on large scale Angular apps but want may find React to be the right choice for a particular use case.
The key takeaways for the audience would be -
1. Why would one use React inside Angular apps.
2. Bundling and using the React component.
3. Sharing state between Angular & React using Redux.
4. Keeping the bundle size of the Angular app in check by Lazy Loading modules.
- A brief overview of Angular & React, how Angular is different than React.
- Our motivation to use a React component inside our Angular app.
- Building the React component. Experiences with Create-React-App & NWB.js
- Exporting the React component, using Webpacks multiple entry points to break up the exported code into smaller pieces.
- Using Redux to share state between the Angular app & the React component. Using reducers, actions & angular-redux.
- Mounting the React app & cleanup.
- Putting the Angular app on diet, isolating the React code by using Lazy Loaded modules.
I am a Front-End developer at SpotDraft. For over 4 years, I have worked as a Full Stack Developer working with Java, Python on the backend & React, Angular as well as plain old jQuery on the front-end. During my brief stint as a Freelancer, I also worked on mobile development projects.
At SpotDraft, I work primarily on the Front-End working with Angular, RxJS & React.