Flexible react components

Hi I’m Diana, a front-end engineer from Uganda. I love react, am a diehard fan. It’s really the first Javascript framework that aligned with how I want to write UI. I’ve been writing it for months now.

What I have learned from using react to build flexible components is “Why do we care if a component is flexible and what does flexible even mean?” So in terms of building UI, flexible is often meant as reusable. For example if you are tasked with building a UI component, no matter what it is, let’s say a block, getting the same UI element, makes us feel good because we have already built this

Sure, these 3 elements are all different colors but each shares the same structure as our initial block. So we can re-use it. The functionality of the blocks may actually differ e.g. One could have a tooltip One could have a dot One could have a modal etc………………….. Same block, different requirements.

This is however not enough, let us imagine sometime goes by and we have stopped working on this component, but our coworkers are working on this component and they are going to add to it, because it is a reusable component and the changes are just going to be everywhere. Why would they have to rewrite all the code when they can just reuse the component by adding some “props”?

Props stand for "Properties." They are read-only components. They are objects which store the value of attributes of tags and work similar to the HTML attributes. They give a way to pass data from one component to other components. They are similar to function arguments. They are useful when you want the flow of data in your app to be dynamic...ie Flexible.😁