Here at SalesLoft, we are actively migrating our AngularJS app to a React app. The process of combining one front-end framework with another, while gradually removing the first can be pretty tricky. One tool that makes the refactoring easier is Storybook. The following rant will be my findings and knowledge of how to add React to angular using Storybook.
This post is not about how to write React or Angular, it’s about how to integrate them together!
Step one is getting your React code into an AngularJS app in a semi-elegant fashion. The first thing is to create an angular component. This will serve as your ‘container’ for your react component. Here you will declare its props; functions, booleans, and anything else the component needs to render. Now I imagine you are thinking “why would I write more code to do this? Why can’t I just do all that in the angular controller?” Because hopefully in doing so, you cut functions and logic from it!
There’s nothing better than looking at your controller’s diff (pictured above) and watch how it decreases in complexity by removing code instead of polluting it by declaring props or any specific or new function that the React component will need. This is very important especially when you build multiple React components and put them within the same angular template. It greatly helps reduce complexity and confusion. When you are dealing with brand spanking new controllers it’s even easier to keep them clean.
Step two, is leveraging Storybook. Using Storybook is not only super cool, but also allows you to develop React components faster. On a high level, you can build full React components in isolation — meaning they run on a different port than your application. This makes Storybook WAY faster to code and easier to view the components you make. Another great benefit of using Storybook is that you can create all the various states that a component could be in by passing various stubbed props to the component. Take a look at the screenshot below. Other than importing React and Storybook into the file the file itself only has two things in it; a function helper to define props and the stories themselves!
Inside of the storybook UI you can switch back and forth between these different states with just a click! (pictured below)
Well, there you have it! I hope that gives you all some perspective on how I attack integrating React into AngularJS using Storybook. If anyone has any questions I would love to hear from you! Leave a comment or question to start the conversation.
Stephen Settle is a software engineer at SalesLoft on our email integrations team and our resident action movie connoisseur. You can find him at a theater watching the latest, greatest Marvel movie (Marvel >>> DC; don’t @ him).