Carson Reinke's Headshot

Carson Reinke's (πŸš—β˜€β˜”πŸ”‘) Blog

Student Selected Seating Generator (React)

Student Selected Seating Generator

I previously built a Vue.js app and decided to convert it to utilize React instead.

The project was biting off quite a bit. The world of React is quite different from Vue.js, were things are more loosely associated, but still a desire to do it the β€œReact” way. While React seemed pretty straightforward, the use of Redux, Redux Toolkit, and Hooks became super confusing on how to approach a solution. Ultimately, what I thought large portions of the Vue.js project could be reused, it just was not possible. Redux’s requirement to have simple JS objects required dropping the OO paradigm. Though, this change had a surprising simplicity that went along with it and TypeScript quite greatly. Also, I had stayed away from any class components and only created functional components (from my understanding this is the direction of React).

The testing aspect had now been greatly increased with roughly 91% coverage. I focused really pushing to have at least one test per method for some level of proveability. The pre-packaged testing environment from the create React app established all tooling and configuration making it a breeze. The only confusing area definitely being the Redux mocking and the lack of good pre-established approaches.

It was wonderful learning experience and helped to focus on migrating an existing project because all project details were already worked out previously.


This project utilized the follow technologies:

https://student-selected-seating-generator-react.reinke.co/#/

https://github.com/carsonreinke/student-selected-seating-generator-react