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”