Photo by Kevin Ku from Pexels
I’ve been spending a lot of time recently working on leveling up my skills with the React JS framework. I’ve been informed at work that we will be shifting away from Vue and future projects will be in React. To that end I’ve received instructions to spend some time prototyping some new UI projects using React (also the Next.js sub-framework).
This has kinda forced me down the road that I faced in my previous post where I was deciding which framework to use in the rebuild of my professional portfolio site. As I will have to spend time leveling up my React skills for work I may as well put them to use in aid of my personal project as well.
In studying Next.js I’ve learned about the styled-jsx plugin. It comes baked into Next.js but is also usable in other React related projects. It enables styles to be component-scoped much in the same manner as Vue does. This alleviates some of the CSS-in-JS anxiety that I’ve had when wrestling with previous React projects.
In my reading and practicing I’ve also been learning about the differences between Class based components and Function components in React, which is a subject I’d not learned much about till now. It seems that up until recently the main difference is that Class components were the only way to have the component have access to the state of the page/app. Where as Functional components were more basic and static. This changed about a year ago with the release of React Hooks. Hooks give Functional components access to more features like useState(). So while Class components are still a valid way of organizing code in React, it is now recommended to code things ‘Functionally’. (useful article on the subject – https://overreacted.io/how-are-function-components-different-from-classes/)