Migrating a 5 yr old Sass project to React

Created with Sketch.

Migrating a 5 yr old Sass project to React

Back in 2014 I contracted at Forbes while they were migrating to Angular. It was before React was blowing up and I was still spending most of my time coding CSS. The project consisted of slicing PSD’s and developing responsive HTML/SCSS templates for ForbesLife, before handing them off to the senior developer to refactor with Angular.

It was a fairly large codebase, so going through the old files was a bit of a process. But the code clean up / update was actually minimal. What I opted to do first was migrate the project to webpack – and use the sass-autocompile package instead of Koala. I then grabbed some Materialize styles to create a nav header, and updated the media queries for 2019.

But because these are templates, the images that ‘show more stories’ didn’t actually go anywhere. Angular took care of that, at the time. And even though I decided not to bother with flexbox or grid after all, I wanted to migrate to React. Looking up ideas, I came across this admirable solution first. But done in the older class component style, it’s the kind of code that reminds me why I used to dread Javascript. Too complex for no reason….until hooks saved the day. I also used Create-React-App and the node-sass package instead of configuring webpack this time. Here’s the repository and live app.

In the near future, I will probably redo this again with Material-UI grid instead of Sass. It worked well on a prior project!

Leave a Reply

Your email address will not be published. Required fields are marked *