export-a-react-component.md

How do I React Component?

A variation with an unnecessary const

...since nothing in that file should be accessing that 'MyComponent' except the export.

Also that react import is very confusing though. Why do I need it? I don't reference that variable anywhere... oh wait some tool compiles the JSX for me at some point into React.createElement or whatever. Very opaque:

import React from 'react';

const MyComponent = () => (
  <div>Hello!</div>
);

export default MyComponent;

I like this one the best (but it's not proper ES6)

import React from 'react';
export default MyComponent = () => (
  <div>Hello!</div>
);

Feels too ES5-like

...But eslint doesn't complain about error Expected a function declaration func-style

export default Function MyComponent () {
  return (
    <div>Hello!</div>
  );
};

Or this,

...but I don't really need any prop access or whatever:

import React, {Component} from 'react';
export default class MyComponent extends Component {
  render() {
    return (
      <div>Hello!</div>
    );
  }
};