React.JS Development Aspects in 2020

This was how I 'react'ed when I first heard about React JS back in 2014

Friend: hey bud, did you see this new stuff facebook is working on? Me: Darn! That sounds so cool (Drooling over it to understand *sign*)

Me, after a few days of playing around it,

dude, they just took directive from angularjs and is making so much noise on 'components'.... Isn't it the same notion... but exaggerated in simple terms

That was one aha moment that I often think of -

wow, they just simplified the developer experience with extra care on perfomance and clarity. Also, we were able to understand the workings by just dwelling over their website.

Well, it was indeed straight forward with some complications as we dive deeper which is pretty common when it comes to any unfamiliar systems. Boom! Few years ahead, it's the most loved library with a vast ecosystem in the web application development world, in fact, in a way, it became a starting point for invoking paradigm shifts in mobile application development, which I won't be bothering to get into for now.

The rise of this small-sized library backed by the social media platform giant, Facebook, has actually been pretty much influential in setting up the web as we see it today. Of course, there have been numerous other developments which triggered the betterment in enterprise application developments. Today, in 2020, React JS has a very helping community and immensely large ecosystem, allowing real good 'DRY' application developments. Over the years there have been way too many improvements and I would be pointing some aspects to keep in mind when developing applications that utilize reactjs as a standalone framework or integrated with other frameworks or platforms.

But Why React?

I already mentioned why but let me reiterate- the very straight forward architecture and the declarative nature with the ever-increasing vast ecosystem.

No, don't choose to code an application with React just because you heard it's cool. You might be contributing to a system whose backbone is laid out with Angular or maybe Vue and there probably is no need to introduce a new pattern for new on-boarders. Whatever it be, stick to it as long as you don't see a necessity to include a new dependency. That being said, react can go very well with other frameworks, and there are ample use cases where react can outshine.

Recipes For Lean Codebases

• Never miss splitting components into Presentation Components & Container Components
• Make wise use of Render Props technique
• Higher-Order Components technique can be a savior at times
• Functional programming with React Hooks
• Understand Context-API and avoid using Redux blindly
• Leverage the traditional in-built props.children support
• Most importantly, composition over inheritance

You might be thinking, how and when? Well, it's not a hurdle understanding these, and constant research will do no harm. In the end, it all boils down to the failed tryouts that engrave the intuition to make the right decisions.

Few Helpers From Ecosystem

• React Dev Tools will get you addicted to inspection
• Type safely is a need for enterprise-level applications and TypeScript is there
• Jest unit test:- D
• Used to charting with D3? Check Recharts
• Looking for composable components for building interactive data visualizations, try Victory
• Think the functionally could've gotten implemented elsewhere, try React-Use
• WebGL support with threejs? React-Three-Fiber to the rescue
• Clean CSS in JS? JSS?
• Need to handle complex states in the application? Chose between Redux and MobX
• BIT has an abundance of shared components and not just react components. So make good use of it.

Nope. That's not it. It's really vast. Happy learning and experimenting.