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”

django

Proper way of using url patterns  #angularjs #reactjs

  • The problem is that if I press f5 it’ll submit the form again, because of the URL is now different.
  • I’ve created a form which by submit uploads an item to the database.
  • Terrible sorry I wrote the wrong url in my url patterns.
  • def createItem(request): if request.method == ‘POST’: f = itemCreateForm(request.POST) if f.is_valid(): f.save() return HttpResponseRedirect(‘/homepage/CMS/’) else : form = itemCreateForm() context = { ‘form’ : form, ‘message’ : ‘Content Manage Site’ } return render(request, ‘CMS.html’, context)
  • def CMS(request): form = itemCreateForm() context = { ‘form’ : form, ‘message’ : ‘Content Manage Site’ } return render(request, ‘CMS.html’, context) def createItem(request): f = itemCreateForm(request.POST) if f.is_valid(): f.save() pass form = itemCreateForm() context = { ‘form’ : form, ‘message’ : ‘ItemCreated!’

I’ve created a form which by submit uploads an item to the database. The problem is that if I press f5 it’ll submit the form again, because of the URL is now different.
Continue reading “django”