Exporting functional and class components in React

Question

I'm using a ES7 React/Redux/GraphQL/React-Native snippets in VS Code and I'm not sure which "type" of export use. If export should be at the class / functional component declaration or at the end of the file.

In the code below, I have 2 class components exports and 3 functional components exports.

Which of these is reccomended?

// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'

export default class myComponent extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

// ****************************************
// 2. rce
// ****************************************
import React, { Component } from 'react'

class myComponent extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

export default myComponent

// ****************************************
// 3. rfc
// ****************************************
import React from 'react'

export default function myComponent() {
  return (
    <div>

    </div>
  )
}

// ****************************************
// 4. rfce
// ****************************************
import React from 'react'

function myComponent() {
  return (
    <div>

    </div>
  )
}

export default myComponent

// ****************************************
//  5. rafc
// ****************************************
import React from 'react'

const myComponent = () => {
  return (
    <div>

    </div>
  )
}

export default myComponent

My second question is about functional components - It is better (recommended) to write a functional component as an arrow function or classical function declaration?

Thanks a lot!

Answer 1

Dan Abramov said in his tweet :

JS tip: no matter which export style you prefer (default or named) or which function style you use (arrow or declaration), make sure your functions have names! Especially important for React components to show up named in DevTools and warnings.

And, between using rce and rcc for exporting class components: It's up to you to decide, however, as in CRA documentation rce is used:

import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render() {
    return <Button color="red" />;
  }
}

export default DangerButton;

With this style, you can use HOCs easily, for this example we want to warp our class component into a Higher Order Component provided by a library:

import { injectIntl} from "react-intl";

class Button extends React.Component {
  render() {
    const intl = this.props.intl;
    const title = intl.formatMessage({
        id: "button.title",
        defaultMessage: "Hello!"
      });
    return <Button title={title}>...</Button>;
  }
}
export default injectIntl(Button);

And between using the Functional components vs Class components: Please refer to the documentation , functional components are easier to write and to test, and now with React's useState hook you can use state in your functional components. For class components read React.Component documentation.

Answer 2

if you want to export multiple component in a file then you have to use only export ComponentName (without default).

then you can import as

import {ComponentA,ComponentB,...} from '../directory'

the other case is that you can export only one component in a file as

export default Class extends ........{} // 

or

export default Class; // at the end of file

Both are same.

and you can import with any name

import Class from '../directory'