[解決済み] reactjsとbabelを使った関数のエクスポート

質問

reactjsを使用したプロジェクトがあり、babelでトランスパイルされています。私はes2015とreactのトランスフォームを私の .babelrc . 私は現在リファクタリング中で、最初のパスでは基本的に次のようにしました。 export class foo を必要なもの全てに適用しています。これらのクラスの多くは、本当は関数であるべきなので、そのように書き直そうとしているのですが、同じエラーが出続けています。私のメインアプリケーションファイルは次のようなものです。

import React, { Component } from 'react';

import {Foo, Bar} from './components/ui.js';

class Application extends Component {

  constructor(props){
    super(props);
    this.state = {
      object: null
    }
  }

  componentDidMount(){
    // code
  }

  componentDidUpdate(){
    // other code
  }

  render(){
    return(
      <div>
        <Foo />
        <Bar />
      </div>
    )
  }

}

module.exports = Application

そして、私のインポートは ui.js はこのようなものです。

import React, { Component } from 'react';

export class Foo extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      // Some JSX
    )      
  }
}


export class Bar extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      // Some other JSX
    )      
  }
}

これらのエクスポートされたクラスの1つを、例えば関数に変更しようとすると。

// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
  render() {
    return (
      // Some other JSX
    )      
  }
}

以下のようなエラーが発生します。

SyntaxError: Unexpected token <line where I declare a function>

何が間違っているのかわからず、グーグル検索しても他の問題の答えしか出てきません。

どのように解決するのですか？

関数を変数として定義するのと同じで、exportを前面に追加するだけです（ES6構文を使用）。

export const render = () => (
  // Some other JSX
);

または、その代わりに

export var render = function() {
  return (
    // Some other JSX
  );
};