23 Best React UI Component Libraries And Frameworks

  • 23 Best React UI Component FrameworksA curated summary of part 1 and part 2 of “Best React Component Libraries for 2018”.
  • Reactstrap buttonsReact Toolbox is a set of React components that implements Google Material Design.
  • Onsen UI React componentsReact UI component library design system, built with styled-components and styled-system.
  • Elemental UI modal componentA set of React components optimized for mobile desktop with highly customizable styles which can be configured on the base level as well individually for each one of them.
  • These somehow almost unnoticed components are Khan’s academy’s React UI components released to the community reaching nearly 1k stars.

23 best React.js UI component frameworks and libraries for building your next application, with Material-UI, React Bootstrap, React desktop, Grommet, Elemental UI, Grommet, Reactstrap, Ant design etc
Continue reading “23 Best React UI Component Libraries And Frameworks”

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”