The Superpower of [React]Libraries
“Having superpowers doesn’t mean you know how to use them.”
For me, coding is like building a house. Whether you are just doing a simple routing setup or a fancy and interactive statistics page, every little piece matters and every little snippet will have something to say in the end about your product.
So what do we do when we have to choose the best way to build the house? There are two options, either to build every little piece from scratch, or to library and then to build on top of something that is already pretty awesome to serve as a solid base.
People tend to think that using frameworks and libraries means losing the ability to create. What I think is that they give you the time to create even more.
Let’s take a look at three of my favourite libraries to play with around React:
Being a Front-End developer, I’ve pretty early come to the conclusion that it’s not only important to deliver something to the users, but it’s also how you deliver it. When it comes to displaying data, visualisation is the key. After trying other libraries like Victory Charts and Vis, Recharts is the one I would always come back to.
Simplicity. Being built around the idea of having everything split into components, all you need to know in order to start using it is that every chart is composed from a grid, axis, line items and (of course) tooltips.
Tangled is easy here. Thanks to the independent React components, having more complex charts is easy. You have the power to customize and adapt components to obtain almost every result you have in mind.
Big data looks good on it. By the time I was looking for “the perfect library”, I had a huge bunch of data that made some other libraries I’ve tried look laggy. Instead, Reachats, seems to be fast when it comes to “tooltip around” your chart lines. [ And we all know that no slow product ever made a client happy. ]
Good documentation. Even only for the sake of seeing some nice examples, it’s worth seeing what’s this all about. There are, indeed, some things you may find that are missing from the documented props of some components, but the overall documentation is clear and well explained.
Last but not least, typed. Yes, I know how annoying can be to find great libraries that don’t offer support for Typescript. Recharts? Not the case.
Antd is a library that I would definitely describe as diverse. It offers a big range of UI web component which are definitely built with the purpose of offering a great user experience.
The design of each component is usually basic, but each of them offers the possibility of adding your own style. And, for the more creative ones, you can always override their css directly by using their classes. Good practice or not, it is for sure fun.
The main reason why I would choose this library, even for other future projects, is that it helps you save time for the important details of your work. Instead of spending time to create a nice select with search, for example, you can invest your hours in adding a stunning css to the already working component.
In the picture below you can see a before and after for a simple input.
I don’t know about your superpowers when it comes to UI development, but this library is definitely one of mine.
React Final Form
This library is built upon the idea of being able to have a state of your form/modal, using as a design pattern the observer pattern. It is a wrapper over your fields, which subscribes to any change that happens to your state or only to a part of it, allowing you to optimize the re-rendering process.
There are few aspects that made me choose React Final Form and that everybody should know in order to take full advantage of it:
Form component. It takes your form state and places it on a react context so that it can be accessed by the Field component.
Field component. It subscribes to the form state and it’s linked to it via a key kept on the name property.
Field name property. The field name is actually more than just a simple property, it’s a depth value that can be provided in order to have more complex value hierarchies in your form.
Let’s take a look at the picture below. It can be seen that the room has a name and that it has bookings, which also have fields inside.
In this case, the field name for start date Filed will be `bookings.booking${booking_id}.startDate`, with the same rule applying to the end date. It will result in a values object looking like:
Validation. The Form component provides a validation property which has as parameter the entire object representing your form values, in the form seen above. Having this, the programmer can provide his own validator function. This function should return an error object with the same fields hierarchy as the values object, so that the magic can happen: if there is an error for a certain field, it will appear on the Field meta.error property too.
With many options when it comes to the perfect tools, technologies and libraries can sometimes be confusing, but what I believe is really important is to experiment, to find what suits you and the project’s requirements best and to never stop wondering what’s beyond what you already know.
Happy coding, everyone!
