What does () => className means in Javascript ES6?

Question

I'm looking at react's tutorial page, and it shows:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
                                             // ^ this part

What does it means? Is it equal to:

function() {
  return HelloWorldApp
}

If it so, why not using:

HelloWorldApp

directly?

function that returns HelloWorldApp is not same as HelloWorldApp — Bryan Chen, Dec 14 '16 at 02:16
The reason you would use a function is to make it lazy loading. That way the class is not actually resolved until you use the component. — max, Dec 14 '16 at 02:21

score 4 · Accepted Answer · answered Dec 14 '16 at 02:17

That's an ES6 arrow function. It's a function that doesn't need any arguments and returns HelloWorldApp. It's equivalent to:

AppRegistry.registerComponent('HelloWorldApp', function() {
    return HelloWorldApp;
});

As for why it needs a function and not just the React component, I'm not sure. Perhaps it's just an API decision by React Native.

What does () => className means in Javascript ES6?

1 Answers1