Setupping up the basic components

client/spellsort/sorter/sorter.jsx

@@ -0,0 +1,32 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Sorter = React.createClass({
+	getDefaultProps: function() {
+		return {
+			spells : []
+		};
+	},
+
+
+	renderSpell : function(spell){
+		return <div className='spell' key={spell.id}>
+			{spell.name}
+		</div>
+	},
+
+	renderSpells : function(){
+		return _.map(this.props.spells, (spell)=>{
+			return this.renderSpell(spell)
+		});
+	},
+
+	render : function(){
+		return <div className='sorter'>
+			{this.renderSpells()}
+		</div>
+	}
+});
+
+module.exports = Sorter;

client/spellsort/sorter/sorter.less

@@ -0,0 +1,3 @@
+.COM{
+
+}

client/spellsort/spellRenderer/spellRenderer.jsx

@@ -0,0 +1,14 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var COM = React.createClass({
+
+	render : function(){
+		return <div className='COM'>
+			COM Ready!
+		</div>
+	}
+});
+
+module.exports = COM;

client/spellsort/spellRenderer/spellRenderer.less

@@ -0,0 +1,3 @@
+.COM{
+
+}

client/spellsort/spellsort.jsx

@@ -6,23 +6,35 @@ var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('./navbar/navbar.jsx');
 
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var SpellRenderer = require('./spellRenderer/spellRenderer.jsx');
+var Sorter = require('./sorter/sorter.jsx');
 
 var SpellSort = React.createClass({
 
+	getDefaultProps: function() {
+		return {
+			spells : []
+		};
+	},
+
 	handleSplitMove : function(){
 
 	},
 
 	render : function(){
+		console.log(this.props.spells);
+
 		return <div className='spellsort page'>
 			<Navbar>
-
+				<Nav.section>
+					yo
+				</Nav.section>
 			</Navbar>
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 
-					<div>pane 1</div>
-					<div>pane 2</div>
+					<Sorter spells={this.props.spells} />
+					<SpellRenderer spells={this.props.spells} />
 
 				</SplitPane>
 			</div>