main.js

define([
  "jsx!src/js/app/presentation",
  "jsx!src/js/app/components/titleSlide",
  "jsx!src/js/app/components/aboutMe",
  "jsx!src/js/app/components/slideABC" // more slides, etc. (planning to have a better way to load these!)
], function(Presentation, TitleSlide, AboutMe) {
  var slides = Array.prototype.slice.call(arguments, 1);
  var presentation = new Presentation({
        slides: slides
    });
    presentation.start();
});

PresentationFsm.js

/** @jsx React.DOM */

define([
	"react",
	"machina",
	"mousetrap"
], function(React, machina, Mousetrap) {

	return machina.Fsm.extend({
		initialize: function() {
			var self = this;
			self.currentPos = 0;
			Mousetrap.bind(['left', 'backspace'], function() {
			    self.previous();
			});
			Mousetrap.bind(['right', 'space', 'enter'], function() {
			    self.next();
			});
		},

		start: function() {
			this.handle("start");
		},

		next: function() {
			this.handle("nextSlide");
		},

		previous: function() {
			this.handle("previousSlide");
		},

		states: {
			uninitialized: {
				start: "viewing"
			},
			viewing: {
				_onEnter: function() {
					this.renderCurrentSlide();
				},
				nextSlide: "advancing",
				previousSlide: "rewinding"
			},
			advancing: {
				_onEnter: function() {
					if(this.currentPos < this.slides.length -1) {
						this.currentPos += 1;
					}
					// transitioning immediately for now, but
					// this allows for future async transitions
					this.handle("advanced");
				},
				advanced: "viewing"
			},
			rewinding: {
				_onEnter: function() {
					if(this.currentPos > 0) {
						this.currentPos -= 1;
					}
					// transitioning immediately for now, but
					// this allows for future async transitions
					this.handle("rewound");
				},
				rewound: "viewing"
			}
		},

		renderCurrentSlide: function() {
			React.renderComponent(
				this.slides[this.currentPos](),
				document.getElementById("main")
			);
		}
	});
});