8 Useful React Components

In the modern Frontend world, everything is built and composed of components. They're building blocks of any UI. Both Developers and Designers started using this term in their work. It might consist of different definitions, but the idea is the same.

A Designer creates e.g. Button component in Sketch which has concrete properties such as width, height, color, font size, etc. It also has a concrete behavior, hover effect on click, and could be presented in different states. Given the Sketch file, a Developer can implement the Button component now. To avoid duplication and follow the DRY principle, Button should be reusable and abstracted into e.g. React, Angular, Vue, or Web component. This component should have proper HTML structure, predefined CSS styles, JS behavior and can be controlled through properties, for example, it could have a property type that would allow changing Button state to promo or secondary, by default it would have a primary type.

The Button example might sound trivial, but in practice, there is a lot to cover. There needs to be a unified theme that includes different colors, spacing rules, typography settings, and much more. Components need to work in different browsers (god damn IE 😅) and be properly tested. When creating an MVP, there is no time for that.

And that's why we reuse what others built for us. MUI or Antd are the most popular Design Systems and have free to use MIT License, and React Component Libraries based on these principles. It's fun to build components from the scratch, but it's all about finding the right balance. I highly recommend checking out all the components in their API, but in this article, I will focus on some utility components that can save you time, reduce boilerplate code, unify styling in your application, and simplify workflow with designers.

A common misconception is that MUI or Antd are absolute, that's not true! They provide the fundamentals that you can base off and still have a unique, brand look for the application. And all of that without spending a huge amount of time on implementing components behavior or supporting different tweaks in older browsers. It's basically a starter pack for your next MVP.

I completely understand and respect Developers who code components from the scratch, but I also feel sorry for them to maintain, test, make the code compatible with all the possible browsers. And at the same time, deliver features, meet deadlines and often, work under the pressure. I'm kind of a lazy Developer who loves to reuse what others have built and expand on that to achieve the results.

I've been working on multiple Frontend projects, from small to large ones and I can assure you that in 99%, picking up a pre-built Design System with Component Library such as MUI or Antd was a perfect choice. There are downsides of this approach like with any other you would go for, but let's focus on the bright sides, rite?

Let's dive in components you shall fall in love soon.

Most of the Grid Systems are based around Flexbox and CSS Grid. A layout should be the very first thing you're working on. Decide on either Mobile First or Desktop First approach and apply RWD rules. Otherwise, it will consume time to refactor the Layout component and adjust it for different devices. Usually, there is a Row and Col component, or just one Grid which is controlled through props to be either a container or item.

When you create a new view, page or want to have unified spacing and sizing of elements, start from Grid, it will save you time.

There is a lot of discussion around the styling approach, either to choose BEM, SMACSS, or CSS-in-JS. I'm a fan of the last one and heavily use that either with styled-components or JSS. It bothers me when I have to create a wrapper component just for one CSS property. On the other hand, Box can simplify and unify styling through props, e.g. instead of providing exact value for margin, it could be multiplied by a base spacing value, which in MUI is 8 btw.

One of the fundamental concepts when creating a Design System. Line heights, font sizes, colors, font weights, there is a lot to consider, and Designers have a strong opinion on that one. Well-thought Typography can impact immensely on the user. It's hard to come up with rules and standards alone. The Typography component should be used in almost every text, it will be much easier to refactor later on or apply new, brand rules from the designs.

There are use cases where you just want to apply the same padding or margin between elements. The Grid seems a bit too heavy for that as it's not a complex layout concern. The Box would also result in a bit too much boilerplate if used multiple times in the render method. Space can help with that. It wraps all of the children components and applies equal spacing between them and can also help with alignment.

When you're using a Static Site Generator such as Gatsby, using hooks e.g. from react-media might break the layout in your application. During static assets generation, there is no information about the dimensions of the window. The solution to this problem is using a standard CSS Media Queries or Hidden. When your layout grows complex, it's better to split it into smaller components for each device than fighting with all conditions in the code.

There are dl, dt, dd tags in HTML which are used for building a Description List. It can be tough to center a list when content has dynamic, unknown content. It's often the case that every description should be left centered. Also, with Descriptions you gain semantic structure and simplified creation of details pages.

There is a separate package needed when using icons from MUI or Antd, but it's up to you which ones you will use. I can tell that 90% of icons are from these packages in my projects. Only 10% is reserved for unique icons, illustrations that are specific to my brand. With the Icon it's easier to manipulate SVG, resize, and apply fill color, etc. And again, you get bonus points on consistency.

Wow, we covered a lot in this article! I've linked resources between the lines with the hope that you will learn something new. Remember to be a Mr. Consistency when it comes to the balance between implementation and designs, but don't push too hard, communicate, and work out it all together.

There are a lot more components than I've described in this article, please hunt some and start using them in your application if you find they could be useful.

Big thanks for reading the article, you're awesome! 🙇‍♂️

You can also find me on:

Thanks for all the support. ❤️