Last time we looked a bit at the background and some built-in features of React. As promised it's now time to look at some optional tools. Just like with Vue and Angular, components play a big role here and as usual you can create your own or use some of those made by the rapidly growing community. Let’s take a look at React libraries you should check before 2020 ends.
React based frameworks
If you’re planning on working with React most likely you’re going to have to pick between two starter frameworks, Gatsby.js and Next.js. React by itself works only on the client side and does not provide server side rendering, while those two build on top of React and provide SSR/SSG. Both also follow JAMStack architecture and provide you with a boilerplate which helps speed up and simplify the development process. That’s enough about similarities and let’s look at what the choice boils down to:
Gatsby.js: generates HTML via server side generator during the build time, this means you don't need a Node.js server to handle rendering and you’ll have HTML files ready right after build. Data fetching is handled via GraphQL which has its benefits (you only fetch what you need which saves resources and time) but also ties you to GraphQL which not everyone likes or wants to use. Prominent uses of Gatsby.js include Figma.com, React’s official site and State of Javascript.
Next.js: renders pages via server side rendering, this requires a Node.js server to run applications and handle dynamic HTML rendering. If you don't like that Next.js also supports SSG since version 9.3. What you use for data fetching is up to you, hell you can even use GraphQL. Prominent uses of Next.js include TikTok, Hulu and Twitch mobile.
Source: undraw.co
State management
State management is the most crucial part of any modern React app. Most of the time it is the biggest challenge any developer faces while working on their frontend project, especially when it comes to large and complex enterprise-grade commercial apps. Managing state is such a complex task that proper handling requires using external libraries, as at some point React itself will no longer be able to provide a satisfactory solution.
Redux: a predictable, standalone state container for JavaScript apps which helps you write applications that behave consistently and run in different environments. Being a standalone library means you can use Redux even if you don't have a UI setup yet. Redux can be used with any UI framework i.e React, where you can describe your UI as a function of your state and make Redux keep track of your components state and update them accordingly in response to UI actions. Redux is definitely the most popular choice when it comes to state management with React with almost 5 million weekly downloads on NPM.
MobX: a simple, scalable state management solution. It's easier to learn and simpler to use than Redux and focuses on helping develop simpler apps with less boilerplate code. The main focus is reducing the number of bugs by mapping the relations between state and derivatives while maintaining referential integrity. Another plus is that it can be used either client side or server side and, as a JavaScript library, lets you keep the existing utilities of JS.
Source: undraw.co
Forms
Forms are present in most web and mobile apps. Unlike Angular and Vue, which both give you a way to validate forms out of the box, React requires you to handle them all by yourself. Fortunately there are some libraries rushing to help you out.
Formik: is the most popular form library for React (and React Native). Formik is packed with dozens of micro features like different types of validation, handling API errors, auto-saving forms data and many more. It’s the result of the React community’s years of experience in terms of UI, security, accessibility etc. With Formik you can focus on developing your product instead of battling with all aspects of forms. It’s a well-tested and highly optimized solution, using which will leave you with less chances for unexpected errors and edge cases in your forms.
React Hook Forms: a light-weight form library for React, allowing you to achieve astonishing results with a minimal amount of code, which makes it very performance oriented. React Hook Forms is optimized to remove any unnecessary re-renders of your components by providing the developer a way to isolate component re-renders, improving performance of your mobile or web application. It is a great way to empower your applications with highly-performant, flexible, easy to use and manage forms.
Source: undraw.co
Testing
Test-driven development (TDD) is now one of the leading approaches to application development. It's becoming more and more popular as it reduces the chance of major bugs occurring in the future. An obvious downside of test-driven development is that it usually takes longer to bring a product to market than while using a behavior-driven development approach. Fortunately there are some useful React libraries that can make writing tests a much easier task.
Enzyme: a JS testing utility that makes testing your React components super easy. You can manipulate, traverse and in some ways simulate runtime given the output. Enzyme was created internally at AirBnB and released as an open source project in 2015. The tool aims to be as easy as possible by providing an intuitive API inspired by jQuery's API for DOM manipulation and traversal.
React Testing Library: a tool that lets you test React components without relying on their implementation details. This approach helps focus on accessibility as it basically puts you in the shoes of the end-user of the React app. The guiding principle here is that the more your tests look like the way your software is supposed to be used, the more confidence running them can give you. It's much lighter and easier to get started with than Enzyme (which on the other hand has a lot more functions) and is the recommended testing app according to React’s docs.
Source: undraw.co
UI
If it goes for out of the box React components there’s a bunch of useful libraries made by the community to check out. Using these can help you in a variety of ways by providing practical and reusable solutions, which really impact the time and effort development takes.
React Bootstrap: a UI kit which replaces Bootstrap’s JavaScript with React code. Arguably the best way to quickly start building UI as it has thousands of ready to use themes and resources. No wonder it's among the most popular component libraries with over 700k weekly downloads on NPM.
Material UI: a set of components created by Google based on their famous material design protocols. The components are self-sustaining in nature and only inject the styles they need to display. It also provides a lot of accessible and configurable UI widgets and ready to use site templates. This makes for a pretty significant performance boost especially considering the library is regularly updated and has very strong community support with over 60k stars on GitHub and is probably the most popular component library with over 1,6 mln weekly downloads on NPM.
Rebass: a tiny component library that packs a punch. Rebass contains only 8 components and weighs only 4 KBs but can be used to create a robust set of themable UI elements. It's based on the Styled System library and focuses on providing a quick start for your development process. It's really handy if you don't want to rely too much on community component libraries or you intend to create your own custom UI.
Semantic UI React: the official React integration for Semantic UI. This offers all the extra functions of the jQuery based re-scripted in React code. Comes with tons of prebuilt components designed specifically to make it easier to work with and produce Semantic-friendly code.
Ant Design: a design system for enterprise level products. Based on the Ant Design project it provides you with over 60 high quality components crafted based on a design language developed by the creators. The components are customizable and include support for dozens of languages. The focus is on helping build rich, interactive UIs for internal desktop applications (no worries there’s also Ant Design Mobile for mobile apps)
Source: undraw.co
Join up!
Obviously that’s just a few popular libraries, there’s a myriad more and everyone will easily find some useful ones. Most of them aren't complicated and take a short while to get a hang of, which is time well invested considering they usually speed up and simplify the development process by quite a bit. Creating everything yourself has its benefits, but all in all the rapidly growing and already sizable React community is probably the biggest advantage using it provides.
A guest blog post for GraphQL Editor blog by Michał Tyszkiewicz
Want to speed up your GraphQL schema development?
GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!
Top comments (9)
I haven't been doing React for a while, so I just wonder does it still make sense to use Redux or MobX in 2021?
I heard opinions that with React Hooks you don't need state management frameworks like those mentioned.
Redux + Hooks is still relevant in 2020
And 2021...
Try create and maintain an application of the size of facebook web for long time with context state and then come back here and rethink your comment hehe.
Redux is library based on state management architecture called Flow, all you team must respect strict design patterns.
If you want to replicate the behavior of redux with hooks, you must create a logical layer on top of the hooks and context API.
The state control in Redux is extremely strict and easy to debug and trace, you can only create actions and reducers that are pure functions, only in the middlewares flow can exist side effects.
dispatch-> action -> reduce-> return current state or new state
The downside to redux is that it is very verbose and this sucks, but currently does not exist another better alternative for large scale applications.
You can use redux-toolkit to create inmutable states and to make all things whit Redux more simple.
Redux-toolkit
Flux, not Flow ;)
I think Redux has a better DevTools compared to Hooks in React
Because we can track all the changes history
I started learning React a few months ago so these suggestions sure are helping me get back on track!
For state management I would add XState, the mental model is a bit more complex, but it pays in the long run.
It was very clear and light but useful. Thanks.