Angular Directive alternative in React

Background vector created by redgreystock — www.freepik.com

Angular and React differ in almost every aspect. They’re like Apple and Samsung, same purpose but different implementations. However, some concepts like component, routing, or state management are the same for both. So If you’re moving into React from the Angular world, it’s obvious you’ll try to find similar elements that you were used to in Angular.

A directive is a strong concept in Angular because it gives you a great level of abstraction. In simple terms, you’re generalizing behavior without any visual representation.

For example, if you want to track the user clicks on particular elements, you can create a directive like this:

Then we can add on as many elements as we want

<app-card interaction> </app-card>
----
<div interaction> hello </div>

I can think of countless useful directives, but in short, it’s a necessary functionality.

So when I moved to React I tried to find an alternative for a directive, unfortunately, at first glance, it was not obvious as it was for components, where…