React Class definition vs export default

Question

I'm new to React and following https://serverless-stack.com/.

While from the start, components are defined as:

class ComponentName extends React.Component {
...
}

When I got to this step, at the AppliedRoutes section:

export default ({ component: C, props: cProps, ...rest }) =>
  <Route {...rest} render={props => <C {...props} {...cProps} />} />;

Is it correct to say that this is a new component named AppliedRoute, which Parent passes it:

1. component (component: C)
2. props (props: cProps)
3. the rest of the parent props (...props)

How do I go about thinking about this conceptually in the class ComponentName extends React.Component definition in the first example?

Answer 1

You're dealing with two separate issues here. Lets take your component and turn it into a variable

Below is your same function assigned to a MyRoute variable. It is a stateless or "function" component. It is the simplest type of react component because it's just a single function.

const MyRoute = ({ component: C, props: cProps, ...rest }) =>
    <Route {...rest} render={props => <C {...props} {...cProps} />} />;

Now, below is the same component again but as a class. This can have additional functions, a constructor, and can contain state (this.setState()). I stress that this is functionally equivalent to the above, but it can contain state.

class MyRoute extends React.Component {
    render() {
        const { component: C, props: cProps, ...rest } = this.props;
        return (
            <Route {...rest} render={props => <C {...props} {...cProps} />} />
        );
    }
}

Now, to your question about exports, you can export either of these in a few different ways

export { MyRoute }; // access at 'exports.MyRoute'

export default MyRoute; // access at 'exports.default'

export = MyRoute; // access at 'exports'

These are all just different ways to expose your class/variable through the exports object. It doesnt matter what you export, it could be anything. This also affects the way you need to import your class.

The way you posted it in your question is just a shorthand for using a function component and exporting it as the default.

Answer 2

First example is the standard way of writing React components. If you want to apply the second approach in this case, the final result is something like:

class AppliedRoutes extends React.Component {
  render() {
    const { component: C, props: cProps, ...rest } = this.props

    return (
      <Route
        {...rest}
        render={props => <C {...props} {...cProps} />}
      />
    )
  }
}

The second example is the stateless or functional component. It accepts props as an object argument and returns a React element.

In this case, component, props and rest are all part of AppliedRoutes props. Should your component not handling state nor lifecycle events, just propagating props and returning a new component right away, stick to the second approach.