Handling user-interactions

So far we have experimented a lot with JS functions and understood that react components are pretty similar regarding simple composition and parameterization. This kind of markup keeps codebase small and easy to reason about and hence easy to maintain longer term. A simple example is that if you are using a component A, that’s used by ten different components and A needs a change then change in A is isolated (and doesn’t need to be replicated to 10 callers of this component unless it’s an interface or props change) and can be easily tested.

Modern day websites have come a long way from static markup. Web pages are more like apps that are highly interactive. Whenever there is user interaction there has to be some eventing system. HTML has it’s own eventing system where HTML elements raise different events like onclick, onchange, onfocus, onblur etc. We assume that our readers already know about them so we won’t go into their details. Similarly, React Components have an event system.