You may have heard that we started using React in production over a year ago at the NFL. If you’ve been using it too then you know a lot has changed in that time: React itself went from version 0 to 15 (not really, but really), React Router introduced dynamic routing, inline styles entered our collective good graces after many years in the doghouse, and the React ecosystem in general grew by leaps and bounds. To say it’s been an exciting year would be an understatement.

Of course, that excitement hasn’t come without a few headaches. The NFL web team maintains nine React projects in one monolithic repository. As much as we want to keep them all shiny and up to date, it just isn’t feasible (or sane) to comb through that much code every time there’s a new syntax for refs or a new routing paradigm.

The hardest part is knowing when to let go (of your code)

Which means that when we decide to go for it, we do it all at once, like ripping off a band-aid. We recently packaged about six months worth of minor updates into one exhaustive migration. Most of the changes were small and repetitive, like modifying every <Link> tag to support the latest React Router, or massaging all of our styles a bit as we crossed over from Stilr to Radium. The point is, the updates we had to make weren’t large or complex, but they were everywhere.

Enter react-codemod

Not long after we started quietly panicking, we came across a project by Facebook called react-codemod. Every so often React comes out with breaking changes in its API, and react-codemod is a series of scripts that go through your code for you and make the necessary updates (the technology behind it is outside the scope of this article, but it’s pretty awesome).

Using react-codemod as a guide, we began writing our own scripts to kickstart the migration process. They all follow the same basic structure: parse your code into an abstract syntax tree, edit the tree, and print out the new code.

Simple, right?

Baby Steps

We started off small: take something that could be fixed with a simple find/replace, but handle it via codemod. The first item we chose to tackle was a self-inflicted wound. We had open-sourced one of our libraries (yay!) so all of the imports had to change (boo) from @nfl/gridiron/addons to react-helmet.