React ES5 to ES6: props and state

Developing with React and ES5, state on a Component is configured using the getInitialState() function:

var ButtonComponent = React.createClass({

  getInitialState : function(){
    return({
      value1: this.props.value1,
      value2: this.props.value2
    });
 },

...

});

If you’re moving from ES5 TO ES6 and creating React components using ES6 classes, if you try to follow the same approach you’ll see an error like this:

To set the initial state on an ES6 React class, you establish it in the constructor like this:

constructor(props) {
  super(props);
  this.state = {
    value1 : this.props.value1,
    value2 : this.props.value2,
  };
 }

 

MacOS: Opening a Terminal from a folder in Finder (plus, taking and annotating screenshots)

In Windows I like that you can Shift-Rightclick in Explorer and select “Open command prompt here”. During development I often want to do the same on my Mac, and this feature is provided too, but not enabled by default. To turn it on, go to System Preferences > Keyboard > Shortcuts, select Services on the left, and then check the option “New Terminal at Folder”:

If you want to go in the other direction, you can easily open a Finder at your current folder in Terminal by running ‘open .’

A couple of bonus tips:

  • To take full screen screenshot on the Mac, press Shift-Cmd-3. A file will be saved on your desktop. To take a screenshot of a selection of the screen, press Shift-Cmd-4, then drag to outline your selection.
  • In the Preview app, there’s a neat feature under Tools > Annotate where you can annotate your screenshots with highlighted sections, boxes, arrows, text etc. Just open your screenshot file in Preview, and then you can easily annotate and save the image: