Step by step guide for writing awesome React components

  • Now imagine the most verbose way to write it.class SlothImage extends React.Component { render() { return img src=’sloth.gif’ alt=’Pretty face’ }}export default SlothImageThis code is completely correct and performant but can it be shorter?
  • This component has no use of lifecycle methods.const SlothImage = props = { return img src=’sloth.gif’ alt=’Pretty face’}export default SlothImageTwo lines have been spared by converting the class component to the functional component.
  • /*The props should now be built like this:{ src: ‘sloth.gif’, alt: ‘Pretty face’,}*/export default props = img {…props}The dots are called a spread operator (❧).
  • My personal taste for writing more complex components is as follows:export default ({ separateNext: underline, rightComponent, onRightComponentClick, …rest: imgProps}) = { return ( Row underline SlothImage {…imgProps} / /Row )}If I could pick one rule in writing React components it would be exceeding the 80 characters mark (❧) in a…
  • The sign of overcomplication is the usage of “enum” like props or having too many props.TextInput required width=’col-6′ height=’xlarge’ bgColor=’#a4a4a4′ type=’primary’ suffix=’dollar’ 1337/TextInputEvery component should have a single responsibility (❧) and a reasonable amount of flexibility.

Going through the process of learning and using React and Redux I came to a following conclusion – they are not hard to grasp but are fairly difficult to master. Both are pretty minimal when it comes…
Continue reading “Step by step guide for writing awesome React components”

React Native and Typescript – Medium

Setup a #ReactJS Native project with a Typescript environment as an alternative to Flow:

  • Because – let’s be honest – there should be none React Native components written in Typescript with typings.
  • React (and Facebook) official typing system is Flow .
  • Also we want to use JSX syntax and be able to include Javascript files along with Typescript files.
  • We found some typings, but they follow an old format.
  • Let’s find the typings of React Native.

The main intention of this blog post is to show how to setup a React Native project with a Typescript environment as an alternative to Flow…
Continue reading “React Native and Typescript – Medium”

No Need for Dependency Injection in React Components – Medium

No need for dependency injection in #ReactJS Components:

  • When a component depends on another component, shallow rendering can help keep your unit tests isolated .
  • When a component depends on a function, you can pass the function in as a `prop`.
  • The goal of dependency injection is to make components more reusable and testable.
  • The function for submitting data can be tested separately and used in other components (like in DI).
  • I avoid putting data fetching and submitting logic directly into components.

Read the full article, click here.


@ReactiveConf: “No need for dependency injection in #ReactJS Components:”


Dependency Injection (DI) is a big part of the way things are done in Angular, so it’s natural to look at whether/how it’s needed in…


No Need for Dependency Injection in React Components – Medium