React Higher-Order Components in TypeScript made simple

  • These attributes were chosen to illustrate all the aspects of HOCs while keeping the HOC as simple as possible.PropsThere are three types of props we need to consider when creating a HOC: OriginalProps, ExternalProps and InjectedProps.OriginalProps are props of the wrapped component.
  • The state of the HOC is simple, just the count of the clicksOptionsAs stated before, HOC is a function that takes a component and returns a component.While this is true, many HOCs take the form of curried HOC factories (like the mentioned connect from react-redux) that take a configuration object…
  • If you need to interact with props or states from here, the only way to do it is to specify options as functions, that take the props or states as arguments.For ClickCounted the options are simple – a flag indicating whether to console.log on click:Putting it all togetherHaving declared all the…
  • Now that we have the signature, all that’s left is to implement the HOC:First, we define the type alias for the resulting component’s props — the TOriginalProps ExternalProps to simplify its reuse.
  • Props and state are passed to it with whatever was in the OriginalProps along with the clickCount from the HOC state.Using the HOCTo illustrate how to use our HOC, we create a Demo component, that displays a different text depending on the amount of clicks and a custom message.Notice the type…

On a simple React Higher-Order Component, the process of writing them in TypeScript is demonstrated along with advice and rationals behind the type declarations
Continue reading “React Higher-Order Components in TypeScript made simple”

Embracing React – EndGame Blog

Embracing React  #ui #react #software #reactjs #cloud #reactjs

  • This allows the UI (which is a huge cost in any build) to be re-useable — a huge business benefit when building cloud software.We had been using Backbone as our main UI framework and had found that too much logic hid itself inside our models.
  • There was no clear delineation between where the model ended and the logic began.Beautiful design can be implemented in any framework (or without one at all!)
  • This is due to the main logic being removed from the grid itself and only the common state changes, such as a loading state, remaining triggered by the main logic.In 2015 we were starting a few new projects from scratch, so we decided to use React as the framework for the UI.
  • The solution was to build these common components to be re-usable from the ground up — so they could be dropped into any app seamlessly.One component we’ve used multiple times is a card dashboard (shown above) — where we separate bite-size information chunks into cards that can then expand into a larger picture.
  • React has been an ideal framework for developing these cards as separate modules that have no dependencies on other cards or the underlying dashboard layout.Another useful outcome of React is that our designer is able to communicate in components as building blocks.

React is a JavaScript library for building UI and it promises many things. But the main one that appealed to us was the idea that state and logic could be easily removed from the UI code and placed…
Continue reading “Embracing React – EndGame Blog”