Component Management in React.

If you are a web developer, then it is obvious that you might have come across the topic of components whether it is rendering or styling UI layer in React or where it is integrating some kind of component via libraries such as bootstrap. We’ll explore the history of components, modern component development with React and its comparison across frameworks.

What is a component?

A component is the most basic encapsulation of a user interface. It is a UI layer abstraction that makes objects easier to understand. Rather than thinking of HTML as a series of tags with endless classes and IDs, components allow you to write what feels like XML to abstract away the HTML jargon with tags that are more relevant to the applications you want to build.

History of Components.

Components have been around us since the dawn of web development , often called as templates. Many server side language have provided components reffered by different names ; in PHP it is via includes and partials in Ruby.

Even on front-end , libraries such as jquery later came along with their template plugins but were much bigger than it is today. There has been always a shift to bring bigger encapsulation of components into smaller one, due to which we are now able to components effectively.

Component Management.

Getting started with components is easy. Maintaining components for a production-ready application is a bit more complex. Here are a few points to keep in mind when developing components:

Keep things consistent and eliminate redundancy :- preserving the functionality of code and abstracting away the unnecessary code.

Aim for extensibility and reusablility :- structuring the file and folder structure in such a way that it can be reused in needed time and minimize the repetition of code.

• Think in component for both composition and styling :- Components is not just about dividing visible Html elements into different components but is also for styling the elements.

Containers vs Components.

As we mentioned earlier, not all components have a visual element to them. We can clarify that distinction with something called containers. While components focus on rendering and styling, containers tend to focus on data fetching, manipulation, and logic.

For E.g — If you are adding style to the webpage, that is component and in querying it can be classified as container.

Solution for drawback of CSS styling.

One issue with CSS in relation to component-based architectures is that CSS wasn’t invented for dynamic components, but for long-form, static documents. In today’s world, few if any sites (outside of statically-generated websites) operate without some sort of dynamic JavaScript.

One example of CSS making modern web development more difficult is with naming. Naming has always been a hard problem, but it is especially difficult with CSS given the global scope of class names for your application. If you have two libraries and they both use a class .grid, how do you override that or make sure it doesn’t break what is part of your imported library?

Instead, it is advised to remove the idea of classes and class names altogether. So we need a solution which after that we can focus on the important parts, such as applying styles and focusing on our UI fragments and all of their various flavors and variants.

Solution : Styled Components

Styled Components is a library designed for React and React Native. It combines both the CSS in JS and the CSS Modules methods for styling your components.

Styled Components were created to tackle the following problems:

• Automatic critical CSS: Styled-components keep track of which components are rendered on a page, and injects their styles and nothing else automatically. Combined with code splitting, this means your users load the least amount of code necessary.
• No class name bugs: Styled-components generate unique class names for your styles. You never have to worry about duplication, overlap, or misspellings.
• Easier deletion of CSS: It can be hard to know whether a class name is already used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all of its styles get deleted with it.
• Simple dynamic styling: Adapting the styling of a component based on its props or a global theme is simple and intuitive, without you having to manually manage dozens of classes.
• Painless maintenance: You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

Comparing components across Frameworks.

React

Supported by Facebook, React has become one of the largest open source projects to date.Hundreds of external components and plugins make it extremely robust, and therefore make you exceptionally productive.

Vue

It works as similar to react. But it is not that mature as React but has the future scope.

Angular

Angular, on the Angular’s directives are what they call components. They moved towards a component-based architecture with versions 2 and beyond, but all of the other libraries such as templating, filters, and models offer a different perspective from the plug-and-play nature of React. Nowadays, there is only few projects using Angular as it has lost its lustre.