How to understand this syntax? var {...} = React;

Question

in the native response example: https://github.com/facebook/react-native

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

what does this syntax mean?

var { ScrollView, TouchableHighlight, Text } = React;

I typed it in the nodejs command, causing a syntax error. Is this special Javascripts syntax only for React Native?

thank

Answer 1

This is Destructuring , ECMAScript 6 Feature . As far as I know, it is not yet included in any version of node.js or iojs, but there may be a command line flag that you can use to enable it.

Answer 2

JavaScript, React Native.

ES5

• : promise.catch(function() { });

ES6

• : <C onPress={() => this.setState({pressed: true})}

• : Math.max(...array);

• : class C extends React.Component { render() { return <View />; } }

• : var {isActive, style} = this.props;

• : for (var element of array) { }

• : var key = 'abc'; var obj = {[key]: 10};

• Consise Method: var obj = { method() { return 10; } };

• : var name = 'vjeux'; var obj = { name };

• Rest Params: function(type, ...args) { }

• : var who = 'world'; var str = `Hello ${who};`

ES7

• : var extended = { ...obj, a: 10 };

• Trailing Comma: function f(a, b, c,) { }