DEV Community

Nill Webdev
Nill Webdev

Posted on

React Stack 2021

Over the last few years, there have been some big changes in React itself, and the ecosystem has evolved quite a bit too.

Here’s where things stand in 2021.

React:
Well isn't that obvious, since we are talking about the React Stack after all. We all know how React has seen a rise in popularity to become one of the most loved front-end frameworks of all time. This also means more developers are building projects in React than ever before.

TypeScrpt:
TypeScript is a typed superscript of JavaScript that compiles to plain Javascript, by using React and TypeScript together we get the benefit of statically typed language for the user interface and also lowering the probability of shipping and bugs to the front-end.

Jest + React Testing Library:
When it comes to testing I personally prefer Jest with React Testing Library as my go-to packages and they are in fact recommended by the react official documentation. What is great about react-testing-library is that it encourages you to write tests that resemble the way the users would interact with your software this helps you avoid implementation details.

Redux:
State management libraries help us to manage the data in our application. The new official Redux Toolkit is excellent and is the recommended approach to use Redux in 2021. If you are going to use Redux, be sure to check those out.
Other alternatives available MobX, Recoil and also using React hooks (useContext + useReducer)

Chakra UI:
Chakra UI has an abundance of components and works with the styled system approach which I personally prefer. Another alternative Material UI. Using a component library is a personal choice.

React Forms:
Formik and React Hook Form seem to be the favorites right now, with hook-form gaining steam. Both supports schema-based form validation with Yup where you can pass your schema as an optional config. The form will validate your input data against the schema and return with either errors or a valid result. Formik or React Hook For with Yup validation library is definitely a swiss knife for all things related to forms in React.

Next.js:
Next Js is a React framework that gives an excellent developer experience with all the features that you would need to build a fantastic application, there is hybrid, static and server-side rendering, Optimized SEO, image caching, TypeScript support, built-in routing, API conventions, and a lot more. It might probably be most if not every React project might be built in the coming years.

Do let me know if I have missed some of them in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you like it.

Top comments (0)