How to separate Slides into module files

FormidableLabs spectacle

import React from "react";
import {
  Link,
  Slide,
  Text,
  Heading
} from "spectacle";

var MainBody = () => {
  return <div>
    <Heading size={1} fit caps lineHeight={1} textColor="black">
      React Router
    </Heading>
    <Heading size={1} fit caps>
      A ReactJS Presentation
    </Heading>
    <Heading size={1} fit caps textColor="black">
      for when your users hit the back button
    </Heading>
    <Link href="https://github.com/gpltaylor">
      <Text bold caps textColor="tertiary">brought to you by Garry Taylor</Text>
    </Link>
  </div>
}

//<Slide transition={["zoom"]} bgColor="primary">
class MainSlide extends Slide  {
  constructor(props) {
    super(props);
    this.transition = ["Zoom"];
    this.bgColor = "primary";
  }
}

export default MainSlide;
export {MainBody};

index.js

import {MainSlide, MainBody} from "./react-router/";

const Main = <MainSlide>
    <MainBody/>
</MainSlide>

var App = () => {
  return <div>
        <Spectacle theme={theme}>
          <Deck transition={["zoom", "slide"]} transitionDuration={500}>
            {React.Children.toArray([reactRouter])}
          </Deck>
         </Spectacle>
    </div>
}