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”

[NNM #3] React Image Fallback

just blogged: #React #Image #Fallback – handling missing images  #javascript #reactjs #npm

  • Instead of showing the image conditionally, we can use the React Image Fallback component.
  • Today I will show you a React Image Fallback module.
  • How to install and use the React Image Fallback module
  • The src props is for setting the path to the image we want to show.
  • [NNM #3] React Image Fallback – handling missing images

The third post from the “NPM Module of the Month” series. This time I will show you how to handle missing images with React Image Fallback component.
Continue reading “[NNM #3] React Image Fallback”

A brief history of React Native

  • React Native is super web developer friendly and doesn’t require learning native iOS and Android languages, or native APIs – learn once, write anywhere .
  • Another reason is that React Native is a cross-platform solution : we’re planning to open our platform to other developers in order to supercharge development and build beautiful native apps for iOS and Android.
  • Once the new version of Shoutem is officially launched, customization of the apps will be almost endless.
  • It solved our current architectural problems while allowing us to achieve a level of performance that is indistinguishable from native apps built with Java or Objective-C .
  • In the near future, we can expect more Universal Windows Platform and Smart TV apps to be built with React Native.

The story of React Native is quite fascinating: what started as Facebook’s internal hackathon project, has since become one of the most popular frameworks.
Continue reading “A brief history of React Native”