The Pro and Con of react is its that it is a library and not a framework. It only provides the basic stuff for you to use which is a logical thing to do, but sometimes you might find it difficultly in keeping consistent design patterns when you are using a bunch of UI libraries and stuff for UI. So far React has the best Developer Experience as well as best UX.
Server side rendering support is also available through framework like next.js.
react-nativeA framework for building native applications using React
React Native is my choice to write native apps as a JS/React developer. There is hardly any community that is evolved like the JS/Nodejs community. So that benefits the development a lot as most of the packages out there in npm itself is useful within react-native apps.
- has the ability to build cross platform apps
- can share code between my web codebases
- supports TypeScript natively
- has a wide community with huge support groups
- makes native development is easy from a JS developer perspective
And the best of all, it is a revolutionary idea by Facebook. All though it appears to be having issues with the JS-Native bridge. The upcoming major rewrites is aimed to tackle that.
react-selectThe Select Component for React.js
This is far one of the very best component for React out there. The built-in themed select tag in HTML has not evolved since it’s inception. The best thing about this select menu is the flexibility it offers. I have used react-hook-form to manage the state for this component throughout multiple forms. Also, the async version of this select menu is very much useful for firing api calls based on input as well.
The drawback is that you have to manually use debouncing for controlled calls. This is my go-to library for select menu’s in my projects as it is highly customisable.
One of the main well known problem and task in Programming is handling Dates and Times. Internationalisation is so difficult to tackle. This awesome library has been proven to be the best solution the problem there. This library takes a lot of stuffs off Dev’s shoulders while handling DateTIme.
But ever since tree-shaking and other super cool features were introduced to JS community, momentjs has been loosing a lot of traction it had as this is written in the distant past. I don’t recommend using this library anymore. Maybe try something like datejs in place of this.
sassThe reference implementation of Sass, written in Dart.
I have being using SASS for a long time now. This is the pre-processor I use for bundling CSS. The nested css functions is so good that I don’t write regular CSS anymore these days. I have used CSS-in-JS solutions in the past but it has proven to be much more difficult to maintain. I nowadays construct a sass file per react component which now seems to be the best pattern that is working out for me. I haven’t had a need to switch back to any other pre-processors as nesting, mixings, variables, etc… are all those things that are part of my development flow now.
axiosPromise based HTTP client for the browser and node.js
I use this http client in almost all of my projects. Its support for nodejs and browser at the same time is awesome as that helps the developer to be familiar with a single API. The APIs are Promise based which takes away the pain of callback hell. The support for cancelling requests is also very much useful. TypeScript support is also there.
Not many libraries provide the ability to compose an instance with a base configuration and then override it at the request initiator place. So far I haven’t had a reason to switch to any other library.
recoilRecoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
Even though it’s on beta I feel like it’s close to a stable release hence I am using it on two apps which are in production. Some of the APIs are still not stable though but the library itself seems promising. This avoids a lot of pitfalls with traditional state management systems and requires no boilerplate whatsoever. Interaction of state atoms using hooks is one of the cool perks of recoil. Setters and Getters are easy to use with hooks. It can be used to cover advanced use cases as well. Documentation can be improved a little bit.
This tool is one of the building block of the web now. Every major libraries are powered by this bundler. The APIs exposed by the bundler allows us to create custom plugins or loaders if needed. The community around webpack is so large. The extensibility for this tool helps us to just write stuff without worrying about reloading or even bundling the assets.
The configuration when done right will serve its purpose throughout the development. The recent breaking major version is 5 which the community is yet to adopt to.
This build tool is amazingly fast (well its written in Go, so). I have been using esbuild in a production app and so far I have had no issues whatsoever. The build time reduced from 40 seconds to 7 seconds which is super convenient. The webpack loader esbuild-loader itself helps with building with webpack. As the tool is relatively new and not mature enough, I would recommend not using unstable APIs. Decorators are unsupported when using esbuild. And the minified plugin is also real nice.