Is React.Component the default extension when exporting?

Question

I am looking through some React projects, and sometimes see-

export default () => {

But other times I see-

export default class Entry extends React.Component {.

Is there any difference between the two, viz. does export automatically extend React.Component? What is the best practice?

Answer 1

The export default () => you see is a React 0.14+ "Functional Component".

It's a new more concise syntax for writing React components. Both it and the other syntax are fine.

These components behave just like a React class with only a render method defined. Since no component instance is created for a functional component, any ref added to one will evaluate to null. Functional components do not have lifecycle methods, but you can set .propTypes and .defaultProps as properties on the function.

Basically doing:

class MyComponent extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

Is the same as:

const MyComponent = () => <p>Hello</p>;

When used inside React component and passed to Render.

Answer 2

The first one is a functional component. However the other code will export a regular class/React component.

For example

export default (withHistory, onUpdate) => {
    const history = new HashHistory;
  return (
    <Router history={history} onUpdate={onUpdate}>
      <Route path='/' component={Index} />
    </Router>
  );
};

Will compile (at least with Babel+webpack) to

...
var _reactRouterLibHashHistory = __webpack_require__(35);
var _reactRouterLibHashHistory2 = _interopRequireDefault(_reactRouterLibHashHistory);
exports['default'] = function (withHistory, onUpdate) {
      var history = new _reactRouterLibHashHistory2['default']();
      return React.createElement(
        _reactRouter.Router,
        { history: history, onUpdate: onUpdate },
        React.createElement(_reactRouter.Route, { path: '/', component: _routesIndex2['default'] })
      );
    };
module.exports = exports['default'];
...